jquery mobileを使用したHTML5オーディオ

Question

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"を持っています。

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