enchant.jsのサウンドを使用する際にXampp環境だとエラーが出てしまう

Question

Chromeのセキュリティ上の問題でローカルだとサウンドがエラーになって動かないと思ったので、似たような症状で解決した事例を探しました。
こちらで問題なくローカル上だと音が出るようになったのですが、Xampp環境では、以前と変わらずエラーを吐いたままの状態です。
解決策を教えて下さい。よろしくおねがいします。

参考にしたurl
https://teratail.com/questions/252196

// enchant.js本体やクラスをエクスポートする
enchant();

// ページが読み込まれたときに実行される関数
window.onload = function() {

  // コアオブジェクトを作成する
  core = new Core(320, 320);
  
  // 1秒あたりの画面の描画回数を設定する(省略時は「30」)
  core.fps = 16;
  
  // ゲームで使用する画像ファイル、サウンドファイルを読み込む
  // mp3形式のサウンドファイルはプリロードする(FireFox,Safari対応)
  core.preload('betty.png', 'flowers.png', 'one_0.mp3');

  // BGM用のサウンドファイルを読み込む
  core.bgm = Sound.load('one_0.mp3');
  // SE用のサウンドファイルを読み込む
  core.se = Sound.load('Ready.wav');
  
 
  // ファイルのプリロードが完了したときに実行される関数
  core.onload = function() {
 
    // BGMのボリュームを設定する(0~1)
    core.bgm.volume = 0.5;
    // BGMを再生する
    core.bgm.play();
    // SEを再生する
    core.se.play();

    // サーフィスを作成する
    var image = new Surface(320, 320);
    // 「flowers.png」の(0, 96)の位置から幅「126」ピクセル、高さ「64」ピクセルの領域を
    // サーフィスの(64, 64)の位置に幅「126」ピクセル、高さ「64」ピクセルで描画する
    image.draw(core.assets['flowers.png'], 0, 96, 126, 64, 64, 64, 126, 64);
    
    // サーフィスを表示するためのスプライトを作成する
    var bg = new Sprite(320, 320);
    // スプライトにサーフィスを設定する
    bg.image = image;
    
    core.rootScene.addChild(bg);
   
    // スプライトを作成する
    var player = new Sprite(48, 48);
    // スプライトで表示する画像を設定する
    player.image = core.assets['betty.png'];
    // 表示するフレームの番号を設定する
    player.frame = 3;
    // 表示位置のx座標を設定する
    player.x = 120;
    // 表示位置のy座標を設定する
    player.y = 50;
    
    // フレーム数をカウントするプロパティを追加する
    player.tick = 0;

    // rootSceneにスプライトを追加する
    core.rootScene.addChild(player);

    // 「enterframe」イベントが発生したときに実行するリスナを登録する
    player.addEventListener('enterframe', function(e) {

      // 左ボタンが押されたら、スプライトをx方向に「-4」ピクセル移動する
      if (core.input.left) {
        this.x -= 4;
        // スプライトのフレーム番号を切り替えてアニメーション表示する
        this.frame = this.tick % 4 * 4 + 1;
        // フレーム数をインクリメントする
        this.tick ++;
      }

      // 右ボタンが押されたら、スプライトをx方向に「4」ピクセル移動する
      if (core.input.right) {
        this.x += 4;
        this.frame = this.tick % 4 * 4 + 3;
        this.tick ++;
      }

      // 上ボタンが押されたら、スプライトをy方向に「-4」ピクセル移動する
      if (core.input.up) {
        this.y -= 4;
        this.frame = this.tick % 4 * 4 + 2;
        this.tick ++;
      }

      // 下ボタンが押されたら、スプライトをy方向に「4」ピクセル移動する 
      if (core.input.down) {
        this.y += 4;
        this.frame = this.tick % 4 * 4;
        this.tick ++;
      }
      
    });

    // 「touchmove」イベントが発生したときに実行するリスナを登録する
    player.addEventListener('touchmove', function(e) {
      // スプライトをタッチして移動した場所、またはドラッグした場所に移動する
      this.x = e.x - this.width / 2;
      this.y = e.y - this.height / 2;
    });

    // ラベルを作成する
    var infoLabel = new Label('enchant.js サンプル');
    // 表示位置のx座標を設定する
    infoLabel.x = 16;
    // 表示位置のy座標を設定する
    infoLabel.y = 0;
    // 文字色を設定する
    infoLabel.color = '#0000FF';
    // フォントサイズとフォントの種類を指定する
    infoLabel.font ='14px sens-serif';
    
    // rootSceneにラベルを追加する
    core.rootScene.addChild(infoLabel);


  };
  // ゲームスタート
  core.start();
}

エラーコードになります
enchant.js:5481 Uncaught TypeError: Cannot read property 'gain' of undefined
at Constructor.set [as volume] (enchant.js:5886)
at Constructor.core.onload (game.js:27)
at Constructor.dispatchEvent (enchant.js:916)
at Constructor.<anonymous> (enchant.js:5085)
at Constructor.dispatchEvent (enchant.js:922)
at Constructor._succ (enchant.js:1465)
at Constructor.call (enchant.js:5458)
at Constructor._succ (enchant.js:5555)
at Constructor.call (enchant.js:5458)
at Constructor._callback (enchant.js:1384)

Answer 1

ローカル上だと音が出るようになったのですが、Xampp環境では、以前と変わらずエラーを吐いたまま

以前とは異なるエラーではないでしょうか？

enchant.js-builds-master/build/enchant.js の 5949行 に条件 (三項) 演算子 が記述されています。

enchant.Sound = window.AudioContext && enchant.ENV.USE_WEBAUDIO
   ? enchant.WebAudioSound
   : enchant.DOMSound;

