在新的瀏覽器中打開的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庫。

當您不添加庫，當到達代碼audio = $('audio')的init()功能將拋出一個錯誤：

Uncaught ReferenceError: $ is not defined

，它就會停止執行的函數的代碼的其餘部分，因此代碼影響播放列表中a s的行爲將不會被執行，並且正常行爲（打開鏈接）將不會被修改。

將jQuery庫添加到JSFiddle後，播放器似乎工作正常：https://jsfiddle.net/47qh28c6/3/。