CODEWITHSUNDEEP
javascriptaudio
whynotcode
whynotcode

Reputation: 108

How to play next audio when the current audio is finished playing?

I am currently trying to play another audio if the current audio is finished but I am not getting any success results would be appreciated if any suggestions is given,here is the below code :-

document.addEventListener('DOMContentLoaded', () => {

  ms();

});

function ms() {
  var btns = document.getElementsByClassName("pas");
  for (var j = 0; j < btns.length; j++) {

    document.addEventListener('play', function(e) {
      var songs = document.getElementsByClassName("pas");
      for (var i = 0; i < songs.length; i++) {
        if (songs[i] != e.target) {
          songs[i].pause();
        }
      }

    }, true);


  }

}
<audio class="pas" controls loop autoplay>
  <source  src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3">
    Your browser dose not Support the audio Tag
</audio>
<audio class="pas" controls loop autoplay>
  <source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3">
    Your browser dose not Support the audio Tag
</audio>

The above js is to allow only one audio to be played once. Anyway possible way to add any function to play another audio if the first one is finished?

You can try code demo here https://jsfiddle.net/mt1koznd/2/

Upvotes: 2

Views: 840

Answers (1)

zer00ne
zer00ne

Reputation: 43870

Use the timeupdate event, and the .duration and .currentTime properties. If you intend to switch players, you need to remove the loop attribute and remove the autoplay attribute on all but one or all players will play at the same time. The example will work for an unlimited amount of players and will loop back to the starting player if the current player is the last one.

Details are commented in example 

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style></style>
</head>

<body>
  <audio class="song" controls>
  <source  src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3">
</audio>
  <audio class="song" controls>
  <source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3">
</audio>
  <script>
    // Collect all .song into a NodeList then convert it into a real array
    const songs = [...document.querySelectorAll('.song')];

    // Bind the timeupdate event to each .song
    songs.forEach(song => song.ontimeupdate = nextSong);
    
    // Event handler
    function nextSong(e) {

      // Get player's full duration in seconds
      const end = this.duration;

      // Get the current time spent playing in seconds
      let now = this.currentTime;

      // If the time playing reaches the duration...
      if (end <= now) {
        
        // Get the index position of player
        const position = songs.indexOf(this);

        // If the player is the last one start play on the first player
        if (position === songs.length - 1) {
          songs[0].play();

        // Otherwise start ply on the next player
        } else {
          songs[position + 1].play();
        }
      }
    }
  </script>
</body>

</html>

Upvotes: 2

Related Questions