HTML5 jQuery change audio source dynamically

Question

I have an audio element with a default source. I want to be able to dynamically change the audio source using jQuery. My code below changes the source but always plays the default audio. Any help would be much appreciated. Thanks.

<audio id="audio_player">
    <source id="audio_player_ogv" src="test.ogv" type="audio/ogg" />
    <source id="audio_player_mp3" src="test.mp3" type="audio/mpeg" />
</audio>
<a class="change_audio" rel="new_test" href="javascript:;">Change Audio</a>

$('.change_audio').click(function() {
    var new_audio = $(this).attr('rel');
    $('#audio_player_ogv').attr('src',new_audio+'.ogv').detach().appendTo($('#audio_player'));
    $('#audio_player_mp3').attr('src',new_audio+'.mp3').detach().appendTo($('#audio_player'));
    var aud = $('#audio_player').get(0);
    aud.play();
});

Chris - Haddox Technologies · Accepted Answer · 2012-08-16 20:31:22Z

5

I would do:

<div id="divAudio_Player">
    <audio id="audio_player">
        <source id="audio_player_ogv" src="test.ogv" type="audio/ogg" />
        <source id="audio_player_mp3" src="test.mp3" type="audio/mpeg" />
    </audio>
</div>
<a class="change_audio" rel="new_test" href="javascript:;">Change Audio</a>

$('.change_audio').click(function() {
    var new_audio = $(this).attr('rel');

    var source = '<audio id="audio_player">';
    source +=  '<source id="audio_player_ogv" src="' + new_audio + '.ogv"  type="audio/ogg" />';
    source +=  '<source id="audio_player_ogv" src="' + new_audio + '.mp3"  type="audio/mpeg" />';
    source +=  '</audio>';

    $('#divAudio_Player').html(source);

    var aud = $('#audio_player').get(0);
    aud.play();
});

answered Aug 16, 2012 at 20:31

Chris - Haddox Technologies

1,9041 gold badge18 silver badges33 bronze badges

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

Comments

Moe Sweet · Accepted Answer · 2011-11-15 08:51:26Z

4

Instead of using <source> tag, assign source to src attribute of <audio> tag. It works. In return, you have to manually check browser type to choose between audio formats to load.

answered Nov 15, 2011 at 8:51

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

1 Comment

cssyphus Over a year ago

This answer works poifectly - and is the answer that best conforms to Occam's Razor.

Collectives™ on Stack Overflow

HTML5 jQuery change audio source dynamically

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related