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/
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>