Multiple HTML5 audio players with playlist. First playlist works, second playlist loads in a new window
I have a working HTML5 audio player with a playlist but problems occur when having multiple players with a playlist. The first player with a playlist works but when I add a second playlist, the audio file is played in a new window.
And the two audio players
I don't know what to do and I really need help. I've looked online for a solution and couldn't find one.
var audio; var playlist; var tracks; var current; init(); function init() { current = 0; audio = $('audio'); playlist = $('#playlist'); tracks = playlist.find('li a'); len = tracks.length - 1; audio[0].volume = 1; playlist.find('a').click(function(e) { e.preventDefault(); link = $(this); current = link.parent().index(); run(link, audio[0]); }); audio[0].addEventListener('ended', function(e) { if ($(audio).hasClass("repeat")) { current++; if (current > len) { current = 0; link = playlist.find('a')[0]; } else { link = playlist.find('a')[current]; } run($(link), audio[0]); } else if ($(audio).hasClass("repeat-trk")) { current++; if (current == len) { current = 0; link = playlist.find('a')[0]; } else { link = playlist.find('a')[current]; } run($(link), audio[0]); } else { current++; if (current < len) { current = 0; link = playlist.find('a')[0]; } else { link = playlist.find('a')[current]; } run($(link), audio[0]); } }); } function run(link, player) { player.src = link.attr('href'); par = link.parent(); par.addClass('active').siblings().removeClass('active'); audio[0].load(); audio[0].play(); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg"> <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3"> Sorry, your browser does not support HTML5 audio. </audio> <ul id="playlist"> <li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li> <li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li> </ul> <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg"> <source type="audio/mp3" src="https://ia801409.us.archive.org/3/items/soundA/soundA.mp3"> Sorry, your browser does not support HTML5 audio. </audio> <ul id="playlist"> <li class="active"><a href="https://ia801409.us.archive.org/3/items/soundA/soundA.mp3">Sound A</a></li> <li><a href="https://ia601404.us.archive.org/3/items/test_20190906/test.mp3">test</a></li> </ul>