On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap, before any sound can be played on a webpage.
This method fixes the issue without you even having to think about it, you just pass your AudioContext
instance to it and you're good to go!
You can read more about the issue and how this method handles it in this article.
Try it out here.
npm install web-audio-touch-unlock --save
var webAudioTouchUnlock = require('web-audio-touch-unlock');
var context = new (window.AudioContext || window.webkitAudioContext)();
webAudioTouchUnlock(context)
.then(function (unlocked) {
if(unlocked) {
// AudioContext was unlocked from an explicit user action, sound should start playing now
} else {
// There was no need for unlocking, devices other than iOS
}
}, function(reason) {
console.error(reason);
});
// Do all your sound related stuff here
// as you normally would like if the sound
// was never locked
// ..
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start();
// ...
import webAudioTouchUnlock from 'web-audio-touch-unlock';
let context = new (window.AudioContext || window.webkitAudioContext)();
webAudioTouchUnlock(context)
.then((unlocked: boolean) => {
if(unlocked) {
// AudioContext was unlocked from an explicit user action, sound should start playing now
} else {
// There was no need for unlocking, devices other than iOS
}
},(reason: any) => {
console.error(reason);
});
// Do all your sound related stuff here
// as you normally would like if the sound
// was never locked
// ...
let source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start();
// ...
The MIT License (MIT), Copyright 2017 Pavle Goloskokovic