javascript - Web Audio API 无法在 iOS 13.3 版上播放。适用于旧版本的 iOS
问题描述
我有一个使用网络音频 API 制作的音频可视化器。它可以在 PC 上运行,并且在我更新到 13.3 之前它确实可以在 iOS 上运行。
我不知道是什么导致它不起作用。我所知道的是,它只发生在较新版本的 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();
}
);
在 PC 上它工作正常。在我的 iPhone 上,它不播放音频。我可以看到条形图在 iOS 上呈现,但它们没有移动,因为没有输出音频。
解决方案
不幸的是,iOS 中目前存在与 MediaStreamAudioSourceNode 相关的错误。将 MediaElement 连接到 AudioContext 后,它会导致它停止。
推荐阅读
- python - 将排序表从熊猫数据框发送到前端?
- html - Jekyll:插入前面的内容后找不到页面
- testrigor - 我怎样才能让 testRigor 以正确的方式找到这个输入?
- cakephp - CakePHP Bake :: 在 bake 命令上创建元素文件
- r - geom_density 返回图而不考虑实际值
- reactjs - 如何在 Typescript 中输入匹配项?
- spring-integration - 回复后可以收到原始消息吗
- r - 一个下拉菜单的 R 闪亮 updateSelectInput 选项以及另一个下拉菜单的选择(即一个是另一个的子类别)
- r - R数据帧转置特征
- reactjs - Axios 从另一个表调用映射数据 - ReactJs