[英]Why aren't my javascript audio controls working with Web Audio API?
為什么我的JavaScript音頻控件不能與Web Audio API一起使用? 有人可以看到我在做什么錯嗎? 我用過:
$('.play').click(function() {
audioBufferSourceNode.play();
});
$('.pause').click(function() {
audioBufferSourceNode.pause();
});
$('.volumeMax').click(function() {
audioBufferSourceNode.volume=1;
});
$('.volumestop').click(function() {
audioBufferSourceNode.volume=0;
});
$('.playatTime').click(function() {
audioBufferSourceNode.currentTime= 35;
audioBufferSourceNode.play();
});
但由於某種原因,它無法正常工作。 這是我的index.php頁面。
<div id="wrapper">
<div id="fileWrapper" class="file_wrapper">
<div id="info">
HTML5 Audio API showcase | An Audio Viusalizer
</div>
<label for="uploadedFile">Drag&drop or select a file to play:</label>
<input type="file" id="uploadedFile"></input>
</div>
<div id="visualizer_wrapper">
<canvas id='canvas' width="800" height="350"></canvas>
</div>
</div>
<footer>
</footer>
<div class="audioPlayer">
<button type="button" class="play">play</button>
<button type="button" class="pause">pause</button>
<button type="button" class="playatTime">play at 35 seconds</button>
<button type="button" class="volumestop">Volume to 0</button>
<button type="button" class="volumeMax">Volume open</button>
這是我的控件位於javascript文件上的位置,該文件位於完整源代碼的第125行: https ://jsfiddle.net/4hty6kak/5/某些原因Visualizer無法在jsfiddle上運行,不知道為什么。 因此,我不確定人們將如何精確地測試此可視化器,還有其他好的選擇嗎?
_visualize: function(audioContext, buffer) {
var audioBufferSourceNode = audioContext.createBufferSource(),
analyser = audioContext.createAnalyser(),
that = this;
//connect the source to the analyser
audioBufferSourceNode.connect(analyser);
$('.play').click(function() {
audioBufferSourceNode.play();
});
$('.pause').click(function() {
audioBufferSourceNode.pause();
});
$('.volumeMax').click(function() {
audioBufferSourceNode.volume=1;
});
$('.volumestop').click(function() {
audioBufferSourceNode.volume=0;
});
$('.playatTime').click(function() {
audioBufferSourceNode.currentTime= 35;
audioBufferSourceNode.play();
});
//connect the analyser to the destination(the speaker), or we won't hear the sound
analyser.connect(audioContext.destination);
//then assign the buffer to the buffer source node
audioBufferSourceNode.buffer = buffer;
//play the source
if (!audioBufferSourceNode.start) {
audioBufferSourceNode.start = audioBufferSourceNode.noteOn //in old browsers use noteOn method
audioBufferSourceNode.stop = audioBufferSourceNode.noteOff //in old browsers use noteOn method
};
//stop the previous sound if any
if (this.animationId !== null) {
cancelAnimationFrame(this.animationId);
}
if (this.source !== null) {
this.source.stop(0);
}
audioBufferSourceNode.start(0);
this.status = 1;
this.source = audioBufferSourceNode;
audioBufferSourceNode.onended = function() {
that._audioEnd(that);
};
this._updateInfo('Playing ' + this.fileName, false);
this.info = 'Playing ' + this.fileName;
document.getElementById('fileWrapper').style.opacity = 0.2;
this._drawSpectrum(analyser);
},
完整代碼:
https://jsfiddle.net/4hty6kak/5/
你有什么解決方案?
問題是雙重的:
第一:在JSFiddle中,您必須確保包括正確的Framework(我使用jQuery v1.11),並確保如果腳本嘗試向onload添加任何內容,則將其包裝在頭部或主體中,而不是包裝在window.onload中。 JSFiddle選項中的事件(默認情況下,它會在加載時運行所有內容)。
第二:您的代碼中有一個錯字,您在其中定義事件時就忘記了拼寫所有引用的方式,就像在其余代碼中一樣。
$('.play').click(function(){audioBufferSourceNode.play()});
應該:
$('.play').click(function(){audioBufferSouceNode.play()});
注意源中缺少的R。 您已將其定義為audioBufferSouceNode。
我發現在事件中更改它更容易,因為您在其他地方使用了相同的拼寫錯誤。
我更新了您的JSFiddle以解決該問題: https ://jsfiddle.net/4hty6kak/10/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.