iOS Safari上的webkitAudioContext createMediaElementSource不起作用 [英] webkitAudioContext createMediaElementSource on iOS Safari not working

问题描述

我想在iPhone上进行现场声音分析.为此，我用 webkitAudioContext分析器.

I want to do a live sound analysis on the iPhone. Therefor I use the webkitAudioContext Analyser.

var ctx = new (window.AudioContext || window.webkitAudioContext);
var audioGoodmorning = new Audio('assets/sounds/greeting.m4a');
var audioSrc = ctx.createMediaElementSource(audioGoodmorning);
var analyser = ctx.createAnalyser();

analyser.fftSize = 32;
audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.fftSize);

analyser.getByteFrequencyData(frequencyData);

这在Mac上的Chrome中效果很好.当将网站添加到主屏幕时，它也可以在Safari上使用

This works well in Chrome on Mac. It also works on Safari, when adding the Website to the homescreen, with

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="CHAR">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

在未将网站添加到主屏幕的情况下，它无法在Safari上运行. 当使用内置有iOS wkwebview的网站时，该功能不起作用.那就是我要达到的目标. 当不工作时，frequencyData数组将为零.

It doesn't work on Safari without adding the Site to the homescreen. It doesn't work when using the Site embedded with iOS wkwebview. That is what I want to achieve. When not working, the frequencyData Array is full of zeroes.

有人遇到过此类问题吗?

Anyone having experienced this kinda issue?

预先感谢

推荐答案

检查此小提琴:

https://jsfiddle.net/4b2dvhqy/1/

var audio = new Audio();
audio.loop = true;
audio.autoplay = true;
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);

audio.addEventListener('canplay', function() {
  var audioSourceNode = audioContext.createMediaElementSource(audio);

  audioSourceNode.connect(analyser);
  analyser.connect(audioContext.destination);
});

在Safari上运行良好，因为音频内容是在用户点击事件下处理的.

It's working fine on Safari because the Audio stuff is handled under a user click event.

没有用户点击事件"，仅在Chrome或Safari"localhost"上运行良好.

Without the "user click event", it's working fine on Chrome or Safari "localhost" only.

另外，另一个Fiddle也可以很好地处理HTML标签音频:

Also, this other Fiddle is working fine with HTML tag audio:

https://jsfiddle.net/cbua1pkn/1/

这里的窍门是当用户单击播放按钮时初始化audioContext！ (因此您处于用户事件上下文中).

The trick here is to initialize the audioContext when user click on play button! (so you are under a user event context).

这篇关于iOS Safari上的webkitAudioContext createMediaElementSource不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！