Skip to content

Instantly share code, notes, and snippets.

View pavle-goloskokovic's full-sized avatar

Pavle Goloskoković pavle-goloskokovic

50 followers · 3 following
View GitHub Profile
@pavle-goloskokovic
pavle-goloskokovic / web-audio-touch-unlock-usage.js
Created January 20, 2018 12:46
Now you can use this function anywhere in your code like this
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
@pavle-goloskokovic
pavle-goloskokovic / wrap-and-return-promise.js
Last active June 13, 2018 22:18
Wrap everything inside of a Promise and returning it from our function
function webAudioTouchUnlock (context)
{
return new Promise(function (resolve, reject)
{
if (context.state === 'suspended' && 'ontouchstart' in window)
{
var unlock = function()
{
context.resume().then(function()
{
@pavle-goloskokovic
pavle-goloskokovic / wrap-in-a-function.js
Last active February 13, 2018 12:52
Let’s wrap it all in a function
function webAudioTouchUnlock (context)
{
if (context.state === 'suspended' && 'ontouchstart' in window)
{
var unlock = function()
{
context.resume().then(function()
{
document.body.removeEventListener('touchstart', unlock);
document.body.removeEventListener('touchend', unlock);
@pavle-goloskokovic
pavle-goloskokovic / remove-touch-event-listeners-when-resume-promise-resolves.js
Created January 20, 2018 12:38
When resume method promise resolves we are certain that audio context has been unlocked and that we can remove touch event listeners
if (context.state === 'suspended' && 'ontouchstart' in window)
{
var unlock = function()
{
context.resume().then(function()
{
document.body.removeEventListener('touchstart', unlock);
document.body.removeEventListener('touchend', unlock);
});
};
@pavle-goloskokovic
pavle-goloskokovic / listen-for-touchend-event-as-well.js
Last active January 20, 2018 12:56
With some iOS versions trying to unlock Web Audio on 'touchstart' event doesn’t work
if (context.state === 'suspended' && 'ontouchstart' in window)
{
var unlock = function()
{
context.resume();
};
document.body.addEventListener('touchstart', unlock, false);
document.body.addEventListener('touchend', unlock, false);
}
@pavle-goloskokovic
pavle-goloskokovic / listen-for-touchstart-event.js
Created January 20, 2018 12:31
In order to try and unlock audio context as soon as possible we will run our code on the first 'touchstart' event that occurs anywhere on the page
if (context.state === 'suspended' && 'ontouchstart' in window)
{
var unlock = function()
{
context.resume();
};
document.body.addEventListener('touchstart', unlock, false);
}
@pavle-goloskokovic
pavle-goloskokovic / resume-audio-context.js
Created January 20, 2018 12:24
If the audio context is suspended we can call its resume() method to set it into running state
if (context.state === 'suspended' && 'ontouchstart' in window)
{
context.resume();
}
@pavle-goloskokovic
pavle-goloskokovic / check-for-touch-events.js
Created January 20, 2018 12:23
Check if touch events are available as well
if (context.state === 'suspended' && 'ontouchstart' in window)
{
// Unlock it
}
@pavle-goloskokovic
pavle-goloskokovic / check-audio-context-state-property.js
Created January 20, 2018 12:09
Then right after we create an audio context we should check its state property
if (context.state === 'suspended')
{
// Unlock it
}
@pavle-goloskokovic
pavle-goloskokovic / instantiate-audio-context.js
Created January 20, 2018 12:05
First we need to instantiate an audio context to be able to do any audio manipulation...
var AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();