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

i'm trying populate html5 player in modal via jquery. goal play 1 of 2 mp3s based on whether invited website, or registered on own. have hidden field stores src path , want jquery function load audio file based on src. on page load, audio file isn't loading player. not sure i'm missing, 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 not support audio element.</p>    </audio> </div> 

jquery in header

$(function () {     var audplayer = $('#modalplayer');     audplayer.src = $('#<%= hidmodalmsg.clientid%>').val(); }); 

as audio source different file different browsers, changing audio src directly not work. has changed based on browser.

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

 var src = ".." // assuming 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);