WEBブラウザでイベントに合わせて音を鳴らしたい時はhowler.jsが便利

シェアする

先日某ハッカソンでWEBアプリケーションを作った時に、アニメーションに合わせて音を鳴らしたりしたのですが、
イベントに合わせて音を慣らすのにhowler.jsというjsライブラリが便利だったので簡単に紹介します。


公式ページ

howler.js - Modern Web Audio Javascript Library

Browsers have come a long way over the years, and we are now able to achieve amazing results using all of the great new technologies often referred to as HTML5. However, generally speaking, audio...

サムネが謎...goldfireっていうゲーム会社がゲームで音を鳴らす用につくったライブラリのようです。

GitHubはこちら

goldfire/howler.js

howler.js - Javascript audio library for the modern web.


https://github.com/goldfire/howler.js

使い方はリンク先の通りですが、
howler.jsを読み込んだ上で

こんな風に書くと音声ファイル(ここだとsound.mp3)が鳴ります。

こんな風にすると、アニメーション等に合わせて音を鳴らせるわけですね。

onendを使うと再生終了イベントもとることができます。

再生に加えて停止・フェードインやアウト・ループ等のメソッドも用意されてるようです。

他にも

こんな風にスプライト機能も用意されていて、1つの音声ファイルを秒ごとに区切って音を呼び出すこともできます。

遊びでちょっと使っただけなので、音鳴らす系jsライブラリの中でこれがベストなのかは何とも言えませんが、簡単に使えるのでWEBブラウザで音を鳴らしたい時には試してみるといいんじゃないでしょうか。

今年はブログ書こうと思いつつ1月から挫折気味…(何か書かなきゃと思ってこの記事も滑り込みで書いた笑) こういうメモみたいな感じでもいいからコンスタントに書きたいなー

シェアする

Profile

Profile

藤牧宗太郎
Sotaro Fujimaki

紀尾井町のIT企業でエンジニアをしています。
Facebook
Twitter
作った音楽

↓インターネット関連のことをよくつぶやいているので、よかったらフォローお願いします。


follow us in feedly