[FIXED] Making a Javascript music app based on tutorial, hit roadblock

Issue

I am currently trying to create a music app based on the following video: https://youtu.be/OafpiyPa63I?t=13127

I am at the linked timestamp, and I have written the code exactly as shown in the video, but for some reason, when I try to seek, the input is set back to 0 and therefore so is the song. My code for this part:

let currentStart = document.getElementById('currentStart');
let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');
let dot = document.getElementsByClassName('dot')[0];

music.addEventListener('timeupdate', () => {
  let music_curr = music.currentTime;
  let music_dur = music.duration;

  let min1 = Math.floor(music_dur / 60);
  let sec1 = Math.floor(music_dur % 60);

  if (sec1 < 10) {
    sec1 = `0${sec1}`;
  };

  currentEnd.innerText = `${min1}:${sec1}`;

  let min2 = Math.floor(music_curr / 60);
  let sec2 = Math.floor(music_curr % 60);

  if (sec2 < 10) {
    sec2 = `0${sec2}`;
  };

  currentStart.innerText = `${min2}:${sec2}`;


  let progressBar = parseInt((music_curr / music_dur) * 100);
  seek.value = progressBar;
  let seekbar = seek.value;
  bar2.style.width = `${seekbar}%`;
  dot.style.left = `${seekbar}%`;
});

seek.addEventListener('change', () => {
  music.currentTime = seek.value * music.duration / 100;
});
<div class="bar">
  <input type="range" id="seek" min="0" max="100">
  <div class="bar2" id="bar2"></div>
  <div class="dot"></div>
</div>
header .master_play .bar {
  position: relative;
  width: 43%;
  height: 2px;
  background: rgb(105,105,170,.1);
  margin: 0px 15px 0px 10px;
}

header .master_play .bar .bar2 {
  position: absolute;
  background: #36e2ec;
  width: 0%;
  height: 100%;
  top: 0;
  transition: 1s linear;
}

header .master_play .bar .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #36e2ec;
  border-radius: 50%;
  left: 0%;
  top: -1.5px;
  transition: 1s linear;
}

header .master_play .bar .dot::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid #36e2ec;
  border-radius: 50%;
  left: -6.5px;
  top: -6.5px;
  box-shadow: inset 0px 0px 3px #36e2ec;
}

header .master_play .bar input {
  position: absolute;
  width: 100%;
  top: -7px;
  left: 0;
  cursor: pointer;
  z-index: 999999999999;
  opacity: .5;
}

I’m not sure if I am in the wrong, or if the tutorial is outdated.

Solution

I figured out it was the platform I was running the code on. Somewhere it had clashed, so I was able to move it to a new host and it worked.

Answered By – Agastonarii

Answer Checked By – David Marino (FixeMe Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *