API Web Audio не воспроизводится на iOS версии 13.3. Работает на старых версиях iOS - PullRequest
Новая
       2

API Web Audio не воспроизводится на iOS версии 13.3. Работает на старых версиях iOS

0 голосов
/ 22 января 2020

У меня есть аудио-визуализатор, который я сделал с помощью веб-аудио API. Он работает на P C и работает на iOS до тех пор, пока я не обновлюсь до 13.3.

Я не знаю, что заставляет его не работать. Все, что я знаю, это то, что это происходит только в новых версиях iOS.

Вот мой jsfiddle. https://jsfiddle.net/r1dobj07/

document.getElementById("btn").addEventListener("click", function() {

var canvas = document.getElementById('canvas');
var audio = new Audio();
audio.loop = true;
audio.autoplay = false;
audio.crossOrigin = "anonymous";

audio.addEventListener('error', function(e) {
  console.log(e);
});
audio.src = "https://greggman.github.io/doodles/sounds/DOCTOR VOX - Level Up.mp3";
//audio.play();
audio.controls = true;

document.getElementById("wrapper").append(audio);

var player = document.getElementById('audio_player');
var context = new(window.AudioContext || window.webkitAudioContext)();
var src = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();
src.connect(analyser);
analyser.fftSize = 32;
analyser.connect(context.destination);

var ctx = canvas.getContext("2d");

var bufferLength = analyser.frequencyBinCount;


var dataArray = new Uint8Array(bufferLength);


var WIDTH = canvas.width;
var HEIGHT = canvas.height;

var barWidth = (WIDTH / bufferLength) * 0.5;
var barHeight;
var x = 0;


function renderFrame() {
  requestAnimationFrame(renderFrame);
  x = 0;
  analyser.getByteFrequencyData(dataArray);

  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.clearRect(0, 0, WIDTH, HEIGHT);

  for (var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];
    if (barHeight === 0) {
      barHeight = 20;
    }
    var barHeightScaled = barHeight / 250;
    var barHeightScaled2 = barHeightScaled * HEIGHT;
    var newHeight = HEIGHT - barHeightScaled2;
    var r = 111;
    var g = 121;
    var b = 180;

    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
      if (w < 2 * r) r = w / 2;
      if (h < 2 * r) r = h / 2;
      this.beginPath();
      this.moveTo(x + r, y);
      this.arcTo(x + w, y, x + w, y + h, r);
      this.arcTo(x + w, y + h, x, y + h, r);
      this.arcTo(x, y + h, x, y, r);
      this.arcTo(x, y, x + w, y, r);
      this.closePath();
      return this;
    }


    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.roundRect(x, newHeight / 2, barWidth, barHeightScaled2, 50).fill();

    x += barWidth + 4;
  }
}

renderFrame();

}

);

На P C работает нормально. На моем iPhone звук не воспроизводится. Я вижу, что полосы отображаются на iOS, но они не двигаются, так как звук не выводится.

1 Ответ

0 голосов
/ 25 января 2020

К сожалению, в iOS в настоящее время есть ошибка , связанная с MediaStreamAudioSourceNode . Это приводит к остановке MediaElement после подключения его к AudioContext.

...