絶対に作業できない作業用BGMサイト

6033 ワード
p5.js クソアプリ JavaScript JavaScript テキストリンク

クソアプリ Advent Calendar 2017 17日目の記事です.
10日目にも投稿しましたが、カレンダー上でこの日だけ空いていたので、もう一本書きました。

前置き

コーディングをする時は何かしらの作業用BGMを聞きながらやる、という人は結構多いと思います。好きなアーティストの曲だったり、雨の音などの環境音を聞きながら作業すると捗りますよね。

ということで今回は、開くだけで作業用BGMが流れるWebアプリを作成してみました。

成果物

ひたすらブーイングを受ける作業用BGMサイトです。

デモは以下
(注意：わりと大きめの音が鳴ります)
Booooooo

これ聞きながらコーディングできる？

つらそうです。

解説(mp3再生について)

今回もp5.jsを使用して作りました。
mp3ファイルの再生にはp5.jsの拡張ライブラリであるp5.sound.jsを使用しています。

ソースはこちら(GitHub)にあります。

mp3を再生するオブジェクトの定義

まず用意するfunctionはこんな感じ

bgm.js
/** ブーイング再生用オブジェクト定義 */
function Booing() {
    var FILE_PATH = 'https://raw.githubusercontent.com/de-teiu/booing/master/js/sound/81191__payattention__booooooo.mp3';


    //1つの音をうまいこと途切れないようにループ再生するため、mp3を読み込んだオブジェクトを2つ用意
    this.startDate = new Date();
    this.bgm1 = loadSound(FILE_PATH);
    this.bgm2 = loadSound(FILE_PATH);
};

GitHub Pagesを使用して動かす場合、読み込みたいmp3ファイルのパスは絶対パスにする必要があるようです。
(相対パスで指定したら読み込みに失敗しました。もしかしたら何かしらの手順が必要？)
というわけで、ひとまずFILE_PATHには読み込むmp3ファイルを絶対パスで指定しています。

また、mp3ファイルを読み込んだオブジェクトを２つ用意しています(理由は後述)。

ループ再生処理

以下の処理をmain.jsから毎フレーム呼び出しています。

bgm.js
/** ループ再生 */
Booing.prototype.loopPlay = function () {

    //BGMが鳴ってなかったら再生
    if (!this.bgm1.isPlaying() && !this.bgm2.isPlaying()) {
        this.bgm1.play();
    }

    //再生が終了するあたりのタイミングでもう片方のBGMを再生開始
    var now = new Date();
    if ((now.getTime() - this.startDate.getTime()) / 1000 >= 22) {
        this.bgm1.isPlaying() ? this.bgm2.play() : this.bgm1.play();
        this.startDate = now;
    }
};

曲の再生時間を常に計っておき、再生が終わる直前にもう片方の音声オブジェクトの再生を行っています。
これを繰り返すことで、途切れることなくBGMが流れます。

p5.soundの機能で再生位置とか取得したりすればもう少しスマートに書けそうです(調査中)。