在 JavaScript 中以编程方式更改音频源时遇到问题

Question

我想我漏掉了一些愚蠢的东西。我正在创建一堆带有音频源标题的按钮。当用户单击该按钮时，源应在音频播放器中更新。

不幸的是，音频源似乎总是在最后一项。换句话说，这些按钮不对应正确的来源……它们都对应同一个来源。

这是我的代码：

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);
}

或者，作为 fiddle：https://jsfiddle.net/jmg157/1cL9p1qa/

在 fiddle 中，您会注意到单击按钮时，控制台中的消息始终显示相同的值。

如有任何帮助，我们将不胜感激。

Answer 1

请试试这个：

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/

在 JavaScript 中以编程方式更改音频源时遇到问题

Trouble changing audio source programmatically in JavaScript

html

javascript

html5-audio