HTML5 audio with jquery mobile

Question

我在使用jQuery Mobile的应用程序中使用HTML5音频元素。我有一个选择元素，用户使用该元素来选择音频，并且我在fieldset中有其他输入字段。当用户从选择中选择一个选项时，我抓住该URL并设置音频元素的src属性。

    <!-- 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>

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

代码运行良好，但是刷新音频后的问题，fieldset被禁用，所有输入都具有disable="disabled"。

Answer 1

您无法更改音频的src属性，该属性不起作用，您需要使用新的SRC来清空并生成新的音频。尝试以下操作：

$("#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);
    }
});