MENU CLOSE

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

AudioVisualizer [ howler.js + SVG ]
AudioVisualizer [ howler.js + SVG ]

はじめに

以前に、「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が動くようになっています。
音源はラジオです。→ ウメダFM - Be Happy! 78.9

実装方法

過去記事のデモを修正するだけなので、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 ]

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

音源はラジオです。→ ウメダFM - Be Happy! 78.9

さいごに

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

codecs(ext)

Check supported audio codecs. Returns true if the codec is supported in the current browser.

extString 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翻訳ってすごいですね。笑

記事一覧

RELATED

Dart Sass + Gulp
inoue
inoue
TRY

DartSassがなかなか辛かったのでGulpを修正してみた

Simple GA Ranking
inoue
inoue
TRY

Simple GA Ranking[ver2.1.6]が表示されないので調べてみた

Sass @import → @use
inoue
inoue
TRY

【Sass】@importを@useに置き換えてみる《FLOCSS対応》

Stripe Payment Links
inoue
inoue
TRY

コーディング一切不要のStripe Payment Linksで決済機能を試してみる

AudioVisualizer [ howler.js + SVG ]
inoue
inoue
TRY

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

nuxt + netlify + WP
inoue
inoue
TRY

Nuxt.js + Netlify + WP REST APIでブログサイトをつくってみる②【OGP設定】

NEW POSTS

lax.js
inoue
inoue
TIPS

lax.jsの使い方【スクロール連動アニメーションの実装】

Swiper v6 → v7
inoue
inoue
TIPS

Swiper(v7)へのアップグレード対応

WordPress add_rewrite_rule
inoue
inoue
TIPS

【WordPress】add_rewrite_ruleでリライトルールを追加する

PhotoSwipe
inoue
inoue
TIPS

PhotoSwipeを使って画像をポップアップ表示する【Swiper(v7)との連携あり】

Transients API
inoue
inoue
TIPS

【WordPress】Transients APIを使ってデータをキャッシュする方法

Flatpickr
inoue
inoue
TIPS

Flatpickrで日時入力をカレンダー表示にする

ブログ記事一覧
  • HOME
  • TRY
  • 【howler.js】ストリーミング音源からオーディオビジュアライザーを作る