How to use howler - 10 common examples

startPlaying(props) {
        if (props.isPlaying && props.currentSong) {
            // If it should be playing any song
            const url = props.currentSong.get("url");
            const format = url.split(".").pop();
            const isPlayable = Howler.codecs(format);
            if (isPlayable) {
                // Build a new Howler object with current song to play
                this.howl = new Howl({
                    src: [url],
                    html5: true,  // Use HTML5 by default to allow streaming
                    mute: props.isMute,
                    volume: props.volume / 100,  // Set current volume
                    autoplay: false,  // No autoplay, we handle it manually
                    format: format,  // Specify format as Howler is unable to fetch it from URL
                    onloaderror: () => props.actions.setError(ONLOAD_ERROR),  // Display error if song cannot be loaded
                    onend: () => props.actions.playNextSong(),  // Play next song at the end
                });
                // Start playing
                this.howl.play();
            } else {
                // Howler already performs this check on his own, but we have

api.init = function (audioFormat) {
            if (!me.initialized) {
                throw new Error("me.audio.init() called before engine initialization.");
            }
            // if no param is given to init we use mp3 by default
            audioFormat = typeof audioFormat === "string" ? audioFormat : "mp3";
            // convert it into an array
            this.audioFormats = audioFormat.split(",");

            return !Howler.noAudio;
        };

this.onLoadCallback()
      this.loaded = true
    }
  },

  // Autios
  op: new howler.Howl({
    urls: ['./audios/op.mp3'],
    loop: true,
    onload: () => {
      audio.loads++
      audio.onload()
    }
  }),

  bgm: new howler.Howl({
    urls: ['./audios/bgm.mp3'],
    loop: true,
    onload: () => {
      audio.loads++
      audio.onload()
    }
  }),

  effects: new howler.Howl({
    urls: ['./audios/effects.mp3'],
    sprite: {
      // HUD
      hover: [0, 2000],
      click: [3000, 2000],
      // Status
      over: [64000, 4000],

/* globals io */

import { Howl } from 'howler'
import screenfull from 'screenfull'

var startupSound = new Howl({ urls: ['assets/sounds/startup.wav'] })

var inputStartSound = new Howl({
  urls: ['assets/sounds/inputStart.wav'],
  volume: 0.1
})

var inputEndSound = new Howl({
  urls: ['assets/sounds/inputEnd.wav'],
  volume: 0.02
})

var socket = null
var rootDOM = document.getElementsByTagName('html')[0]

function preventer (e) { e.preventDefault() }
window.addEventListener('touchstart', preventer)

export function setSaveData(data) {
  Howler.unload();
  Pool = {};

  Howler.mute(data.globalMuted);
  Howler.volume(data.globalVolume);

  ChannelVolume = data.channelVolume;

  const channelData = data.channelData;

  for (const item of channelData) {
    create(item.channel, item.src, {
      volume: item.volume,
      loop: item.loop,
      autoplay: false,
      mute: item.mute,
      rate: item.rate
    });

    // Pool[item.channel].seek(item.seek);

import {Howl} from 'howler';

(global as any).Howl = Howl;

const originalFade = Howl.prototype.fade;
const originalVolume = Howl.prototype.volume;

Howl.prototype.fade = function (from: number, to: number) {
  this.__monkeyPatchVolume = to;
  return originalFade.apply(this, arguments);
};

Howl.prototype.volume = function (volume: number) {
  // Setting volume
  if (arguments.length > 0) {
    this.__monkeyPatchVolume = volume;
    return originalVolume.apply(this, arguments);
  }

  // Getting volume
  if (this.__monkeyPatchVolume === undefined) {
    return originalVolume.apply(this, arguments);

import {Howl} from 'howler';

(global as any).Howl = Howl;

const originalFade = Howl.prototype.fade;
const originalVolume = Howl.prototype.volume;

Howl.prototype.fade = function (from: number, to: number) {
  this.__monkeyPatchVolume = to;
  return originalFade.apply(this, arguments);
};

Howl.prototype.volume = function (volume: number) {
  // Setting volume
  if (arguments.length > 0) {
    this.__monkeyPatchVolume = volume;
    return originalVolume.apply(this, arguments);
  }

  // Getting volume
  if (this.__monkeyPatchVolume === undefined) {
    return originalVolume.apply(this, arguments);
  }
  return this.__monkeyPatchVolume;

import {Howl} from 'howler';

(global as any).Howl = Howl;

const originalFade = Howl.prototype.fade;
const originalVolume = Howl.prototype.volume;

Howl.prototype.fade = function (from: number, to: number) {
  this.__monkeyPatchVolume = to;
  return originalFade.apply(this, arguments);
};

Howl.prototype.volume = function (volume: number) {
  // Setting volume
  if (arguments.length > 0) {
    this.__monkeyPatchVolume = volume;
    return originalVolume.apply(this, arguments);
  }

  // Getting volume
  if (this.__monkeyPatchVolume === undefined) {

import {Howl} from 'howler';

(global as any).Howl = Howl;

const originalFade = Howl.prototype.fade;
const originalVolume = Howl.prototype.volume;

Howl.prototype.fade = function (from: number, to: number) {
  this.__monkeyPatchVolume = to;
  return originalFade.apply(this, arguments);
};

Howl.prototype.volume = function (volume: number) {
  // Setting volume
  if (arguments.length > 0) {
    this.__monkeyPatchVolume = volume;
    return originalVolume.apply(this, arguments);
  }

  // Getting volume
  if (this.__monkeyPatchVolume === undefined) {
    return originalVolume.apply(this, arguments);
  }
  return this.__monkeyPatchVolume;
};

this.seek = function(t) {
    if (!this.playing && t >= 0) {
      // Sometimes browsers will prevent the audio from playing.
      // We need to resume the AudioContext or it will never play.
      if (Howler.ctx.state == "suspended") {
        Howler.ctx.resume().then(() => this.howl.play());
      } else {
        this.howl.play();
      }
      this.playing = true;
    }

    if (this.playing) {
      if (t < 0) {
        this.howl.stop();
        this.playing = false;
      } else {
        const playerPos = this.howl.seek();

        if (Math.abs(playerPos - t) > kTolerance) {
          this.howl.seek(t);