How to auto-play audio in Safari with JavaScript

document.body.addEventListener('touchstart', function() { if(audiosWeWantToUnlock) {  for(let audio of audiosWeWantToUnlock) {
audio.play()
audio.pause()
audio.currentTime = 0
} audiosWeWantToUnlock = null}}, false)//where earlier you did:
var audiosWeWantToUnlock = []
audiosWeWantToUnlock.push(new Audio('mySoundEffect.wav'))
audiosWeWantToUnlock.push(new Audio('myOtherSoundEffect.wav'))
var nothing = new Audio('http://touchbasicapp.com/nothing.wav')window.onload = function() {nothing.play().then(function() {
alert('Audio started unlocked!')
}).catch(function(){
alert('Audio started locked')
})
}
// Small game audio library I made
var audioContext = new (window.AudioContext || window.webkitAudioContext)()
function loadSound(filename) {
var sound = {volume: 1, audioBuffer: null}

var ajax = new XMLHttpRequest()
ajax.open("GET", filename, true)
ajax.responseType = "arraybuffer"
ajax.onload = function()
{
audioContext.decodeAudioData
(
ajax.response,
function(buffer) {
sound.audioBuffer = buffer
},
function(error) {
debugger
}
)
}

ajax.onerror = function() {
debugger
}

ajax.send()

return sound
}
function playSound(sound) {
if(!sound.audioBuffer)
return false

var source = audioContext.createBufferSource()
if(!source)
return false

source.buffer = sound.audioBuffer
if(!source.start)
source.start = source.noteOn

if(!source.start)
return false

var gainNode = audioContext.createGain()
gainNode.gain.value = sound.volume
source.connect(gainNode)
gainNode.connect(audioContext.destination)

source.start(0)

sound.gainNode = gainNode
return true
}
function stopSound(sound) {
if(sound.gainNode)
sound.gainNode.gain.value = 0
}
function setSoundVolume(sound, volume) {
sound.volume = volume

if(sound.gainNode)
sound.gainNode.gain.value = volume
}
// How to use:
var mySound = loadSound("myFile.wav")
// Then later after audio is unlocked and the sound is loaded:
playSound(mySound)
// How to unlock all sounds:
var emptySound = loadSound("http://touchbasicapp.com/nothing.wav")
document.body.addEventListener('touchstart', function(){playSound(emptySound)}, false)

--

--

--

Game developer of Tower Swap. “The best hit in recent TDs”

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Make Parallel API calls in VueJS Applications

Using React Hooks to Wrap Connectors to Live Data Sources

About dualboot Arch + Win

Contract API testing with Postman, Node.js, Express, Newman

August 2021

Using network interceptors for error handling in JavaScript

How to Decode medium-editor Base64 Images and Upload Them to a S3 Bucket

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Curtis Robinson

Curtis Robinson

Game developer of Tower Swap. “The best hit in recent TDs”

More from Medium

jQuery vs Vanilla JS

Top 5 Javascript Frameworks 2022 By Popularity

InternTheory Project

Selecting the Right JavaScript Structure amongst AngularJS, ReactJS, and VueJs