HTML5 audio avec jquery mobile

Question

J'utilise l'élément audio Html5 dans une application qui utilise jQuery Mobile. J'ai un élément Select que l'utilisateur utilise pour sélectionner l'audio, et j'ai d'autres champs d'entrée à l'intérieur fieldset. Lorsque l'utilisateur a choisi une option dans la sélection, j'attrape cette URL et définissez l'attribut src de l'élément audio.

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

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

Le code en cours d'exécution bien, mais le problème après l'audio est rafraîchi, le fieldset est désactivé et toutes les entrées ont à l'intérieur disable="disabled".

Answer 1

Vous ne pouvez pas modifier l'attribut src de l'audio, cela ne fonctionne pas, vous devez vider et générer un nouvel audio avec le nouveau src. Essayez ceci:

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