audio-player-state-machine.js

function makeAudioPlayer(audio) {
  audio.oncanplay = () => sm.trigger("onCanPlay")
  audio.onerror = () => sm.trigger("onError", new Error(audio.error.message || audio.error.code))
  audio.onended = () => sm.trigger("onEnd")

  const sm = new StateMachine({
    IDLE: {
      load(url) {
        audio.src = url
        return "LOADING_PAUSED"
      },
      pause() {
      },
    },
    LOADING_PAUSED: {
      onCanPlay() {
        return "PAUSED"
      },
      onError(err) {
        return "IDLE"
      },
      load(url) {
        audio.src = url
      },
      play() {
        return "LOADING_PLAY"
      },
      pause() {
      },
    },
    LOADING_PLAY: {
      onCanPlay() {
        audio.play()
          .catch(err => sm.trigger("onError", err instanceof DOMException ? new Error(err.name || err.message) : err))
        return "PLAYING"
      },
      onError(err) {
        return "IDLE"
      },
      load(url) {
        audio.src = url
      },
      play() {
      },
      pause() {
        return "LOADING_PAUSED"
      },
    },
    PAUSED: {
      load(url) {
        audio.src = url
        return "LOADING_PAUSED"
      },
      play() {
        audio.play()
          .catch(err => sm.trigger("onError", err instanceof DOMException ? new Error(err.name || err.message) : err))
        return "PLAYING"
      },
      pause() {
      },
    },
    PLAYING: {
      onEnd() {
        return "PAUSED"
      },
      onError(err) {
        return "IDLE"
      },
      load(url) {
        audio.src = url
        return "LOADING_PLAY"
      },
      play() {
      },
      pause() {
        audio.pause()
        return "PAUSED"
      },
    },
  })

  return {
    load(url) {
      sm.trigger("load", url)
    },
    play() {
      sm.trigger("play")
    },
    loadAndPlay(url) {
      sm.trigger("load", url)
      sm.trigger("play")
    },
    pause() {
      sm.trigger("pause")
    },
    resume() {
      sm.trigger("play")
    },
  }
}