2

I'm trying to use the <audio> tag, and I want to have as many tracks playing as I add. But in the end, the very first track plays in a circle. How can this be fixed?

<audio id="audio" preload="" autoplay="" loop="">
  <source type="audio/mp3" src="music/mus1.mp3">
  <source type="audio/mp3" src="music/mus.mp3">
</audio>
<script type="text/javascript">
var audio = document.getElementById("audio");

function pVid() {
    audio.paused ? audio.play() : audio.pause();
}
</script>
1
  • @RokoC.Buljan I need a reward of 100 for the question Link worktime from one form to another..
    – user17541419
    Commented Feb 8, 2022 at 12:09

3 Answers 3

5
+100
  • Add a skip button
  • when clicked, call a skip function that will
    • pause if there is something playing then
    • clear the playing/paused class clist
    • increment the current to the next track
    • then play

let sounds = new Array(new Audio("https://freesound.org/data/previews/46/46992_514283-lq.mp3"),
  new Audio("https://freesound.org/data/previews/610/610823_13156161-lq.mp3"),
  new Audio("https://freesound.org/data/previews/92/92005_1499847-lq.mp3"), new Audio("https://freesound.org/data/previews/46/46992_514283-lq.mp3"),
  new Audio("https://freesound.org/data/previews/610/610823_13156161-lq.mp3"),
  new Audio("https://freesound.org/data/previews/92/92005_1499847-lq.mp3"));

let current = random(0);
let paused = true;

// set event handlers on all audio objects
for (let s of sounds) {
  s.addEventListener('ended', ended);
  s.addEventListener('play', play);
  s.addEventListener('pause', pause);
}

updateVolume()

// handle button click
function playPause() {
  if (paused) {
    sounds[current].play();
    btn.innerText = 'pause';
    paused = false;

  } else {
    sounds[current].pause();
    btn.innerText = 'play';
    paused = true;
  }
}

// handle button skip
function skip() {
  if(!paused) playPause();
  document.getElementById(current + '').classList.remove('playing');
  document.getElementById(current + '').classList.remove('paused');
  current = (current + 1) % sounds.length;
  playPause();
}

function ended(e) {
  document.getElementById(current + '').classList.remove('playing');
  document.getElementById(current + '').classList.remove('paused');
  /*i++;
  if (i >= sounds.length) //loop
    i = 0;
  */
  current = random(current); // shuffle

  paused = true;
  playPause();
}

function play() {
  document.getElementById(current + '').classList.add('playing');
  document.getElementById(current + '').classList.remove('paused');
}

function pause() {
  document.getElementById(current + '').classList.add('paused');
  document.getElementById(current + '').classList.remove('playing');
}

function random(i) {
  let next = i;
  while (next == i)
    next = Math.floor(Math.random() * sounds.length);
  return next;
}

function updateVolume() {
  for (let s of sounds) {
    s.volume = volume.value;
  }
}
#list {
  margin-top: 1rem;
  border: 1px solid gray;
  width: 100px;
}

#controls {
  position: fixed;
  right: 2rem;
  top: 1rem;
  width: 50px;
}

#volume {
  width: 150px;
  height: 20px;
  transform-origin: 75px 75px;
  transform: rotate(-90deg) translateY(50%);
}

.playing {
  background-color: lightblue;
}

.paused {
  background-color: wheat;
}
<Button id=btn onClick='playPause()'>play</Button>
<Button id=btnSkip onClick='skip()'>skip</Button>
<div id=list>
  <div id='0'>Guitar</div>
  <div id='1'>Drum</div>
  <div id='2'>Violin</div>
  <div id='3'>Guitar</div>
  <div id='4'>Drum</div>
  <div id='5'>Violin</div>
</div>
<div id=controls>
  <label for="volume">Volume</label><br>
  <input id=volume type="range" id="volume" name="volume" min="0" max="1" step='.1' value='.5' onInput='updateVolume()'>

</div>

0

I hope adding below sample code will do the work :

function skipAndplayNext() {
            sounds[current].pause();
            document.getElementById(current + '').classList.remove('paused');
            document.getElementById(current + '').classList.remove('playing');
            current++;
            if (current > (sounds.length - 1)) {
                current = 0
            }
            sounds[current].play();
            document.getElementById(current + '').classList.add('playing');
        }
0
0

Try this: (jQuery)

function skipAndplayNext() {
    sounds[currentAudio].pause();
    $("#currentAudio").classList.remove('paused');
    $("#currentAudio").classList.remove('playing');
    currentAudio++;
    if (currentAudio > (sounds.length - 1)) {
      currentAudio = 0
    }
    sounds[currentAudio].play();
    $("#currentAudio").classList.add('playing');
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.