1. de_teiu_tkg

    Posted

    de_teiu_tkg
Changes in title
+絶対に作業できない作業用BGMサイト
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,78 @@
+[クソアプリ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/kuso-app2017) 17日目の記事です.
+
+#前置き
+コーディングをする時は何かしらの作業用BGMを聞きながらやる、という人は結構多いと思います。好きなアーティストの曲だったり、雨の音などの環境音を聞きながら作業すると捗りますよね。
+
+
+ということで今回は、開くだけで作業用BGMが流れるWebアプリを作成してみました。
+
+#成果物
+ひたすらブーイングを受ける作業用BGMサイトです。
+
+(**注意:わりと大きめの音が鳴ります**)
+[Booooooo](https://de-teiu.github.io/booing/)
+
+<img width="813" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/173272/59b625e4-4a48-c3de-7ed2-644146cd3fa6.png">
+
+
+
+#これ聞きながらコーディングできる?
+自分は3分ともちませんでした。
+
+#解説(mp3再生について)
+今回も[p5.js](https://p5js.org/)を使用して作りました。
+mp3ファイルの再生にはp5.jsの拡張ライブラリである[p5.sound.js](https://p5js.org/reference/#/libraries/p5.sound)を使用しています。
+
+ソースは[こちら(GitHub)](https://github.com/de-teiu/booing)にあります。
+
+
+
+## mp3を再生するオブジェクトの定義
+まず用意するfunctionはこんな感じ
+
+```js: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から毎フレーム呼び出しています。
+
+```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の機能で再生位置とか取得したりすればもう少しスマートに書けそうです(調査中)。
+