帶有jQuery Mobile的HTML5音頻

Question

我在使用jQuery Mobile的應用程序中使用Html5音頻元素。 我有一個Select元素供用戶用來選擇音頻，並且在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);
    }
});