20：BGMと効果音を再生する

どのように音を鳴らせばいい？

（2019.6.24執筆、2021.11.06更新）

アドバイス、実装までの流れ

オーディオを鳴らすにはWeb Audio APIというのを使えば簡単です。
その名の通りオーディオを扱う機能で、多数のフィルタを接続してパンやエフェクトを実現できます。

まずはオーディオを読み込む必要があるので、AseetLoaderにloadAudioメソッドを追加します。

loadAudio(name, url) { // URLからファイルを読み込みarrayBuffer形式で取得する
    const promise = fetch(url).then((response) => response.arrayBuffer())
        .then((buffer) => {
            this._assets.set(name, buffer);
        });
    this._promises.push(promise);
}

これでオーディオの読み込み・取得ができるはずです。
動作確認はしていないのでエラーは適宜直してください。

あとはWebAudioでいろいろやるだけです。
参考： WebAudioAPIで遊べるようになった - Qiita

注意点としては、WebAudioは一度
ユーザアクション（クリック、キー入力）があったあとでないと音がミュートされる点です。
これは突然大音量を流す悪質な広告などを防ぐための仕組みです。

あとはオーディオを鳴らす管理をする場所を考えないといけないですね。
WebAudioを使う際に必要なaudioContextが6個までの制限があるので、
どこかで統一的に管理してないとすぐに溢れるかもです。
グローバルにAudioManagerとか作ってそっちに任せるといいかもです。

音声ファイルを用意してAseetLoaderに読み込ませてみる

AssetLoaderクラスに記述

class AssetLoader {//画像などを読み込むための箱、このクラスで画像ファイルを管理する
    constructor() {
        this._promises = [];
        this._assets = new Map();
    }
    addImage(name, url) {
        const img = new Image();
        img.src = url;

        const promise = new Promise((resolve, reject) =>//画像を完全に読み込んだ後に動作させるための記述
            img.addEventListener('load', (e) => {
                this._assets.set(name, img);
                resolve(img);
            }));
        this._promises.push(promise);
    }
    loadAudio(name, url) {// URLからファイルを読み込みarrayBuffer形式で取得する
        const promise = fetch(url)
            .then((response) => response.arrayBuffer())
            .then((buffer) => { 
                this._assets.set(name, buffer);
                console.log(buffer); //ここでファイルの状態を確認
            }
        );
        this._promises.push(promise);
    }

    loadAll() { return Promise.all(this._promises).then((p) => this._assets); }
    get(name) { return this._assets.get(name); }
}

読み込んだArrayBufferを再生してみよう

読み込んだ音声ファイルを再生するまでの手順

1. const context = new window.AudioContext();...オーディオコンテキストを用意する
2. buffer ... これはArrayBufferのこと？ AudioContextでデコード？
3. source ... AudioContextでデコードしたbufferを入力？
4. source.connect(context.destination);... 音声を出力先に繋ぐ？
5. source.start(0);...音声スタートメソッド。これで音声再生

• 音声機能を使うためのAudioContextを宣言する！
• AudioContext.sourceに、音声ファイルを入力する
• AudioContext.sourceから、スピーカー？みたいな(context.destination);に繋ぐ
• source.start(0);...playボタンを押す！

音声マネージャーをクラスを新規で作る

//音声再生のためのスクリプト
//オーディオマネージャークラスに基本機能を設定
//クラス設定後、グローバルにaudioインスタンスを作成する

class AudioManager { //複数のオーディオコンテキストをまとめるクラス
    constructor(){
        this.context = []; //一度に使えるオーディオコンテキストは6個まで。
        for(let i=0; i<6; i++) { //用意した配列に6個のオーディオコンテキストを格納
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            this.context[i] = audioContext;
        }
    }

    playBGM(i, buffer){
        const source = this.context[i].createBufferSource(); //コンテキストにソース領域を作成
        console.log(buffer); // このバッファは何かを確認
        source.buffer = buffer; // ソース領域にバッファデータを入力
        source.connect(this.context[i].destination); // スピーカーへ出力！
        source.loop = true; // ソース要素で色々設定できそう。とりあえずループ再生をONに。
        source.start(0); // いざ再生！
    }
}

const audio = new AudioManager(); //グローバル領域に展開

