節拍器網絡應用程序的音頻標籤替代品

我是網絡開發新手，我一直在研究一個簡單的節拍器網絡應用程序。那就是：節拍器網絡應用程序的音頻標籤替代品

http://anyonecanplayguitar.org/beatkeeper/

JS：http://anyonecanplayguitar.org/beatkeeper/js/simplified.js

我有一個關於包括與網頁上的操作音頻只有有限的知識，創造了點擊我已經附上簡短的音頻剪輯到定時器按照設定的每分鐘節拍進行拍攝。在Chrome，Firefox和Opera中，此方法正常工作。在Safari中，音頻奇怪地起作用。它大聲地發射，然後以不一致的速度靜靜地發射。在IE中發現類似的行爲。我沒有成功讓任何音頻在iOS或Android上播放。所以，我的問題是：對於這個應用程序（重複簡單，短暫的點擊聲音作爲一個穩定的節拍器使用），我怎樣才能確保跨設備/瀏覽器的平滑音頻播放？或者，也許更好的是，在想要播放重複音頻時，使用音頻輸入標籤有哪些替代方法？我是一個新手，所以我的網絡音頻知識僅延伸到目前爲止。任何指導（代碼修復或實驗替代方法）將不勝感激。先謝謝你。

來源

2014-01-06 Hunter MacDermut

音頻標籤非常不穩定，如果您計劃讓您的應用程序適合移動設備，則可能會變得非常棘手。

（另外，在Chrome OSX測試，節拍並不總是以相同的間隔）

我強烈建議尋找到一個現有的庫（一個最近寫的，因爲網絡音頻的發展真快）

一個非常簡單的我知道的是Howler

它默認爲新的Web音頻API（mdn），並具有HTML5音頻標記回退。它還具有完善的精靈，所以你可以這樣做：

var sound = new Howl({ 
    urls: ['sounds.mp3', 'sounds.ogg'], 
    sprite: { 
    tic: [0, 2000], 
    toc: [3000, 700] 
    } 
}); 

var currNote = 1; 
var currSignature = 4; 
var timer = null; 
var tempo = 120; 

function click(){ 
    queue(tempo); 
    if(currNote === currSignature){ 
     sound.play('toc'); 
     currNote = 0; 
    } 
    else{ 
     sound.play('tic'); 
    } 
    currNote++; 
} 

function start(){ 
    clearTimeout(timer); 
    queue(tempo); 
} 

function stop(){ 
    clearTimeout(timer); 
} 

function queue(tempo){ 
    timer = setTimeout(click, Math.round(((60/tempo)*1000)*100000)/100000); 
}

在這個例子中，我做了一個第二類拍的打好每4次點擊（從一個單一的聲音文件都來了）。

另外：我喜歡避免間隔。我不僅發現超時更可靠，而且還提供更靈活的設計選項。

來源

2014-01-06 17:03:30

謝謝你的信息，先生。在我能夠把所有這些都包括在內之前，我還有一段時間了，但我還有一些新的東西可以使用！ –

很高興我能幫到你。如果我的回答爲你做了，你介意將它標記爲已接受嗎？如果沒有，我該如何做得更好？ –

我希望聽到一些更多的建議，雖然我做了一些玩Web Audio API並提出了這個：http://anyonecanplayguitar.org/colorkeyboard/現在，如果只有所有瀏覽器支持它，我會在商業。再次感謝你的幫助！ –

節拍器網絡應用程序的音頻標籤替代品

回答

相關問題