我正在做一个带有频谱可视化器的声音播放器。在 Firefox 上工作得很好,但在 Google Chrome 上我遇到了问题。我来自前几天提出的这个问题My previous question
在 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 的新政策是,如果激活了自动播放,则将所有声音静音(在本例中,我将自动播放设置为 false,如果用户按下播放,则声音不会静音)。因此,如果我必须为 Google Chrome 编写不同的代码,我可以使用该代码创建一个“if”。
问候。
最佳答案
这是 Chrome 中的一个错误;您无法将 HTMLMediaElement
附加到另一个 MediaElementAudioSourceNode
。但由于您关闭了上下文并创建了一个新上下文,因此这是 Chrome 中的另一个不同的错误。
关于javascript - Google Chrome 上 WebAudio API 的不同行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50657659/