ブラウザで音声再生ならhowler.js使っておこうな

howler.js

howler.js - JavaScript audio library for the modern web は
全てのプラットフォームのwebブラウザ上で音声を簡単に操作できるライブラリです。
画面の遷移時だったり、CSSアニメーション中など、HTMLのaudio要素を直接使わない音声再生をする場合ならとりあえず使っとけ！ってライブラリです。

browser上での音声再生の面倒くささと難しさを引き受けてくれます。

いやいや、でもちょっと音声再生するだけよ？
Audio要素作ってplay呼び出せばいいんじゃない？
と思うところですが、こんな時でも使いましょう。

function playSound(url) {
    const audioElem = new Audio();
    audioElem.src = url;
    audioElem.play();
}

なぜ使うのか？

上で記載した程度のコードでもブラウザと端末の組み合わせと状況によっては正しく再生されません。
むしろ正しく再生されることの方が少ないかもしれないです。

基本的にブラウザではユーザインタラクションが発生していないページで突然音声を再生させることはできないです。
このことを知っていると、じゃあそこだけ気を付けておけばライブラリなんて必要ないじゃん！と思ってしまいますが、どうか利用してください。
それだけじゃないんです。

ユーザインタラクション後なら上記コードにあるplaySoundをいつ、どんなときに呼び出しても再生が正しくされるか。というとそうはいきません。
AudioContextの扱いや、同時再生数、WebAudioとHTML5 Audioどちらを使うべきか。
考慮すべき点がどんどん出てきます。
ちょっと音声が出したいだけなのに、Webの音声の技術についていろんなことをキャッチアップしないと「アレ！？おかしいぞ！！」がぽんぽんでてきます。
そうなるくらいなら、とりあえず使っておく。というのが私のお勧めです。

利用するには？

GitHub - goldfire/howler.js: Javascript audio library for the modern web.

READMEにあるように従えば利用できます。

import {Howl, Howler} from 'howler';

const sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

1番最初に出したサンプルのplaySoundをhowler.jsを利用して実装してみると以下のようになります。

function playSound(url) {
  const sound = new Howl({
    src: [url]
  });

  sound.play();
}

TypeScriptを使っているのなら @types/howler - npm で型定義ファイルも提供されています。嬉しいですね。

最後に

とりあえず音声再生にはhowler.jsを使っておけよ！という主張ですが過去の自分に1番してやりたいです。

ユーザテストを前にして、howler.jsを使わない自前の音声再生の実装が正しく動かないことに気づき、慌てて修正を試みるが治らない！そもそも原因がわからない！！なんてことがありました。
ところがhowler.jsを利用したら起きていた問題は消え去りました。
この時はhowler.jsの存在を知っていたのに入れなかった自分をビンタしたくなったものです。

ライブラリをとりあえず入れる。というのは考えものですが、howler.jsは入れない強い動機がなければとりあえずいれてみてはいかかでしょうか。