オーディオコンテキストを宣言する箇所

    constructor(){
        this.context = []; //一度に使えるオーディオコンテキストは6個まで。
        for(let i=0; i<6; i++) { //用意した配列に6個のオーディオコンテキストを格納
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            this.context[i] = audioContext;
        }
    }

音声再生のメソッドをまとめた箇所

    playBGM(i, buffer){
        const source = this.context[i].createBufferSource(); //コンテキストにソース領域を作成
        console.log(buffer); // このバッファは何かを確認
        source.buffer = buffer; // ソース領域にバッファデータを入力
        source.connect(this.context[i].destination); // スピーカーへ出力！
        source.loop = true; // ソース要素で色々設定できそう。とりあえずループ再生をONに。
        source.start(0); // いざ再生！
    }

確認、再生する？

ArrayBufferをデコードする手順を踏むと上手く行った

    playBGM(i, buffer){
        const source = this.context[i].createBufferSource(); //音声コンテキストのソース領域を宣言
        this.context[i].decodeAudioData(buffer , (buf) => { //ArrayBufferをAudioBufferに変換
            console.log(buf); // このバッファは何かを確認
            source.buffer = buf; // ソース領域にバッファデータを入力
            source.connect(this.context[i].destination); // スピーカーへ出力！
            source.loop = true; // ソース要素で色々設定できそう。とりあえずループ再生をONに。
            source.start(0); // いざ再生！

            console.log(assets.get('shoujoa')); //元のarrayBufferはどうなってるか？
        });
    }

再生テスト

class MainScene extends Scene {
    constructor(actorsCanvas, windowsUICanvas) {
        super('メイン', 800, 600, 'bg0', actorsCanvas, windowsUICanvas);

        this.add(global.player);

        const Curve2 = new BezierCurveActor (30, 30,  30, 340,  300, 240, 40, 360);
        this.add(Curve2);
        const Curve1 = new BezierCurveActor (400, 110,  70, 20, 220, 160, 330, 190);
        this.add(Curve1);

        const npc1 = new NPC_girl1(150, 100,'すみれ秘書');
        this.add(npc1);
        audio.playBGM(0, assets.get('shoujoa')); //ここを追加
    }
}

assets.addImage('player', 'images/chara_player.png');
assets.addImage('npc1', 'images/chara_npc1.png');
assets.addImage('bg0', 'images/backimage0.png');
assets.addImage('up_npc_girl0', 'images/up_npc_girl0.png');
assets.addImage('up_npc_girl1', 'images/up_npc_girl1.png');
assets.loadAudio('shoujoa', 'images/audio/chapter4-shoujoa.m4a'); //ここを追加
assets.loadAll().then((a) => {
    const game = new RolePlayingGame();
    document.body.appendChild(game.actorsCanvas);
    document.body.appendChild(game.windowsUICanvas);
    document.body.appendChild(timeCounter);
    game.start();

    global.player = new Player(150, 200, 90); //globalオブジェクトに、player: new Player();のプロパティを追加。global.playerでアクセス可能に！
});

⇒ シーン中のBGM再生デモ

最初からAudioBufferに変換した状態でassetsに登録すればよいのでは？

class AudioManager { //複数のオーディオコンテキストをまとめるクラス
    constructor(){
        this.context = []; //一度に使えるオーディオコンテキストは6個まで
        for(let i=0; i<6; i++) { //用意した配列に6個のオーディオコンテキストを格納
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            this.context[i] = audioContext;
        }
    }

    playBGM(i, buffer){
        const source = this.context[i].createBufferSource(); //音声コンテキストのソース領域を宣言
      //  this.context[i].decodeAudioData(buffer , (buf) => { //デコードをスキップ
            console.log(buffer); // このバッファは何かを確認
            source.buffer = buffer; // ソース領域にバッファデータを入力
            source.connect(this.context[i].destination); // スピーカーへ出力！
            source.loop = true; // ソース要素で色々設定できそう。とりあえずループ再生をONに。
            source.start(0); // いざ再生！

            console.log(assets.get('shoujoa')); //元のarrayBufferはどうなってるか？
      //  }); //デコードをスキップ
    }
}
const audio = new AudioManager();



