WebAudioで読み込んだ音声ファイルから立体音響を作ろうとしています。Three.jsと関連づけてこちらに3Dテキストが音を出しながら迫りくるようにしたいです。

発生している問題・エラーメッセージ

数秒のwavファイルを読みこんでやろうとしたら、音がしません。

（なし）

下記該当のソースコードで

JavaScript
1            fetchAsAudioBuffer(ctx, 'Myaudio.wav', function(audioBuffer) {
2              instrument = audioBuffer;
3              console.log(instrument);
4            });

で関数の外へaudioBufferのデータを渡す方法がわかりません。

該当のソースコード

JavaScript
1'use strict';
2
3{
4  let scene;
5  let text;
6  let light;
7  let ambient;
8  let camera;
9  let renderer;
10  let controls;
11  let loader;
12  let textPositionZ = 0;
13  const stage = document.getElementById('stage');
14  const fontSize = 4;
15
16
17// Detect if the audio context is supported.
18  window.AudioContext = (
19    window.AudioContext ||
20    window.webkitAudioContext ||
21    null
22  );
23
24  if (!AudioContext) {
25    throw new Error("AudioContext not supported!");
26  }
27
28
29
30    function onResize() {
31      const width = window.innerWidth;
32      const height = window.innerHeight-30;
33
34      // rendererのサイズ調整
35      renderer.setPixelRatio(window.devicePixelRatio);
36      renderer.setSize(width, height);
37
38      // cameraのアスペクト比をただす
39      camera.aspect = width / height;
40      camera.updateProjectionMatrix();
41    }
42
43
44
45    // scene
46      scene = new THREE.Scene();
47
48    // mesh
49      loader = new THREE.FontLoader();
50      loader.load('js/helvetiker_regular.typeface.json', function(font) {
51        createText(font);
52      });
53    function createText(font) {
54      text = new THREE.Mesh(
55        new THREE.TextGeometry('https://URL.com', {
56          font: font,
57          size: fontSize,
58          height: 0.001
59        }),
60        new THREE.MeshLambertMaterial({ color: 0xff5836, side: THREE.DoubleSide })
61      );
62      text.position.set(0, 0, 90);
63      scene.add(text);
64      // return text;
65    }
66
67    // light
68      light = new THREE.DirectionalLight(0xffffff, 1);
69      light.position.set(0, 0, 30);
70      scene.add(light);
71      ambient = new THREE.AmbientLight(0x404040);
72      scene.add(ambient);
73
74    // camera
75      camera = new THREE.PerspectiveCamera(135, window.innerWidth / window.innerHeight-30, 0.01, 130);
76      camera.position.set(0, 0, 220);
77      camera.lookAt(scene.position);
78
79    // controls
80        stage.addEventListener('click', () => {
81          if (textPositionZ === 0) {
82            textPositionZ = 1;
83          }else {
84            textPositionZ = 0;
85          }
86          // WebAudio
87            const ctx = new AudioContext();
88            const panner = ctx.createPanner();
89            const gain = ctx.createGain();
90            const sound = {};
91            let instrument; // 読み込んだAudioBufferを格納するやつ
92            fetchAsAudioBuffer(ctx, 'Myaudio.wav', function(audioBuffer) {
93              instrument = audioBuffer;
94              console.log(instrument); // <- 中身あり
95            });
96            sound.volume = ctx.createGain();
97            sound.panner = ctx.createPanner();
98
99            synth(ctx, ctx.currentTime, instrument, sound.volume);
100            sound.volume.connect(sound.panner);
101            sound.panner.connect(gain);
102            gain.connect(ctx.destination);
103
104            function fetchAsAudioBuffer(audioContext, url, callback) {
105              const xhr = new XMLHttpRequest();
106
107              xhr.open('GET', url, true);
108              xhr.responseType = 'arraybuffer';  // ArrayBuffer指定
109              xhr.onload = function() {
110                console.log(xhr.response) // <- 中身あり
111                if (xhr.response) {
112                  audioContext.decodeAudioData(xhr.response).then(callback); 
113                }
114              };
115
116              xhr.send();
117            }
118
119            function synth(audioContext, t0, audioBuffer, nextNode) {
120              const bufferSource = audioContext.createBufferSource();
121              console.log(audioBuffer); //　<- **undefined**!
122              bufferSource.buffer = audioBuffer;
123              bufferSource.start(t0);
124              bufferSource.loop = true;
125              bufferSource.connect(nextNode);
126            }
127
128            function render() {
129              requestAnimationFrame(render);
130              text.position.z += textPositionZ;
131              text.updateMatrixWorld();
132              camera.updateMatrixWorld();
133              const newTx = new THREE.Vector3();
134              const cam = new THREE.Vector3();
135              newTx.setFromMatrixPosition(text.matrixWorld);
136              cam.setFromMatrixPosition(camera.matrixWorld);
137
138              sound.panner.setPosition(newTx.x, newTx.y, newTx.z);
139              ctx.listener.setPosition(cam.x, cam.y, cam.z);
140              renderer.render(scene, camera);
141            }
142
143            render();
144        });
145
146    // renderer
147      renderer = new THREE.WebGLRenderer({ antialias: true });
148      onResize();
149      window.addEventListener('resize', onResize);
150      renderer.setClearColor(0xffffff);
151      stage.appendChild(renderer.domElement);
152
153}

