audio-ios.js

/**
 * Try to fix iOS lock on audio.
 *
 * By default, audio on iOS is locked until a sound is played within a user interaction,
 * and then it plays normally the rest of the page session.
 */

// Inspired from https://github.com/goldfire/howler.js/blob/2.0/src/howler.core.js#L212

export default class IosUnlock {
  constructor(ctx, clb) {
    this.ctx = ctx
    this.unlocked = false
    this.unlockCallback = clb

    this.unlock = this.unlock.bind(this)

    document.addEventListener('touchend', this.unlock, true)
    document.addEventListener('mousedown', this.unlock, true)
    document.addEventListener('click', this.unlock, true)
  }

  unlock() {
    if (this.unlocked) {
      if (this.ctx.state === 'suspended' || this.ctx.state === 'interrupted') {
        this.ctx.resume()
      }

      return false
    }

    if (typeof this.ctx.resume === 'function') {
      return this.ctx.resume().then(this.startFakeBuffer.bind(this))
    }

    return this.startFakeBuffer()
  }

  startFakeBuffer() {
    this.buffer = this.ctx.createBuffer(1, 1, 22050)
    this.source = this.ctx.createBufferSource()

    this.source.buffer = this.buffer
    this.source.connect(this.ctx.destination)
    this.source.start(0)
    this.source.onended = this.onSourceEnd.bind(this)
  }

  onSourceEnd() {
    this.source.disconnect()
    this.unlocked = true

    document.removeEventListener('touchend', this.unlock, true)
    document.removeEventListener('mousedown', this.unlock, true)

    // console.log('SOUND UNLOCKED')
    this.unlockCallback()
  }
}