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);
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">
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?
Thanks in advance
Check this fiddle:
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);
});
It's working fine on Safari because the Audio stuff is handled under a user click event.
Without the "user click event", it's working fine on Chrome or Safari "localhost" only.
Also, this other Fiddle is working fine with HTML tag audio:
https://jsfiddle.net/cbua1pkn/1/
The trick here is to initialize the audioContext when user click on play button! (so you are under a user event context).
Just in case this hasn't been solved yet, according to https://caniuse.com/#search=webaudio Safari still doesn't support createMediaElementSource, so I think you're out of luck here. Safari's support for the WebAudio API is not great, unfortunately.
