無縫循環音頻 html5

Question

任何人都知道如何實現音頻標簽的無縫循環？ 我在想一些基於 javascript 的東西..

我有一個循環說 1 小節，我希望它循環並保持節奏。 所以我需要循環平滑/無間隙。 當我簡單地將“loop”設置為 true 時，它​​會滯后並且不會保持節奏。

Answer 1

雖然仍然不完美，但這對我有用：

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
    var buffer = .44
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0
        this.play()
    }
});

試驗緩沖區的大小以找到最適合您的

Answer 2

解決方案是有2個實例來控制播放。

像這樣的事情：

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

如果您使用的是 SoundManager2，請通過數據 URI 而不是 URL 請求來獲取音頻。

奇怪的是，我發現 SoundManager2 每次播放時都會從服務器請求文件。 即使它是從緩存加載，也會有延遲，直到收到音頻文件的未修改標頭。

Answer 3

是的，這真的很痛苦……顯然，設計出元素的人既不是音樂家也不是游戲開發者——呵呵。

無論如何，根據你在做什么，另一種可能的解決方法是創建一個 MP3/OGG​​/wav，它是你的循環的幾次重復。 這對於您想在停止播放之前只循環播放幾次聲音的地方非常有用。

這方面的一個例子可能是一名玩家在火箭飛船中推進。 我目前正在使用這種場景開發一款游戲，並創建了一個帶有多個推力音效循環的 MP3，總共播放了大約 6 秒。 為了最大限度地減少下載的大小，我將音頻編碼為 32kbps - 任何更低的聲音都會開始聽起來令人無法接受，因為推力聲音主要是白噪聲。

你可以猜到，我只是指望玩家連續推力 6 秒的可能性很小。 如果他們這樣做，他們會聽到差距，但我可以接受。 大多數情況下，他們不會推那么長時間，所以不會聽到故障。

我考慮過的另一個選擇是一對淡入淡出並且都帶有偏移量的樣本。

雖然這些適用於某些游戲場景，但它們幾乎肯定不適用於任何類型的音樂場景。 天啊。

Answer 4

不幸的是，這是 HTML5 元素的弱點之一。 無法保證音頻會在您想要或沒有延遲的情況下播放。

有兩個選項值得研究 - SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) 是一個很棒的庫，在這里可能會有所幫助，盡管在這種情況下它將使用 Flash 播放音頻。

另一種選擇是查看 Chrome 中的 Web Audio API 或 Firefox 中的 Audio Data API。 兩者都非常新，還沒有真正准備好迎接黃金時段，但允許您執行諸如預定音頻播放、循環播放等操作。 查看http://www.htmlfivewow.com/slide58了解更多信息！

Answer 5

我正在嘗試間隔執行此操作，試試這個https://github.com/Hivenfour/SeamlessLoop

使用 wav 文件為我工作，在 Chrome、Firefox 和 Opera 上測試過

Answer 6

我一直在尋找解決方案的幾個小時，因為這是我登陸的第一頁，我想與您分享一個指向 JS 庫的鏈接，該庫似乎可以完美地播放音軌循環而沒有任何間隙Gapless -5

Answer 7

我已經嘗試了上述方法但沒有成功，在我的用例中（使用 Firefox 43.0）似乎都可以點擊。 這部分是由於必須循環一個連續的音調，其中沒有方便的中斷或低點（我正在嘗試使用 22010 個樣本/秒的單聲道 .wav 文件創建一個正在旋轉的汽車引擎）。

但是，我能夠將我的 .wav 文件多次連接在一起以生成一個沒有點擊的長 .wav 文件（除了現在很少出現的最后仍然出現的文件），這是因為我原來的 .wav 文件是精心制作成循環。

我現在計划同時連續播放幾個這樣的長文件（每個汽車轉速級別一個）並使用 GainNode 混合這些信號（此處描述： http ://www.html5rocks.com/en/tutorials/網絡音頻/介紹/ ）。 這應該會產生一個無點擊的汽車引擎，聽起來比簡單地啟動和停止播放單個 .wav 文件要好得多。

Answer 8

使用 HTML5 音頻尚無法實現這一點，因為對於每個音頻項目，結束事件僅觸發一次。

Answer 9

我的方法令人生畏，但適用於環境背景音樂

假設我們的曲目有 5.3 秒

您有同一個文件的 2 個音軌。 什么時候即將結束（例如結束前 1 秒 - 4.3s-5.3s ）您將其淡出（在這一秒內按位置的百分比設置音量）。 同時，第二個音軌開始淡入（0s-1s）。 您可以通過大約 50 毫秒的間隔或其他方式進行操作，具體取決於您的音頻庫

播放結束后，您切換一個布爾變量來控制此淡入/淡出並反轉哪個軌道將在下一次運行中淡入以及哪個軌道將淡出