試したこと

音声ファイルの長さを1秒、7秒に変更　→　同じ
音源をaudioContext.createOscillator()で作ったsin波に変更　→　立体的に音が鳴る

補足情報（FW/ツールのバージョンなど）

ローカル開発環境の構築[macOS編]
の通りに構築した環境上で

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
5  <style>
6    body {
7    margin: 0;
8    overflow: hidden;
9    }
10
11  </style>
12  <title>Voice</title>
13</head>
14<body>
15  <div id="stage">Click Please!</div>
16  <script src="js/three.min.js"></script>
17  <script src="js/OrbitControls.js"></script>
18  <script>（該当のソースコード）</script>
19</body>
20</html>
21

を実行
音声ファイルは上記コードのファイルと同じ階層に配置

行動規範の内容に同意します

回答1件

ベストアンサー

#原因

変数instrumentにAudioBufferのオブジェクトが入る想定となっていますが、この変数instrumentにAudioBufferのオブジェクトが代入されるタイミングは、fetchAsAudioBuffer関数による非同期のコールバック関数が呼ばれたあとになります。

そのため、fetchAsAudioBuffer関数を呼び出した直後では、変数instrumentにはAudioBufferオブジェクトは代入されておらず、内容はundefinedのままです。この状態のまま、fetchAsAudioBuffer関数よりあとのプログラムの実行が継続されます。

これにより、

js
1synth(ctx, ctx.currentTime, instrument, sound.volume);

が実行されるタイミングで、synth関数の第3引数でundefinedが渡され、意図しない結果となっていると思われます。

対処方法

fetchAsAudioBuffer関数に渡しているコールバック関数が実行されるタイミングでAudioBufferが得られているので、このタイミングでsynth関数を呼び出すことで、とりあえずの対処ができそうです。

synth関数の第4引数に、AudioContext.createGain()で得られたGainNodeのオブジェクトを渡しているので、fetchAsAudioBuffer関数を呼び出す前に、GainNodeのオブジェクトを得ておく必要があります。

JavaScript
1 (略)
2  :
3const sound = {};
4let instrument;
5sound.volume = ctx.createGain(); // 先に sound.volume の GainNode を作っておく
6fetchAsAudioBuffer(ctx, 'Myaudio.wav', function(audioBuffer) {
7    instrument = audioBuffer;
8    synth(ctx, ctx.currentTime, instrument, sound.volume);
9});
10  :
11 (略)