Q&A
どのようなエラーが出ますか。エラーメッセージをそのまま提示してください。
実現したいこと
名前付き引数を使ってコードを編集したいです。
https://upload0605.web.fc2.com/sample_p295_success/idx.html
音が出ます。
発生している問題・分からないこと
エラーメッセージが表示されて、ゲームが始まりません。
JavaScript
1// 名前付き引数を使ってない場合 2// 無事に作動します。 3 4// sound.js 5/** 6 * オーディオファイルをロードする 7 * @param {string} audioPath - オーディオファイルのパス 8 * @param {function} callback - ファイルのロード完了時に呼ばれるコールバック関数 9 */ 10load(audioPath, callback) { 11 12 // fetch を利用してオーディオファイルをロードする 13 fetch(audioPath) 14 .then((response) => { 15 16 // ロード完了したレスポンスから AudioBuffer 生成のためのデータを取り出す 17 return response.arrayBuffer(); 18 19 }) 20 .then((buffer) => { 21 22 // 取り出したデータから AudioBuffer を生成する 23 return this.ctx.decodeAudioData(buffer); 24 25 }) 26 .then((decodeAudio) => { 27 28 // 再利用できるようにするために AudioBuffer をプロパティに確保しておく 29 this.src = decodeAudio; 30 31 // 準備完了したのでコールバック関数を呼び出す 32 callback(); 33 34 }) 35 .catch(() => { 36 37 // なにかしらのエラーが発生した場合 38 callback('error!'); 39 40 }); 41 42} 43 44// main.js 45// 音声データを読み込み、準備完了してから初期化処理を行う 46sound.load( 47 48 'sound/explosion.mp3', 49 50 (msgErr) => { 51 52 // もしエラーが発生した場合はアラートを表示して終了する 53 if(msgErr != null) { 54 55 alert('ファイルの読み込みエラーです'); 56 return; 57 58 } 59 60 init(); // 初期化処理を行う 61 loadChk(); // インスタンスの状態を確認する 62 63 } // (msgErr) => {} 64 65); // sound.load()
JavaScript
1 2// 名前付き引数を使った場合 3// 意図した通りに作動しません。 4// sound.js 5/** 6* オーディオファイルをロードするメソッド 7* 8* @param {string } path - オーディオファイルのパス 9* @param {function} callback - ファイルのロード完了時に呼ばれるコールバック関数 10*/ 11load({path, callback}) { 12 13 // fetchを利用してオーディオファイルをロードする 14 fetch(path) 15 16 // ロード完了したレスポンスからAudioBuffer生成のためのデータを取り出す 17 .then( res => res.arrayBuffer() ) 18 .then( buf => this.ctx.decodeAudioData(bur) ) // 取り出したデータからAudioBufferを生成する 19 .then( 20 21 decodedAudio => { 22 23 this.src = decodedAudio; // 再利用できるようにするためにAudioBufferをプロパティに確保しておく 24 callback(msgErr); // 準備完了したのでコールバック関数を呼び出す 25 26 } 27 28 ) 29 .catch( 30 msgErr => callback(`error!`) // 何かしらのエラーが発生した場合 31 ); 32 33} // load({path, callback}) {} 34 35// main.js 36// 音声データを読み込み、準備完了してから初期化処理を行う 37sound.load({ 38 39 path: 'sound/explosion.mp3', 40 41 /** 42 * エラーが発生した際に実行される関数 43 * 44 * @callback 45 * @param {string} [msgErr] - エラー発生時のメッセージ 46 */ 47 callback: msgErr => { 48 49 if (msgErr != null) { // もしエラーが発生した場合はアラートを表示して終了する 50 51 alert(`ファイルの読み込みエラーです`); 52 return; 53 54 } 55 56 init(); // 初期化処理を行う 57 loadChk(); // インスタンスの状態を確認する 58 59 } // callback: msgErr => {} 60 61}); // sound.load() 62
// グラフィックスプログラミング入門のオリジナル // script.js // 音声データを読み込み、準備完了してから初期化処理を行う sound.load( './sound/explosion.mp3', (error) => { // もしエラーが発生した場合はアラートを表示して終了する if(error != null){ alert('ファイルの読み込みエラーです'); return; } // 初期化処理を行う initialize(); // インスタンスの状態を確認する loadCheck(); } // (error) => {} ); // sound.load() // sound.js /** * オーディオファイルをロードする * @param {string} audioPath - オーディオファイルのパス * @param {function} callback - ファイルのロード完了時に呼ばれるコールバック関数 */ load(audioPath, callback){ // fetch を利用してオーディオファイルをロードする fetch(audioPath) .then((response) => { // ロード完了したレスポンスから AudioBuffer 生成のためのデータを取り出す return response.arrayBuffer(); }) .then((buffer) => { // 取り出したデータから AudioBuffer を生成する return this.ctx.decodeAudioData(buffer); }) .then((decodeAudio) => { // 再利用できるようにするために AudioBuffer をプロパティに確保しておく this.source = decodeAudio; // 準備完了したのでコールバック関数を呼び出す callback(); }) .catch(() => { // なにかしらのエラーが発生した場合 callback('error!'); }); }
// 失敗例 // sound.js load({path, callback}) { // fetchを利用してオーディオファイルをロードする fetch(path) // ロード完了したレスポンスからAudioBuffer生成のためのデータを取り出す .then( res => res.arrayBuffer() ) .then( buf => this.ctx.decodeAudioData(bur) ) // 取り出したデータからAudioBufferを生成する .then( decodedAudio => { this.src = decodedAudio; // 再利用できるようにするためにAudioBufferをプロパティに確保しておく callback({msgErr: null}); // 準備完了したのでコールバック関数を呼び出す } ) .catch( () => callback({msgErr: `error!`}) // 何かしらのエラーが発生した場合 ); } // load({path, callback}) {} // main.js sound.load({ path: 'sound/explosion.mp3', /** * エラーが発生した際に実行される関数 * * @callback * @param {string} msgErr - エラー発生時のメッセージ */ callback: ({msgErr}) => { if (msgErr !== null) { // もしエラーが発生した場合はアラートを表示して終了する alert(`ファイルの読み込みエラーです`); return; } init(); // 初期化処理を行う loadChk(); // インスタンスの状態を確認する } // callback: msgErr => {} }); // sound.load()
該当のソースコード
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
「わからないことや発生している問題を教えてください*」と同じ。
補足
int32_t様
返信ありがとうございます。
「ファイルの読み込みエラーです」と表示されます。
下のコード 51番目 「alert(`ファイルの読み込みエラーです`);」が実行されます。
回答3件
0
ベストアンサー
typoでは？.then( buf => this.ctx.decodeAudioData(bur) )→.then( buf => this.ctx.decodeAudioData(buf) )
投稿2025/07/01 23:51
総合スコア37481
Lhankor_Mhy様
ご指摘の通り、スペルミスでした。
長時間作業を続けていたせいか、こんな初歩的なミスに気づかなかった自分が情けないです。
すごく困っていたので本当に本当にありがとうございます。
0
上のコードと下のコードで同じ動作をさせたいなら、下のコード24行目の
js
1 callback(msgErr); // 準備完了したのでコールバック関数を呼び出す
は、
js
1 callback(); // 準備完了したのでコールバック関数を呼び出す
でしょうか。
現状の下のコードだと、msgErrが未定義の変数で例外が発生し、29-30行目のcatch() で例外が捕捉されて、"callback(error!)" が呼ばれるように見えます。
投稿2025/07/01 14:37
総合スコア21933
int32_t様
返信ありがとうございます。
「グラフィックスプログラミング入門」という専門書のコードを自分なりに編集を加えて勉強しています。
オリジナルのコードも追記しました。
作動原理はご指摘の通りだと思います。
「callback(msgErr); 」を「callback(); 」に変えてみましたが、やはりエラーメッセージが出てしまいます。
そもそも、どんなエラーが発生したのかわからないようになっているので、
.catch(
err=> callback({msgErr: err.message});
);
if (msgErr !== null) { // もしエラーが発生した場合はアラートを表示して終了する
alert(`ファイルの読み込みエラーです: ${msgErr}`);
のようにして詳細が表示されるようにするのがオススメです。
int32_t様
アドバイスありがとうございます。
エラーを検証して根本的な原因を探索して行くのですね。
勉強になります。
0
名前付き引数でコールバックを渡す場合、呼び出し側と受け取り側の構文が一致していないとエラーになります。load({ path, callback }) のように受け取るなら、呼び出しも load({ path: '...', callback: fn }) と正しく記述する必要があります。
投稿2025/07/02 09:58
総合スコア2
あなたの回答
tips
プレビュー
