Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

前置き

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

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

成果物

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

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

キャプチャ.PNG

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

つらそうです。

解説(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ファイルを読み込んだオブジェクトを2つ用意しています(理由は後述)。

ループ再生処理

以下の処理を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の機能で再生位置とか取得したりすればもう少しスマートに書けそうです(調査中)。

de_teiu_tkg
背中のボタンを押すと色々な言葉を発します
https://uselesscode.net/
it-geinin
技術を使って日々面白いことに挑戦し、Qiitaに投稿します。技術を楽しむ会です。
http://it-geinin.org/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした