Trouble changing audio source programmatically in JavaScript

Question

I think I'm missing something silly. I'm creating a bunch of buttons with the title of an audio source. When a user clicks the button, the source should update in the audio player.

Unfortunately, the audio source always seems to be the last item. In other words, the buttons don't correspond to the correct source...they all just correspond to the same source.

Here is the code as I have it:

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

Or, as a fiddle: https://jsfiddle.net/jmg157/1cL9p1qa/

In the fiddle, you'll notice that when you click on a button, the message in the console always shows the same value.

Any help would be greatly appreciated.

I think this is a closure problem. For example url is overwritten with every iteration so all your buttons will load audio3.mp3. Check the related section of this answer and you will find some guidance to your problem. — The F
– The F, Commented Jul 2, 2016 at 6:47

Ismail RBOUH · Accepted Answer · 2016-07-02 06:50:41Z

1

Please try this:

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

You must attach the url to the element because the variable url will retain the last value which is audio.mp3.

Demo: https://jsfiddle.net/y0mkw5gr/

answered Jul 2, 2016 at 6:50

Ismail RBOUH

10.5k2 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JoshG Over a year ago

Worked like a charm and the explanation really helps! Thanks so much!

Collectives™ on Stack Overflow

Trouble changing audio source programmatically in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related