preface

I believe there are a lot of people in writing mobile audio playback when stepping on a lot of pits, especially complex audio projects compatible with a variety of devices when it makes you crazy, for example, ios terminal can not start playing audio, must be the user to operate…

I came across howler.js, an audio engine that works with all devices and browsers, and used it perfectly

Features and Compatibility

  • Howler.js uses Web Audio by default, but it can be automatically converted to HTML 5 Audio on IE. That’s very sweet.

  • Both Safari and Chrome on mobile forbid web pages to automatically play sounds, which must be triggered by user actions, touch, click, etc. Howler.js can be set to automatically capture user action activation (unban) sound playback.

  • 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. Almost all formats are covered, the default is Web Audio API, backwards compatible with HTML5 Audio

  • Support for 3D games

  • Automatic cache

  • Supports fade in and out effects

  • Lightweight, only 7KB when compressed

  • Pure JS

  • No third party dependence

  • modular

“More features can be found on GithubHowler.js“

Method of use

They’re all on the website but there’s not much discussion here
import {Howl, Howler} from 'howler';



// Initialize an audio class

const sound = new Howl({

  src: ['sound.webm'.'sound.mp3']

});



// Play the audio

sound.play();



// Change the global audio sound size

Howler.volume(0.5);



// Just want to change the size of an audio can be changed during initialization

const sound = new Howl({

  src: ['sound.webm'.'sound.mp3'].

  volume:0.5

});

Copy the code

conclusion

There are some performance and compatibility issues with self-packaged audio libraries, such as the way Howler handles looping sound without cutting it

❝

One day when I was discussing the audio solution with my colleagues, I talked for a long time about finding an audio library in Baidu, but failed to find it after searching for a long time. When I was about to give up, I turned on the headlines and scanned the news for a while, but suddenly I found an article that mentioned this solution, so I had to say byte 🐂 ❤️❤️❤️

❞