如何在多個重疊實例中製作聲音文件播放？

我試圖讓聲音文件播放速度更快，以跟上以下代碼中的文字顯示。聲音的作品（無論如何，在Firefox中），但它似乎只玩一次文件的一個實例。如何在多個重疊實例中製作聲音文件播放？

我想讓每個字母都會彈出到屏幕上並伴有爆音。現在，彈出的聲音是隨機的，並沒有計時玩每個字母。

我想知道是否需要聲音對象的多個實例，以及如何做到這一點。

我已經儘可能縮短了聲音文件，並且文件的長度比我使用的setTimeout間隔短。它只是不會重疊同一個聲音文件的多個副本，因爲我不確定的一些很好的理由。

這裏是整個代碼：

（我想JSFiddle it，但不能得到那個工作（我會保存問題的較後日期））

<html> 
<head> 
<style> 
#display  { 
       color: white; 
       font-size: 150%; 
       padding: 2em 5em; 
       min-height: 600px; 
       max-width: 600px; 
       margin-left: auto; 
       margin-right: auto; 
       } 

body   { 
       background-color: black; 
       padding: 0; 
       margin:0; 
       } 
</style> 

<script> 
    var text = "Test String... 1, 2, 3; Everything seems to be working, but the sound is lagging."; 
    var charDelay = 40;  // Sets the delay time for the character loop 

    function loadText() { 
     var i = 0; // Character counter 
     var myPud = new Audio("http://southernsolutions.us/audio/pud03.ogg"); 
     var displayBox = document.getElementById("display"); 
     displayBox.innerHTML = "<p>"; 
     textLoop(); 

     function textLoop() { 
      if (i == text.length){     // This condition terminates the loop 
       displayBox.innerHTML += "</p>"; 
       return; 

      } else if (i < text.length) {  // This condition appends the next character 
       displayBox.innerHTML += text[i]; 
       i++; 
       myPud.play(); 
       setTimeout(function(){return textLoop()}, charDelay); 
      } 
     } 
    } 

    window.onload = function(){loadText()}; 
</script> 

</head> 
<body> 
<div id="display"></div> 
</body> 
</html>

來源

2014-07-12 Cyclopeus

它需要一個非常短的音頻文件播放每秒25次。即使是正弦波週期，在這一點上也會聽起來像是一個恆定的25hz低音;不是你最想要的東西。一邊：不要使用額外的事件包裝：函數是函數，所以你可以setTimeout（textLoop，charDelay），並設置window.onload = loadText; （不是問題，但良好的做法） – dandavis

音頻文件的長度爲10毫秒。 – Cyclopeus

好吧，我明白你在說什麼，從'loadText（）'中取出'textLoop（）'，並且只傳遞變量作爲參數。我可以做到這一點。 – Cyclopeus

我d建議你讓聲音循環更長一些，比如1秒。然後，控制通過事件監聽器播放的聲音，以便一旦文本結束，就停止播放聲音。

試着按照現在這樣做的方式來做，它可以加快聲音在音頻文件中的播放速度。這應該會有更好的結果。那，或者放慢時間。

下面是我測試過的一些代碼，它可以讓你通過事件監聽器來完成它。結果與您的結果類似，但如果您將音頻文件添加到1秒鐘，並將其更改爲在該處有24次點擊，則會得到您要查找的確切效果。

編輯：我也更新了下面的內容以考慮評論。

<script> 
    var text = "Test String... 1, 2, 3; Everything seems to be working, but the sound is lagging."; 
    var charDelay = 40;  // Sets the delay time for the character loop 

    function loadText() { 
     var i = 0; // Character counter 
     var myPud = new Audio("http://southernsolutions.us/audio/pud03.ogg"); 
     var displayBox = document.getElementById("display"); 

     // Toggle for whether to loop 
     var stillPlay = true; 
     displayBox.innerHTML = "<p>"; 

     // Listen for when it ends 
     myPud.addEventListener("ended", onAudioComplete); 
     // Begin playing 
     myPud.play(); 
     // Start the loop 
     textLoop(); 

     function textLoop() { 
      if (i == text.length){     // This condition terminates the loop 
       displayBox.innerHTML += "</p>"; 
       // If we're at the end, we want to stop playing 
       stillPlay = false; 
       // Rather than duplicate code, jump straight into the complete function 
       onAudioComplete(null); 
       return; 
      } else if (i < text.length) {  // This condition appends the next character 
       displayBox.innerHTML += text[i]; 
       i++; 
       // Direct reference to the function to avoid more anony. functions 
       setTimeout(textLoop, charDelay); 
      } 
     } 

     // On audio complete 
     function onAudioComplete(e){ 
      // Can we still play? If so, play 
      if(stillPlay){ 
       myPud.play(); 
      } else { 
       // Otherwise, remove the event listener, stop and null out. 
       myPud.removeEventListener("ended", onAudioComplete); 
       myPud.stop(); 
       myPud = null; 
      } 
     } 
    } 

    window.onload = loadText; 
</script>

來源

2014-07-12 19:25:42

這似乎工作得很好。我不得不使用'myPud.pause（）'而不是'.stop（）'，但這可能是一種很好的技術。順便說一句，你有沒有鏈接到任何有關'取消'對象的討論？這是我第一次聽說，我想讀一讀。 – Cyclopeus

沒有辦法，但通常的做法是在刪除任何事件偵聽器以清空對象以避免潛在的內存泄漏。請接受答案，如果它對你有好處:) –

感謝凱文，這是一個好主意。 – Cyclopeus

如何在多個重疊實例中製作聲音文件播放？

回答

相關問題