빌어 먹을 앱 Advent Calendar 2017 17 일째 기사입니다.
10일째에도 올렸습니다 하지만, 캘린더상에서 이 날만 비어 있었기 때문에, 한 번 더 썼습니다.

전치

코딩을 할 때는 뭔가의 작업용 BGM을 들으면서 한다는 사람은 상당히 많다고 생각합니다. 좋아하는 아티스트의 곡이거나 비의 소리 등의 환경 소리를 들으면서 작업하면 되겠네요.

그래서 이번에는 열기만으로 작업용 배경 음악이 흐르는 웹 앱을 만들어 보았습니다.

아티팩트

오로지 부잉을 받는 작업용 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 파일을 읽은 오브젝트를 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의 기능으로 재생 위치라든지 취득하거나 하면 좀 더 스마트하게 쓸 수 있을 것 같습니다(조사중).