Javascript Web Audio API AnalyserNode不起作用 [英] Javascript Web Audio API AnalyserNode Not Working
问题描述
代码应该流式传输任何网址并提供音频的可视化。不幸的是，可视化工具无法正常工作。可视化依赖于来自AnalyzerNode的数据，该数据始终返回空数据。为什么此代码中的AnalyserNode不起作用？在I .connect（）之后，源节点上的numberOfOutputs会增加，但AnalyserNode上的numberOfInputs不会更改。
The code is supposed to stream any url and provide a visualization of the audio. Unfortunately, the visualizer is not working. The visualization relies on the data from the AnalyzerNode, which is always returning empty data. Why doesn't the AnalyserNode in this code work? The numberOfOutputs on the source node increases after I .connect() them, but the numberOfInputs on the AnalyserNode does not change.
<html>
<head>
<script>
var context;
var source;
var analyser;
var canvas;
var canvasContext;
window.addEventListener('load', init, false);
function init() {
try {
// Fix up for prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
context = new AudioContext();
analyser = context.createAnalyser();
canvas = document.getElementById("analyser");
canvasContext = canvas.getContext('2d');
}
catch(e) {
alert(e);
alert('Web Audio API is not supported in this browser');
}
}
function streamSound(url) {
var audio = new Audio();
audio.src = url;
audio.controls = true;
audio.autoplay = true;
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(audio);
render();
}
function render(){
window.requestAnimationFrame(render);
//Get the Sound data
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
//we Clear the Canvas
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
//draw visualization
for(var i=0;i<analyser.frequencyBinCount;i++){
canvasContext.fillRect(i*2,canvas.height,1,-freqByteData[i]);
//Data seems to always be zero
if(freqByteData[i] != 0) {
alert(freqByteData[i]);
}
}
}
</script>
</head>
<body>
<button onclick="streamSound(document.getElementById('url').value)"> Stream sound</button>
<input id="url" size='77' value="Enter a URL to Stream">
<br />
<canvas id="analyser" width="600" height="200"></canvas>
</body>
</html>
推荐答案
您应该为音频的<$设置一个事件监听器c $ c> canplay 事件，只设置 MediaElementSource 并在事件触发后连接它。
You should setup an event listener for the audio's canplay event and only setup the MediaElementSource and connect it after that event fires.
它还将在Safari中不起作用由于其实施中的错误。 AFAIK Chrome是唯一能够正确支持Web Audio API的浏览器。
It also won't work in Safari due to a bug in their implementation. AFAIK Chrome is the only browser that properly supports the Web Audio API.
这篇关于Javascript Web Audio API AnalyserNode不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
