Howler.jsで音源を扱う

エンジニアの信尾海翔です。
第十回目のブログではオーディオライブラリのHowler.jsについて簡単にまとめたいと思います。

Howler.jsとは

javascriptで簡単に音源を扱ったりすることができるオーディオライブラリです。
mp3、wav、aac、flac、mp4….などたくさんの形式にも対応していして、再生、一時停止などを簡単に行うことができます。

Howler.jsを使って実際に音楽を制御

今回は以下の機能を使って実際に音源を制御してみたいと思います。

再生停止ボタン　押すと音源を再生、再生中にを押すと停止
ミュートボタン　再生中に押すとミュート状態、ミュート状態中にを押すとミュート解除
一時停止ボタン　再生中に押すと一時停止状態、再生停止ボタンを押すと一時停止解除
音源をループして再生

以下がHowler.jsを使って音源を制御している部分になります。


    const sound = new Howl({
        src: ['test.mp3'],
        onplay: () =>{console.log('再生中')},
        onend: () =>{console.log('再生終了')},
        loop: true,
    });

    //再生停止
    const play = () =>{
        (sound.playing()) ? sound.stop() : sound.play();
    }

    //一時停止
    const pause = () =>{
        sound.pause();
    }

    //ミュート
    const mute = () =>{
        (sound.mute()) ? sound.mute(false) : sound.mute(true);
    }

それぞれボタンを用意、ボタンが押されると関数が呼び出されるようにしています。
再生停止ボタン → play()
一時停止ボタン → pause()
ミュートボタン → mute()

以下の部分では再生情報を指定しています。


    const sound = new Howl({
        src: ['test.mp3'],
        onplay: () =>{console.log('再生中')},
        onend: () =>{console.log('再生終了')},
        loop: true,
    });

srcにどの音源を再生するか配列を指定しています、配列の前から最初に見つかった対応ファイルが再生されます。
onplayには音源を再生中に行う処理を指定しています、今回はconsoleに再生中と表示しています。
onendには音源を最後まで再生した時の処理を指定しています。今回はconsoleに再生終了と表示しています。
loopにtrueを指定するとループ再生されます、デフォルトではループはされません。

再生停止処理


   const play = () =>{
       (sound.playing()) ? sound.stop() : sound.play();
   }

sound.playing()で再生中かどうかの判断しています。
停止状態の場合はsound.play()で再生、再生中の場合はsound.stop()で停止しています。

一時停止処理


    const pause = () =>{
        sound.pause();
    }

sound.pause()で一時停止しています。
再生停止ボタンを押すと一時停止が解除されます。

ミュート処理


    const mute = () =>{
        (sound.mute()) ? sound.mute(false) : sound.mute(true);
    }

sound.mute()でミュート状態かどうか判断しています。
ミュート状態の場合はsound.mute(false)でミュート解除、通常状態の場合はsound.mute(true)でミュート状態しています。

余談

休日に音楽を聴きながらPCで作業ことすることがあるのですが、作業BGMを簡単に制御できるものがほしいなと思い色々調べていた結果、Howler.jsにたどり着きました。
いつかElectronと組み合わせて簡単な音楽プレイヤー的なものを自分で作ってみたいなと思っています…

今回は省略しましたがHowler.jsにはフェードイン、フェードアウト、再生速度、再生位置指定などまだまだたくさんの機能があるのでまた色々触ってみたいと思います。

Blogブログ

Howler.jsとは

Howler.jsを使って実際に音楽を制御

余談