【howler.js】
ストリーミング音源から
オーディオビジュアライザーを作る

2021.07.26 2022.08.19

TRY

inoue

はじめに

以前に、「howler.jsを使ってオーディオビジュアライザーを作ってみる」という記事を書きました。

howler.jsを使ってオーディオビジュアライザーを作ってみる

過去記事のデモでは、サーバー上にオーディオファイルを置いてhowler.jsを使って再生し、howler.jsに内包されているWeb Audio APIから周波数を数値データとして取得・SVGに描画する、ということをやりました。

Githubにデモを公開しているのですが、先日、国外の方からissueが付いて、「ライブストリーミング音源の場合はこのデモの通りにやっても動かなくて困っているので教えてください」といった内容の質問が来ました。（実際に直訳するとそうは言ってないけどそういう内容）

コードのサンプルを見せてくれたので、間違えていそうなところを指摘して返事してみたのですが、解決には至りませんでした。ただ、後から解決しなかったことがめちゃくちゃ気になってしまい、実際にストリーミング音源に変えた場合のデモを作ってみました。

howler.js（Web Audio API）+ SVG + Streaming Sound

作ったデモはこちら。

ストリーミング｜AudioVisualizer [ howler.js + SVG ]

※自動再生ではありませんのでページ遷移しても再生ボタンを押すまでは音声は出ません。ボタンをクリックしたら音源が流れますので音量に注意してください。

ストリーミング音源なので、少し読み込む時間がかかりますが、ラジオの音源に合わせてSVGが動くようになっています。音源は海外のネットラジオです。

実装方法

過去記事のデモを修正するだけなので、HTML・CSSについては同じなので割愛します。
JSだけ数カ所修正する必要があったため、その内容についてだけ説明します。

JSは、関数の中で4つだけ修正が必要な箇所がありました。
修正する箇所を関数ごとに見ていきます。

メンバ変数の定義とhowler.jsの音源・パラメータ変更

main.js / createVisualizerData()

2つのメンバ変数を新たに追加し、howler.jsのオプション指定をストリーミング音源に合わせて変更しています。howler.jsでストリーミング音源を再生する場合は、html5 : trueを指定し、Web Audio APIではなくHTML5 Audioで再生する必要があります。

Web Audio API
https://webaudio.github.io/web-audio-api/

HTML5 Audio
https://html.spec.whatwg.org/multipage/media.html#the-audio-element

この修正だけで再生すると音が出るようになるので、これだけでいけそうな感じがするのですが、アニメーションは動きません。HTML5 Audioのままでは、それ以降の別の関数で処理している周波数を数値データとして取得することができないので、後からWeb Audio APIと繋げる処理が必要になります。

音源の再生時

main.js / playAudio()

音源の再生時にローディングフラグを立てます。ストリーミング再生に少し時間がかかるので、音が鳴るまでの間ローディング表示を加える様に使います。（ローディングが特に必要なければ飛ばしてください）

Web Audio APIにHTML5 Audioを繋げる

main.js / initAudioVisualizer()

追記と書いている部分がストリーミング用に調整したコードになります。

内容について説明すると、
howler.jsはhtml5 : trueオプションによって、HTML5 Audioで再生されるため、どこかで内部的にaudio要素をHTMLElementで持って再生しているはずだと思ったので探しました。するとHowler._html5AudioPoolに配列でaudio要素を複数保持しており、その配列の末尾のaudio要素でストリーミング再生されているのを発見。Howler._html5AudioPool.slice(-1)[0]で末尾の要素を取得し、ストリーミング再生されているaudio要素をメンバ変数に格納。あとはそのメンバ変数からWeb Audio API用のオブジェクトを生成（Howler.ctx.createMediaElementSource(this.audio)）し、周波数を取得するためのノードを繋げます。

AudioContext.createMediaElementSource() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/AudioContext/createMediaElementSource

他、読み込み時間にローディングを入れた際に音が鳴ったかどうかを取得するために、ここでは簡易的にthis._freqs = new Uint8Array(1);として1つだけデータが入った配列を用意しておきます。

SVGの描画時

描画処理自体は以前のコードのままでOKですが、上述した読み込み時間にローディングを入れた際に音が出たかどうかを周波数から取得して判定します。音が出ていればthis._freqsの配列に値が入ってくるので、それを利用してローディングを終了させます。

完成デモ

完成したデモはこちら。

ストリーミング｜AudioVisualizer [ howler.js + SVG ]

さいごに

今回はhowler.jsとストリーミング音源を使ってオーディオビジュアライザーを作りました。
注意点としては、ストリーミング再生できる音源がhowler.jsの場合は限られているというところです。

codecs(ext)
Check supported audio codecs. Returns true if the codec is supported in the current browser.
ext: String File extension. One of: "mp3", "mpeg", "opus", "ogg", "oga", "wav", "aac", "caf", "m4a", "m4b", "mp4", "weba", "webm", "dolby", "flac".
https://github.com/goldfire/howler.js/#codecsext

HLS形式（拡張子が.m3u8）は対応していないため使えませんでした。
HLSを扱う方法も調べればあるかもしれませんが、今回はそこまで調べきれなかったので、また使える方法がわかれば記事にしたいと思います。

今回の記事はGitHubでissueが付いたのが発端でしたが、こんなWeb業界の端っこの人間がGithubで公開しているデモサイトなんか日本人すらコメント来たことがなかったのに、海外の方から英語でコメントが付いてびっくりしました。英語で会話したことないので、ちゃんと内容が伝わるか不安でしたが、2往復ぐらいはやりとりできて良かったです。Google翻訳ってすごいですね。笑