HTML аудиоплеер отслеживает ссылки в новом браузере

Question

Я пытаюсь создать аудиоплеер HTML и работать до сих пор. Единственная проблема заключается в том, что при нажатии трека в плейлисте mp3 загружается в новое окно браузера.

Когда нажата кнопка воспроизведения (для выбранного в данный момент трека), она воспроизводится в аудиоплеере, и это то, что я хотел бы сделать для всех треков в плейлисте при нажатии.

Любые идеи о том, как исправить это?

https://jsfiddle.net/47qh28c6/

HTML-

<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"> 
    <img style="float:right;width:150px;" src="images/placer.gif"> 
    <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> 
    <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li> 
    <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li> 

</ul> 

И Javascript

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 = .10; 
audio[0].play(); 
playlist.find('a').click(function(e){ 
    e.preventDefault(); 
    link = $(this); 
    current = link.parent().index(); 
    run(link, audio[0]); 
}); 
audio[0].addEventListener('ended',function(e){ 
    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(); 
} 

Answer 1

Ваш код кажется правильным. Единственная проблема, которую я нашел с JSFiddle that you shared in the question, и тот, который вызывает все проблемы в JSFiddle, заключается в том, что вы не включаете библиотеку jQuery.

Как вы не добавляете библиотеку, функция init() выдаст ошибку, когда он достигает код audio = $('audio'):

Uncaught ReferenceError: $ is not defined

и он будет прекратить выполнение остальной части кода в функции, поэтому код которые влияют на поведение a s внутри плейлиста, не будут выполнены, и нормальное поведение (открытие ссылки) не будет изменено.

Как только вы добавите библиотеку jQuery в JSFiddle, плеер, похоже, работает нормально: https://jsfiddle.net/47qh28c6/3/.