Howler.js HTML5 sound engine

Introduction

Howler.js is a nice HTML5 sound engine. It has powerful functions, good performance, and is very convenient to use.

1. Official website
https://howlerjs.com/
GitHub
https://github.com/goldfire/howler.js

2. Compatibility
Howler uses Web Audio by default, but can automatically convert to HTML 5 Audio on IE. This is very considerate.

3. Sound activation
Safari and Chrome on the mobile side both prohibit web pages from automatically playing sounds, which must be triggered by user operations, touch, click, etc. Howler can be set to automatically capture user actions to activate (unblock) sound playback.

4. Sound format
Howler.js supports many sound formats to be compatible with various browsers. MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.

5. Sound Wizard
Howler supports sound sprites.
Audiosprite on GitHub, a sound compilation tool based on ffmpeg (https://github.com/tonistiigi/audiosprite) directly supports the generation of sound sprites in Howler format, and has many parameters to choose from, and can output multiple formats at the same time, Howler. js can choose which sound format to use based on browser support.
Note that the order in which Howler.js selects sound formats is the order of the sound elf json description file, that is, the order you wrote when generating the sound elf.

6. Other features
Supports 3D games, automatic caching, supports fade-in and fade-out effects, lightweight, pure JS, no third-party dependencies, modular

Solve some detailed problems in daily development

1. Problems with automatic playback on iPhones and Android phones
If you are trying to automatically play audio on a page, you can listen to the playerror activity and wait for unlock before trying to play the audio again:

var sound = new Howl({
  src: ['sound.mp3'],
  autoplay: true,
  loop: true,
  // volume: 0.5,
  onplayerror: function() {
    sound.once('unlock', function() {
      sound.play();
    });
  }
});
// sound.play(); // autoplay: true, this line does not need to be set

After testing, both Apple and Android phones can automatically play background music in the WeChat browser, but in the Chrome browser, you need to click on the page to play the music.

2. Playback delay processing
– Audio playback delay when clicking button on Apple mobile phone
– Ordinary H5 games such as object-catching games, when the sound effects of receiving items and losing points are played continuously, the delay is inconsistent.
– There is often delay and incoherence in the connection between ordinary H5 sound loop cycles
Using Howler.js is better for delayed processing

Example:

var soundYes = new Howl({
  src: ['game/yes.mp3']
});
var soundNo = new Howl({
  src: ['game/no.mp3']
});
...
...
if(this.down_img.score > 0){
  soundYes.play();
}else{
  soundNo.play();
}
......

Install Howler.js

npm installation: npm install howler
Yarn installation: yarn add howler
Bower installation: bower install howler
Affiliation:
import {Howl, Howler} from ‘howler’;
or
const {Howl, Howler} = require(‘howler’);

Use

Introduce and use Howler.js in the project
import {Howl} from ‘howler’;
Basic example:

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});
sound.play(); 

Introduce and use Howler.js in