CODEWITHSUNDEEP
javascript
Edu S.R
Edu S.R

Reputation: 25

Multiple progress bars for audio files

So I managed to get a basic audio player with a progress bar that plays, pauses and resumes when the user clicks a button, but now I've tried to implement multiple audio files with different lengths on the same page and I can't figure out how to keep each progress bar independent.

Obviously I can't use the same ID multiple times, but I also tried classes and it doesn't work either.

Also tried to make a new function for each audio file but it seems they share the "interval" so when you start playing an audio, the others will "catch up" with that one advancing the progress bar.

Shouldn't be too difficult to achieve but I just can't figure it out.

Thanks in advance!

var interval;
var width = 1;

function move() {
  var elem = document.getElementById("myBar");

  clearInterval(interval);
  interval = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      width = 1;
      clearInterval(interval);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

function pause() {
  clearInterval(interval);
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<audio src="audio/audio1.mp3"></audio>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<button onclick="move()">Play</button>
<button onclick="pause()">Pause</button>

<br>

<audio src="audio/audio2.mp3"></audio>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<button onclick="move()">Play</button>
<button onclick="pause()">Pause</button>

Upvotes: 0

Views: 156

Answers (1)

Mahbub Moon
Mahbub Moon

Reputation: 511

You need to add a parent div to each segment and then find their sibling class .myProgress. Then find the child of that element and set play and pause functionality on that element.

Make sure you don't play multiple file at the same time. That's why I have added a counter below.

var interval;
var width = 1;
var currentElement;
var playCount =0;

function move(event) {
	playCount++;
  if(playCount>1) return;
  var elem = myFunction(event.target);
  if(elem !=currentElement){
  	width = 1;
  }
  interval = setInterval(frame, 100);
  currentElement = elem;

  function frame() {
    if (width >= 100) {
      width = 1;
      clearInterval(interval);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

function pause(event){
	playCount--;
	var elem = myFunction(event.target);
  clearInterval(interval);
}

function myFunction(currObj){
  var parentofSelected = currObj.parentNode;
  var children = parentofSelected.childNodes;
  for (var i=0; i < children.length; i++) {
      if (children[i].className == "myProgress") {
          myValue= children[i].firstElementChild;
          break;
      }
  }
  return myValue;
} 
.myProgress {
  width: 100%;
  background-color: #ddd;
}

.myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
<div>
<audio src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"></audio>

<div class="myProgress">
  <div class="myBar"></div>
</div>

<button onclick="move(event)">Play</button>
<button onclick="pause(event)">Pause</button>
</div>
<br>
<div>
<audio src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3"></audio>

<div class="myProgress">
  <div class="myBar"></div>
</div>

<button onclick="move(event)">Play</button>
<button onclick="pause(event)">Pause</button>
</div>

Upvotes: 1

Related Questions