用JavaScript編程改變音頻源

我想我錯過了一些愚蠢的東西。我創建了一個帶有音頻源標題的按鈕。當用戶點擊按鈕時，源應該在音頻播放器中更新。用JavaScript編程改變音頻源

不幸的是，音頻源似乎總是最後一個項目。換句話說，這些按鈕並不對應於正確的來源......它們都只是對應於相同的來源。

下面是代碼，因爲我有它：

episodes = {0: {title: 'Audio 1', url: 'audio1.mp3'}, 1: {title: 'Audio 2', url: 'audio2.mp3'}, 2: {title: 'Audio 3', url: 'audio3.mp3'}}; 

for (var i = 0; i < Object.keys(episodes).length; i++) { 
     var title = episodes[i].title; 
    var url = episodes[i].url; 
    var button = document.createElement('button'); 
    button.innerHTML = title; 
    button.addEventListener("click", function() { 
     $('#player').attr('src', url)[0]; 
     $('#player')[0].load(); 
    }); 
    document.body.appendChild(button); 
}

，或作爲小提琴：https://jsfiddle.net/jmg157/1cL9p1qa/

在小提琴，你會發現，當你點擊一個按鈕，在消息控制檯始終顯示相同的值。

任何幫助將不勝感激。

來源

2016-07-02 AndroidNoobie

你確定你已經0,1,2如在情節的關鍵？ – brk

我認爲這是一個關閉問題。例如，每次迭代都會覆蓋url，因此所有按鈕都將加載audio3.mp3。檢查這個答案的相關部分，你會發現一些指導你的問題。 –

請試試這個：

episodes = {0: {title: 'Audio 1', url: 'audio1.mp3'}, 1: {title: 'Audio 2', url: 'audio2.mp3'}, 2: {title: 'Audio 3', url: 'audio3.mp3'}}; 

for (var i = 0; i < Object.keys(episodes).length; i++) { 
     var title = episodes[i].title; 
    var url = episodes[i].url; 
    var button = document.createElement('button'); 
    button.innerHTML = title; 
    button.audioUrl = url; 
    button.addEventListener("click", function(e) { 
     console.log(e.target.audioUrl); 
     $('#player').attr('src', e.target.audioUrl)[0]; 
    }); 
    document.body.appendChild(button); 
}

您必須將URL附加到元素，因爲變量url將保留最後的值是audio.mp3。

演示：https://jsfiddle.net/y0mkw5gr/

來源

2016-07-02 06:50:41

工作就像一個魅力和解釋真的有幫助！非常感謝！ – AndroidNoobie

用JavaScript編程改變音頻源

回答

相關問題