Javascript函數延遲後自動播放隨機HTML音頻

我正在嘗試用一些jQuery來編寫一些JavaScript代碼，它將播放隨機聲音文件（從數組中選擇）通過設置隨機的時間間隔來播放聲音。到目前爲止，我已經獲得了隨機歌曲選擇器的工作。但是，playMusic函數中的遞歸似乎存在問題。只有兩首歌曲會連續播放，然後在歌曲之間停止播放。Javascript函數延遲後自動播放隨機HTML音頻

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript"> 
      var randInterval = 0; 
      var songList = ["song1","song2","song3","song4","song5"]; 
      var songHTML; 

      function getRandomSong(){ 
       var randSong = songList[Math.floor(Math.random()*songList.length)]; 
       songHTML = "<source src='music/" + randSong + ".mp3'>" + 
           "<source src='music/" + randSong + ".ogg'>"; 
       return songHTML; 
      } 

      function setRandomInterval(){ 
       randInterval = Math.floor((Math.random()*60)+60); 
       return randInterval; 
      } 

      function playMusic(){ 
       var delayTime = setRandomInterval(); 
       $(document).ready(function(){ 
        $('#myAudio').html(getRandomSong()); 
        $('#myAudio').prop("volume", 0.05); 
        $('#myAudio').get(0).play();    
       }); 
       $('#myAudio').on('ended', function(){ 
        $('#myAudio').delay(delayTime).queue(function(){ 
         return playMusic(); 
        }); 
       }); 
      } 
     </script> 
    </head> 
    <body onload="playMusic()"> 
     <div> 
      <audio controls id="myAudio" autoplay> 
      </audio> 
     </div> 
    </body> 
</html>

來源

2014-03-13 SolarisRa

['.delay（）']（https://api.jquery.com/delay/）以毫秒爲單位延遲。 – Musa

謝謝，這解決了延遲問題。但是，我仍然遇到函數遞歸的問題。我希望它能夠連續播放歌曲，延遲，播放歌曲，延遲等。 – SolarisRa

嘗試將事件綁定在playMusic函數之外 – Musa

我想通了，如何做到這一點。以下是可正常工作的代碼。我刪除了任何與JQuery相關的代碼。

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      var randInterval = 0; 
      var songList = ["song1","song2","song3","song4","song5"]; 
      var myAudio = new Audio("music/" + songList[Math.floor(Math.random()*songList.length)] + ".mp3"); 

      //Generates a random song, sets it attributes/properties, and 
      //appends a file extension that works with the browser. 
      function getRandomSong(){ 
       var randSong = songList[Math.floor(Math.random()*songList.length)] 
       if (myAudio.canPlayType('audio/mp3;')) { 
        myAudio.src="music/" + randSong + ".mp3"; 
       } else { 
        myAudio.src="music/" + randSong + ".ogg"; 
       } 
       myAudio.id="myAudio"; 
       myAudio.volume=0.15; 
       myAudio.load(); 
       myAudio.controls=false 
       myAudio.preload=false; 
      } 

      //Sets a random interval for the setTimeout Function with the 
      //'variation' parameter being a random amount of time in 
      //seconds, and the 'range' parameter being a set amount of time 
      //in seconds. 
      function getRandomInterval(variation, range){ 
       randInterval = Math.floor((Math.random()*1000*variation)+(1000*range)); 
       return randInterval; 
      } 

      //Gets a random song and plays that song. 
      function playMusic(){ 
       getRandomSong(); 
       myAudio.play(); 
      } 
     </script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      //Plays music on page load. 
      playMusic(); 

      //Event Listener that will start a new song after a pause 
      //of randomly determined length. 
      myAudio.addEventListener('ended', function(){setTimeout(function(){playMusic();}, getRandomInterval(2,2));}, false); 
     </script> 
    </body> 
</html>

來源

2014-03-19 19:00:18 SolarisRa

Javascript函數延遲後自動播放隨機HTML音頻

回答

相關問題