（window.AudioContext は、5763行に示される通り enchant.js 独自のクロスブラウザ対策です）

USE_WEBAUDIO をエディタで検索すると 473 行で定義されています。

enchant.ENV = { // L330

  USE_WEBAUDIO: (function() { // L473
    return location.protocol !== 'file:';
  }()),

}; // L487

enchant.ENV.USE_WEBAUDIO の実装から、音声は以下の実装で再生されます。

• ローカル (file:)で動かすと、enchant.DOMSound (L5576-5761)
• XAMPP （http:）では enchant.WebAudioSound （L5768-5947）

共に200行程度のenchant.DOMSoundとenchant.WebAudioSoundを、MDNの解説を参考に紐解いてゆくのが、音声再生の仕組みの学び方と言えます。

---

rururu3 さんの回答（3つ目のコード）が enchant.js L5797 に該当し、play() が実行される(L5877-5811)まで this._gain がオブジェクトを持たないため、エラーで止まる状況です。

述べられている感想

playしないとボリューム設定できないのもおかしい

には同感でした。

解決策

おそらく Issue といっても良い状況ですので、enchant.js L5776 以下の「enchant.WebAudioSound の初期化時、_gain プロパティに相応のオブジェクトを持たせておく」方法を思いつきます。

    initialize: function() { // enchant.js L5776
        if (!window.AudioContext) {
            throw new Error("This browser does not support WebAudio API.");
        }
        enchant.EventTarget.call(this);
        if (!enchant.WebAudioSound.audioContext) {
          enchant.WebAudioSound.audioContext = new window.AudioContext();
          enchant.WebAudioSound.destination = enchant.WebAudioSound.audioContext.destination;
        }
        this.context = enchant.WebAudioSound.audioContext;
+       if (this.context.createGain != null) {
+           this._gain = this.context.createGain();
+       } else {
+           this._gain = this.context.createGainNode();
+       }

        this.src = this.context.createBufferSource();
        this.buffer = null;
        this._volume = 1;
        this._currentTime = 0;
        this._state = 0;
        this.connectTarget = enchant.WebAudioSound.destination;
    },

メンテナンスされてないなら、自分でメンテするという発想です。
（私はソースを読んだだけで試していませんが、駄目なら戻せばいいので、試してみては？）。

---

enchant.js は腰を据えて読んだことがなかったのですが、上記のようなコードの読み方/直し方をいろいろ試してみると、ゲームエンジンの特徴をより深く学べると思います。

Comments

[web11]

回答ありがとうございます。そちらのコードで_gainのエラーは解除されたのですが今度はdurationがnillで動かないと出てしまいました。
BGMを再生するcore.bgm.play();が動かないようです

[AkitoshiManabe]

this.buffer が null で duration を読めないのは、enchant.WebAudioSound オブジェクトが初期値のまま、音声ファイルを読めていないのが原因かもしれません（本来、L5937 でbuffer は適用されます）。
XAMPP で実行したブラウザの開発者コンソール（Network タブ）でBGM用の音声ファイルが正しく読めているか確認してみましょう。「戻せばいい」ので、console.log() を書き込んで処理を追いかけるのも仕組みの理解につながりますよ。

[web11]

ありがとうございます。
Network タブで確認した所そもそも、読み込まれていませんでした。
なので根本的な解決では無いかもしれませんが、Sound.loadとしていた所は削除してassetsで直接読み込みにすると動くようになりました。

```javascript
core.assets['one_0.mp3'].volume = 0.4;
core.assets['one_0.mp3'].play();
core.assets['Ready.wav'].play();
//音声ファイルは全てプリロード
```
もしくは、enchant.jsはWebAudioSoundがなければDOMSoundが動くようになっているのでようなので対応していないieでは動く事を確認しました。
なのでSound.lodとしている所、DOMSound指定にすると一応は動くようになるようです。
(違いはまだ、良くわかってませんが...)

```javascript
core.bgm = DOMSound.load('one_0.mp3');
core.se = DOMSound.load('Ready.wav');
```

[web11]

assetsで直接読み込んだ場合はDOMSoundが使用されているのかどうかがちょっとよくわかりません。
こちら分かりますでしょうか？
(多分、assetsで直接読み込んだ場合だとthis._gainの所を直さないとvolumeがエラーが出てしまうのでWebAudioSoundが使われているのかなと思うのですが)

[AkitoshiManabe]

> assetsで直接読み込んだ場合
お察しの通り、WebAudioSoundですね（assetsでエディタ検索：core.preload()>Sound.load() のような順になり、回答通り、プロトコルで切り分け）。enchant.js のコードは「読めている」印象です。

[web11]

ありがとうございます。丁寧な解説で大変助かりました。
ベストアンサーに選ばせていただきます。

Answer 2

    // BGMのボリュームを設定する(0~1)
    core.bgm.volume = 0.5;

ここの代入時にエラー出てるようで、ソース追っかけると

            volume = Math.max(0, Math.min(1, volume));
            this._volume = volume;
            if (this.src) {
                this._gain.gain.value = volume;
            }

ここのthis._gainがundefinedなのが原因で(this.srcに値がある)
作られるのが

    play: function(dup) {
        if (this._state === 1 && !dup) {
            this.src.disconnect();
        }
        if (this._state !== 2) {
            this._currentTime = 0;
        }
        var offset = this._currentTime;
        var actx = this.context;
        this.src = actx.createBufferSource();
        if (actx.createGain != null) {
            this._gain = actx.createGain();
        } else {
            this._gain = actx.createGainNode();
        }

play関数時なのでplayやってから設定するといいのかな。

もしくはcore.bgm._volumeに代入するか(まああまりやってはいけないんだろうけど、playしないとボリューム設定できないのもおかしいし、直接代入してもいい気がする)