HTML5 audio with jquery mobile

Question

I am using Html5 audio element inside an application that is using jQuery Mobile. I have a Select element which the user uses to select the audio, and I have other input fields inside fieldset . When the user chose an option from the select, I grab that url and set the src attribute of the audio element.

    <!-- html ..... -->
    <select id="selectAudio">
    <option value="audio1.mp3"> </option>
    .....
    </select>
    <audio controls id="audioPlayer"  > <source id="audioPlayerSrc"  type="audio/mpeg" > </source></audio>

<div data-role="fieldcontain"><fieldset data-role="control-group">
    <input>....
    </fieldset>
</div>

And the javascript:

$("#selectAudio").live('change', function(val) {
        try{
            var selectedAudioFile = ($(this).val());
            var urlFile = '/myserverpath/' + selectedAudioFile;
            $('#audioPlayerSrc').attr('src', urlFile);
        }
        catch(err) {
            console.log('error in the audio: ', err);
        }
    });

The code running good, but the problem after the audio is refreshed, the fieldset is disabled and all input inside have disable="disabled" .

Answer 1

You can't change the audio's src attribute, that does not work, you need to empty and generate a new audio with the new src. Try this:

$("#selectAudio").live('change', function(val) {
    try{
        var selectedAudioFile = ($(this).val());
        var urlFile = '/myserverpath/' + selectedAudioFile;
        $("#audioPlayer").empty();
        var audio = document.getElementById('audioPlayer');
        var source = document.createElement('source');
        source.setAttribute('src', urlFile);
        audio.appendChild(source);
        audio.load();
    }catch(err) {
        console.log('error in the audio: ', err);
    }
});