#FJMK blog

citrus+というバンドをやってます。 http://citrusplus.jp 平日昼間はインターネットの会社@紀尾井町でエンジニアやってます。

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

f:id:sfjmk:20170903155804p:plain 先日某ハッカソンで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を読み込んだ上で

var sound = new Howl({
  urls: ['sound.mp3'] // 音声ファイルを置いてあるパス
}).play();

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

var sound = new Howl({
  urls: ['sound.mp3']
});

$(".js-slidein”).on('webkitAnimationEnd', function(){
  sound.play();
});

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

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {
    alert('Finished!');
  }
});

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

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

他にも

var sound = new Howl({
  urls: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    blast: [0, 2000],
    laser: [3000, 700],
    winner: [5000, 9000]
  }
});

// shoot the laser!
sound.play('laser');

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

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

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