[英]Different behaviour of WebAudio API on Google Chrome
我正在用频谱可视化器做一个声音播放器。 在Firefox上运行良好,但在Google Chrome中出现问题。 我是前几天提出的这个问题
在Firefox上,我可以一直前进,也可以在曲目列表上一直前进,而不会出现问题,但是在Google Chrome中,当我按“下一个/上一个”时会出现此错误
Failed to execute 'createMediaElementSource' on 'BaseAudioContext':
HTMLMediaElement already connected previously to a different MediaElementSourceNode.
我不知道为什么Google Chrome浏览器会抱怨,而Firefox不会。 可视化工具的代码为:
function visualizer(audio) {
closeAudioContext = true;
let src = context.createMediaElementSource(audio); // Here fails on Google Chrome
let analyser = context.createAnalyser();
let canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext("2d");
src.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 2048;
let bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength);
let WIDTH = ctx.canvas.width;
let HEIGHT = ctx.canvas.height;
let barWidth = (WIDTH / bufferLength) * 1.5;
let barHeight;
let x = 0;
let color = randomColor();
function renderFrame() {
requestAnimationFrame(renderFrame);
x = 0;
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
ctx.fillStyle = color;
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
renderFrame();
}
在按下“下一个/上一个”按钮后,我立即执行以下操作:
if (closeAudioContext && context !== undefined) {
context.close();
}
context = new AudioContext();
接着:
visualizer(audio);
musicPlay();
所以我的问题是,为什么在Firefox中音频播放器可以正常运行,但在Google Chrome浏览器中崩溃?
我正在使用Bowser来检查用户使用的浏览器,因为作为Chrome的新策略,如果激活了自动播放功能,则该功能会将所有声音静音(在这种情况下,我将autoPlay设置为false,并且如果用户按下播放声音,则不会静音) )。 因此,如果我必须为Google Chrome输入其他代码,则可以使用该代码输入“ if”。
问候。
这是Chrome中的错误; 您不能将HTMLMediaElement
附加到另一个MediaElementAudioSourceNode
。 但是,由于您关闭了上下文并创建了一个新的上下文,因此这是Chrome中另一个不同的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.