ブラウザで音声を再生したいなと思って、
いろいろ調べてみたときの備忘録(*´ω`*)
あまりないけど、howlerがよさそうだった(*´ω`*)
使い方
まずはインストール
$ npm i howler
再生するだけならこれでOK(*´ω`*)
import { Howl } from 'howler'; const sound = new Howl({ src: ['sound.mp3'] }); sound.play();
再生オプション
自動再生やループ、音量のオプションはこんな感じ。
preload
の指定すると事前ダウンロードを変更できる。
const sound = new Howl({ src: ['sound.webm', 'sound.mp3', 'sound.wav'], autoplay: true, loop: true, volume: 0.5, preload: true, });
src
に複数設定することで、対応していない形式の場合に、
フォールバックしてくれる。
操作
sound.play(); sound.pause(); sound.stop(); sound.mute(true); sound.volume(0.2); sound.fade(1.0, 0.0); // fade out sound.seef(2); // move to 2 seconds sound.loop(true); sound.state(); // unloaded, loading or loaded sound.playing(); // true or false // preload: falseの場合はloadが必要 sound.load(); // unload and destroy a Howl object sound.unload();
リスナー
リスナーも用意されている。
// Clear listener after first call. sound.once('load', function(){ sound.play(); }); // Fires when the sound finishes playing. sound.on('end', function(){ console.log('Finished!'); }); // Remove event listener sound.off('end');
イベントの種類はこんな感じ。
load, loaderror, playerror, play, end, pause, stop, mute, volume, rate, seek, fade, unlock
全体の設定
Howler
を使うと、全体の設定ができる。
import { Howler } from 'howler'; // Change global volume. Howler.volume(0.5); Howler.mute(true); Howler.stop(); Howler.unload();
unlockについて
モバイルブラウザやChrome/Safariでは、
ユーザの操作に伴って音が再生されるまで、
オーディオはロックされているよう。
なので、howlerは、touchend
イベントで空の音声を再生を再生して、
ロック解除を試みてくれるらしい。
こういった点を含めて、簡単に使いやすいのがいい(*´ω`*)
以上!! 簡単に音声を再生できるようになった(*´ω`*)
参考にしたサイト様
- goldfire/howler.js: Javascript audio library for the modern web.
- オーディオファイルの扱いが簡単に!JavaScriptライブラリ「Howler.js」 | DevelopersIO
- colinbdclark/osc.js: An Open Sound Control (OSC) library for JavaScript that works in both the browser and Node.js
- javascript sound - npm search
- ウェブオーディオ API - Web API | MDN
- HTMLMediaElement - Web API | MDN