くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

ブラウザで音声を再生する(howler)

ブラウザで音声を再生したいなと思って、
いろいろ調べてみたときの備忘録(*´ω`*)

github.com

あまりないけど、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イベントで空の音声を再生を再生して、
ロック解除を試みてくれるらしい。

こういった点を含めて、簡単に使いやすいのがいい(*´ω`*)


以上!! 簡単に音声を再生できるようになった(*´ω`*)

参考にしたサイト様