L'accélération html5 n'est pas déclenchée par l'audio sur les téléphones

Question

Je veux déclencher un fichier audio lorsque je secoue mon téléphone. Je peux obtenir l'audio pour jouer avec la pression de bouton. Je peux aussi le faire jouer en secouant, mais seulement après un premier appui sur un bouton. Je ne veux pas avoir à appuyer sur un bouton d'abord pour l'audio à jouer sur le tremblement ...

javascript:

 var audio = new Audio('electornicnoise.mp3'); 

     $(document).ready(function() { 

      function onShake() { 
       audio.play(); 
      } 

      $.shake({ 
       callback: function() { 
        onShake(); 
       } 
      }); 

     }); 

html:

<button onclick="audio.play();">audio</button> 

Toute aide serait très bien apprécié.

Answer 1

J'ai réussi à faire cela à la fin en ajustant le volume. Ainsi, l'utilisateur doit toujours cliquer sur un bouton, mais le son que le bouton clique joue est au volume 0, tandis que lorsque l'audio est joué par tremblement, le volume est à 0,5. Voici le code ...

javascript:

 var audio = new Audio('electornicnoise.mp3'); 

     audio.volume = 0; 

     function gotIt(){ 
      audio.play(); 
      $('#copyContainer').hide(); 
      $("img.bg").effect("shake", {times:2}, 300); 
     }8  

     $(document).ready(function() { 

      function onShake() { 
       audio.play(); 
       audio.volume = 0.5; 
       $("img.bg").effect("shake", {times:20}, 3000); 
      } 


      $.shake({ 
       debug: "#debugdiv",    // debug div id 
       supported: "#notsupporteddiv", // not supported message div 
       violence: 3.0,     // single shake sensitivity 
       hf: 0.2,      // high-pass filter constant 
       shakethreshold: 10,    // number of single shakes required to fire a shake event 
       debounce: 1000,     // delay between shake events (in ms) 
       callback: function() { 
        onShake(); 
       } 
      }); 

     }); 

html:

 <div id="copyContainer"> 
      <p>Shake the present to hear what's inside</p> 
      <button id="gotIt" onclick="gotIt();">Ok got it!</button> 

      <div id="notsupporteddiv"> 
       <p>Your device is not supported.</p> 
      </div> 
     </div>