class AssetLoader {//画像などを読み込むための箱、このクラスで画像ファイルを管理する
    constructor() {
        this._promises = [];
        this._assets = new Map();
    }
    addImage(name, url) {
        const img = new Image();
        img.src = url;

        const promise = new Promise((resolve, reject) =>//画像を完全に読み込んだ後に動作させるための記述
            img.addEventListener('load', (e) => {
                this._assets.set(name, img);
                resolve(img);
            }));
        this._promises.push(promise);
    }
    loadAudio(name, url, i = 5) {// URLからファイルを読み込みarrayBuffer形式で取得し、audioBuffer形式に変換）
        const promise = fetch(url, {credentials: 'same-origin'})
            .then((response) => response.arrayBuffer())
            .then((buffer) => {console.log(buffer); //ここでファイルの状態を確認
            audio.context[i].decodeAudioData(buffer, (buf) => this._assets.set(name, buf));
        });
        this._promises.push(promise);
    }

    loadAll() { return Promise.all(this._promises).then((p) => this._assets); }
    get(name) { return this._assets.get(name); }
}

const assets = new AssetLoader();//画像ファイル管理棚のaseetsを作成...asetts.get('名前')で取り出せる

⇒ 修正後のBGM再生デモ

どうするのが一番いいのかよーわからｎ？

Web Audio API ストリーミング再生？

AudioBufferについての引用記事

AudioBufferはせいぜい1分程度の比較的短めの音声のために設計されていて、
たとえばCD一枚74分のデータ全体のような大きなデータを読み込むような目的には向いていません。

このインターフェースはメモリ上に保持されるオーディオのリソース(ワンショットの音やその他の短いオーディオクリップ)を表します。
そのフォーマットは-1 ～ +1の名目上の範囲を持つ非インターリーブのIEEE 32ビット・リニアPCMです。
1つ以上のチャンネルを持つ事ができます
 典型的には、そのPCMデータは適度に(通常1分以内程度に)短いと見込まれます。


音楽の1曲分のような長時間の音はaudio要素とMediaElementAudioSourceNodeによるストリーミングを使うべきです。

http://g200kg.github.io/web-audio-api-ja/#AudioBuffer


これらのオブジェクトは短い、一般的には45秒未満の、断片的な音声を保持するために設計されています。
それよりも長い音声は、MediaElementAudioSourceNodeのオブジェクトが適しています。

https://developer.mozilla.org/ja/docs/Web/API/AudioBuffer


というわけで、MediaElementAudioSourceNodeを使うのがいいと思います。
MediaElementAudioSourceNodeなら簡単にストリーミング再生で部分的に読み込みながら再生することが可能です。
万が一XHRで読み込まなければならない理由があるのなら、MediaElementAudioSourceNodeを使うことはできません。
その場合は何らかの方法でオーディオファイルを分割してAudioBufferに読み込むことになるでしょう。


HTMLMediaElementのcurrentTimeプロパティで現在の再生位置を設定できます。
その後でplayを呼び出せば途中から再生できます。
たとえば、ローカルのオーディオファイルを開いて、ローパスフィルタをかけて途中から再生するコードは次のようになります。


var input = document.querySelector("input");
var audio = document.querySelector("audio");

var context = new AudioContext();
var source = context.createMediaElementSource(audio);
var filter = context.createBiquadFilter();

source.connect(filter);
filter.connect(context.destination);

input.addEventListener("change", function(){
    audio.src = URL.createObjectURL(input.files[0]);
    audio.currentTime = 50; 
    audio.play();
});

<input type="file"></input>
<audio controls />

audio要素を使ってBGMを再生させてみよう

audio要素の導入例

class AudioManager { //複数のオーディオを管理するクラス
    constructor(){
        this.context = new (window.AudioContext || window.webkitAudioContext)();

        this.BGM1 = document.createElement('audio');
        this.BGM1.loop = true; // ループ再生をONに。
        const source1 = this.context[0].createMediaElementSource(this.BGM1);
        this.volume1 = this.context[0].createGain();
        source1.connect(this.volume1);
        this.volume1.connect(this.context[0].destination);
    }
}

        this.context = new (window.AudioContext || window.webkitAudioContext)();
        this.BGM1 = document.createElement('audio');

        this.BGM1 = document.createElement('audio');
        this.BGM1.loop = true; // ループ再生をONに。
        const source1 = this.context[0].createMediaElementSource(this.BGM1);
        this.volume1 = this.context[0].createGain();
        source1.connect(this.volume1);
        this.volume1.connect(this.context[0].destination);

