Различное поведение API WebAudio в Google Chrome - PullRequest
Новая
       68

Различное поведение API WebAudio в Google Chrome

0 голосов
/ 02 июня 2018

Я делаю звуковой проигрыватель с визуализатором спектра.На Firefox работает очень хорошо, но в Google Chrome у меня проблемы.Я пришел с этим вопросом, который я сделал на днях Мой предыдущий вопрос

В Firefox я могу идти вперед или идти по предыдущему списку треков все время, когда захочу без проблем, но в GoogleChrome Я получаю эту ошибку, когда нажимаю «следующий / предыдущий» 

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, я могу сделать «если» с этим кодом.

С уважением.

1 Ответ

0 голосов
/ 04 июня 2018

Это ошибка в Chrome;Вы не можете прикрепить HTMLMediaElement к другому MediaElementAudioSourceNode.Но поскольку вы закрываете контекст и создаете новый, это еще одна ошибка в Chrome.

...