带有 jquery mobile 的 HTML5 音频答案

【问题标题】：HTML5 audio with jquery mobile带有 jquery mobile 的 HTML5 音频
【发布时间】：2017-02-23 17:47:57
【问题描述】：

我在使用 jQuery Mobile 的应用程序中使用 Html5 音频元素。我有一个 Select 元素，用户使用它来选择音频，并且在 fieldset 内还有其他输入字段。当用户从 select 中选择一个选项时，我会抓取该 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"。

【问题讨论】：

标签： jquery html jquery-mobile html5-audio

【解决方案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);
    }
});

【讨论】：