jQuery Mobile的HTML5音頻

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