2015-08-23 50 views
2

我有兩首歌曲,我都需要在EXACT同時播放(在AudioBuffer的索引下,我將其轉換爲秒數除以採樣率) ,問題是,執行song1.play();song2.play();需要200ms(使用console.time)執行,這會拋出計時 - 是否有緩衝區或一些JS魔法在同一時間播放它們?Javascript音頻(可能是網絡音頻)設置確切時間

+0

可能重複[HTML5/JavaScript的音頻同時播放多音軌(http://stackoverflow.com/問題/ 21016656/html5-javascript-audio-play-multiple-tracks-at-the-the-the-the-time) –

+0

嗯,我試過這個答案,但是當我執行'song1.play()'時,只有song1播放? – javatripping

+0

是的,使用WebAudio API,您可以使用[內部音頻時鐘](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/currentTime)。查看[MDN演示](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#Loading_your_tracks) – Kaiido

回答

0

我做了一個簡單的頁面並進行了測試。

<html> 
<head> 
<meta charset="utf-8" /> 
</head> 
<body> 

<audio id="player1" controls style="width: 400px;"> 
<source type="audio/mpeg" src="http://127.0.0.1:8080/1.mp3"></source> 
</audio> 

<audio id="player2" controls style="width: 400px;"> 
<source type="audio/mpeg" src="http://127.0.0.1:8080/1.mp3"></source> 
</audio> 

<script> 
    var plyr1 = document.getElementById('player1'); 
    var plyr2 = document.getElementById('player2'); 
</script> 
</body> 
</html> 

我把plyr1.play(); plyr2.play();在控制檯(火狐),然後回車。這些聲音之間沒有區別!我不知道你的情況有什麼問題,但你可以試一試plyr1.autoplay = true; plyr2.autoplay = true;,這不是一個函數,所以經驗表示應該花費更少的時間;)
aha,如果你使用的是new Audio()你應該注意到使用new關鍵字導致JavaScript變慢。避免它,並使用document.createElement('audio')來代替。

+0

如果你打電話'audio1.play(); audio2.play()''如果你使用'new Audio'或'document.createElement'就沒有關係。另外,你的假設對我來說聽起來不正確,當文件被緩衝時,autoplay會觸發'play'方法狀態'canplay'使得IMO js或html屬性不會改變任何東西。 – Kaiido

+0

@Kaiido我應該說[在時間問題上有所不同](http://www.w3schools.com/js/js_object_definition.asp)。假設你的第二個字是真實的(但我不認爲設置對象的屬性可以激發一個方法!可以嗎?它是否與getter或setters(訪問器)有關?是否有新的問題......),我沒有看到任何東西這些聲音之間的差異。我不知道他爲什麼會錯誤地播放聲音。 – TechJS

+0

我沒有看到任何關於時間的鏈接(你應該避免w3School)。但'new Audio()'創建者和'document.createElement'方法都是同步的,所以如果你調用兩個對象的'play'方法,在創建這些對象之後,創建它們的方式並不重要。現在,請注意,我使用術語「屬性」而不是屬性,原因是:HTML具有屬性,當由瀏覽器解析時,屬性會創建對象的屬性。在àutoplay'屬性的情況下,它只是一個布爾值,它在音頻的內部'canplay'事件中被檢查。 – Kaiido