Using jquery to dynamically choose an audio file to load into HTML5 player

Question

I'm trying to populate a HTML5 player in a modal via jquery. The goal is to play one of two mp3s based on whether you were invited to the website, or registered on your own. I have a hidden field that stores the src path and I want my jquery function to load the audio file based on that src. On page load, the audio file isn't loading into the player. Not sure what I'm missing, any help would be appreciated.

HTML

<asp:HiddenField ID="hidModalMsg" runat="server" />

/*Unrelated code*/

<div class="audio" runat="server">
   <audio id="modalPlayer" onload="('#modalPlayer').src='';" controls="controls">
        <p>Your browser does not support the audio element.</p>
   </audio>
</div>

Jquery in header

$(function () {
    var audPlayer = $('#modalPlayer');
    audPlayer.src = $('#<%= hidModalMsg.ClientID%>').val();
});

Exception Exception · Accepted Answer · 2013-08-19T18:25:24

As audio source is different file for different browsers, changing audio src directly does not work. It has to be changed based on browser.

So set the src variable with appropriate value based on browser, see http://www.w3schools.com/html/html5_audio.asp for file support.

 var src = ".." // assuming your src has audio file value
 var audio = document.getElementById('audio');
 audio.setAttribute("src", src);
 audio.load();

With jQuery

 var src = $('#<%= hidModalMsg.ClientID%>').val();
 console.log(src);
 $('#audio_element').attr('src', src);

Using jquery to dynamically choose an audio file to load into HTML5 player

2 Answers