Can't get WebAudio to play through iOS 8
I'm trying to get WebAudio to work in Safari on iOS8 (I got it successfully on Windows and Android devices).
As far as I understand, you cannot automatically play webaudio through Safari in iOS, but instead you have to trigger the first WebAudio call through a user action (like clicking a button). Then when this first user-controlled action is done, WebAudio will work ......... Obviously.
So, I have a button set (using JQM):
<a href="#" onclick="PlayDing('Silent');" data-icon="info" data-role="button" data-mini="false" data-theme="b" data-corners="false">Enable Audio</a><hr />
"PlayDing" is a function that looks like this:
function PlayDing(DingType) {
var sound = new Audio('../../UI/Audio/' + DingType + '.mp3').play();
}
The idea is that by clicking the "Enable Sound" button, this makes the user interaction play the mp3 file (which is only 1 second of silence) and then subsequent sound events will work.
Any ideas why this doesn't work on iOS8 / Safari?
EDIT:
If I change my JQM button to play the sound I want, it works great and my iPad plays ding.
EDIT 2:
This is not related to playing audio files from my iPad Music Library. It is about playing files / resources that are part of a website.
source to share
"As far as I understand, you cannot automatically play webaudio through Safari in iOS, but instead you have to trigger the first WebAudio call through a user action (like clicking a button). Then, as soon as that first user-controlled action, WebAudio will work." ........ Obviously. "
You are absolutely right about the game. To avoid playing unwanted sounds or unwanted downloads of sounds on users' devices, perhaps using monthly data - the beep should be triggered on the same stack the user clicks / presses.
There are a few things you have to deal with to ensure that all of your users can play sound reliably. It's one thing to download it before you can play it. For this we use a technique called preloading.
You should also take into account that not all users support the same audio format.
Your HTML and Javascript example could be as follows:
JavaScript:
function PlayDing(DingType) {
//Get a reference to the audio element
var sound = document.getElementById(DingType);
//Play it
sound.play();
}
HTML:
<body>
<!--Declare the sounds in as many formats as possible and let the user browser handling what sound to play & caching -->
<audio id="Silent" preload="auto">
<source src="'../../UI/Audio/silent.ogg" type="audio/ogg">
<source src="'../../UI/Audio/silent.wav" type="audio/wav">
<source src="'../../UI/Audio/silent.aac" type="audio/mpeg">
</audio>
<a href="#" onclick="PlayDing('Silent');" data-icon="info" data-role="button" data-mini="false" data-theme="b" data-corners="false">Enable Audio</a>
<hr />
</body>
source to share