麻烦改变音频源编程在JavaScript

Trouble changing audio source programmatically in JavaScript

本文关键字：JavaScript 编程 改变 音频 麻烦      更新时间：2023-09-26

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

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

下面是我的代码:

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/

在这里，您会注意到，当您单击按钮时，控制台中的消息总是显示相同的值。

请试试:

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/

相关文章：