class TitleScene extends Scene {
    constructor() {
        super('タイトル', screenCanvasWidth, screenCanvasHeight, null);
        const title = new TextLabel(100, 200, 'RPG製作',"white", 25);
        this.open(title);

        audio.BGM1.src = "images/audio/musicbox2.ogg";
        audio.BGM1.play();
    }

class MainScene extends Scene {
    constructor() {
        super('メイン', 800, 600, 'bg0');
        this.add(global.player);
        const npc1 = new NPC_girl1(150, 100,'すみれ秘書');
        this.add(npc1);

        audio.BGM1.src = "images/audio/chapter4-shoujoa.m4a";
        audio.BGM1.play();
    }
}

効果音SEの再生はAudioBufferに取り込んで使おう

効果音ファイルをロードする

class AssetLoader {//画像などを読み込むための箱、このクラスで画像ファイルを管理する
    constructor() {
        this._promises = [];
        this._assets = new Map();
    }
    addImage(name, url) {
        const img = new Image();
        img.src = url;

        const promise = new Promise((resolve, reject) =>//画像を完全に読み込んだ後に動作させるための記述
            img.addEventListener('load', (e) => {
                this._assets.set(name, img);
                resolve(img);
            }));
        this._promises.push(promise);
    }
    loadAudio(name, url, i = 5) {// URLからファイルを読み込みarrayBuffer形式で取得し、audioBuffer形式に変換）
        const promise = fetch(url, {credentials: 'same-origin'})
            .then((response) => response.arrayBuffer())
            .then((buffer) => {
            audio.context[i].decodeAudioData(buffer, (buf) => this._assets.set(name, buf));
        });
        this._promises.push(promise);
    }

    loadAll() { return Promise.all(this._promises).then((p) => this._assets); }
    get(name) { return this._assets.get(name); }
}

const assets = new AssetLoader();//画像ファイル管理棚のaseetsを作成...asetts.get('名前')で取り出せる

assets.loadAudio('se_pon', 'assets/audio/se/pon.m4a');

効果音を再生する

class AudioManager { //複数のオーディオコンテキストをまとめるクラス
    constructor(){
        this.context = []; //一度に使えるオーディオコンテキストは6個まで
        for(let i=0; i<6; i++) { //用意した配列に6個のオーディオコンテキストを格納
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            this.context[i] = audioContext;
        }

        this.BGM1 = document.createElement('audio');
        const source1 = this.context[0].createMediaElementSource(this.BGM1);
        this.volume1 = this.context[0].createGain();
        source1.connect(this.volume1);
        this.volume1.connect(this.context[0].destination);
    }

    sound(buffer, i=1){
        const source = this.context[i].createBufferSource(); //音声コンテキストのソース領域を宣言
        source.buffer = buffer; // ソース領域にバッファデータを入力
        source.connect(this.context[i].destination); // スピーカーへ出力！
        source.start(0); // いざ再生！
    }
}
const audio = new AudioManager();

class PlayerAction extends Actor {
    constructor(x, y, player) {
        const hitArea = new Circle(0, 0, 1);
        super(x, y, hitArea, ['playerAction', 'event']);
        this.player = player;
        audio.sound(assets.get('se_pon')); //この一行
    }

    render(context, scroller) {//オーバーライドしたrenderメソッドで、アクション範囲を可視化してみる
        context.beginPath();
        context.fillColor("rgba(255,255,255,0.7)"); //半透明の白で塗りつぶす
        context.circle(this.x - scroller.x, this.y - scroller.y, this.hitArea.radius);
        context.fill();
    }
    update(sceneInfo, input, touch) { 
        if(this.hitArea.radius === 1) { this.hitArea.radius = 8;}
        else if(this.hitArea.radius === 8) { this.hitArea.radius = 16;}
        else if(this.hitArea.radius === 16) {this.release();}
    }
}

        audio.sound(assets.get('se_pon')); //この一行

すぺしゃるさんくす

https://sbfl.net/