async/awaitで取得した値を使いたい

Question

window.AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();

export async function setupSample(key_list) {
    let return_list = []
    for (let i = 0; i < key_list.length; i++) {
        const target = document.querySelector(`audio[data-key="${key_list[i]}"]`).getAttribute('src')
        const response = await fetch(target);
        const arrayBuffer = await response.arrayBuffer();
        // Web Audio APIで使える形式に変換
        return_list.push(await ctx.decodeAudioData(arrayBuffer))
    }
    return return_list;
}
let list = ["c4","c5"]
let a = setupSample(list)
console.log(a)

ピアノの鍵盤の音をページ読み込み時にWeb Audio APIで使える形式に変換した物をリスト入れて返したいのですが、返ってくる値がPromise {<pending>}となってしまいどうやって取り出していいかわかりません…

どうすれば普通のリストとして返ってくるでしょうか？

Comments

[int32_t]

return_list の要素が push 時に await しているのに Promiseになってしまう、という状況で合ってますか?

[tsu56569]

すみませんそんなに詳しくないのでわからないのですが、関数内でのreturn_listの最終結果を見てみると、[AudioBuffer, AudioBuffer]と、想定通りリストになっているのですが、実行して返ってくる値が入る変数aがPromiseになっているという事なのですが、説明あってるでしょうか？

[int32_t]

ああなるほど、a の問題ですね。回答書きます。

Answer 1

let a = setupSample(list);
console.log(a);

setupSample() は async 関数ですから、その結果を得るためには Promise の解決をするか await で待つ必要があります。await で待つ場合は、待つコードも async 関数の中である必要があるので、以下のようにします。

async function foo() {
  let list = ["c4","c5"]
  let a = await setupSample(list)
  console.log(a)
}
foo();

Comments

[tsu56569]

回答ありがとうございます、多分私の質問が良くなかったかと思います。
aはこの関数内だけではなく、別の関数で使いたくて、そのためにリストの形で取得したいのですが、そういった方法はあるのでしょうか？

[int32_t]

aがローカル変数である必要はありません。グローバルにしてもよいし、別の関数に渡してもよいです。

Answer 2

返ってくる値がPromise {<pending>}となってしまいどうやって取り出していいかわかりません…

ブラウザJavaScriptで一度非同期操作に入った場合、その値を同期的に得る方法はありません。

得たPromiseからさらにthenをつなぐ、awaitで受ける、などをして中身を使うほかありません。

Comments

[tsu56569]

無いんですね…ということは、ページ読み込み時に一気に変換して、変換と再生を分けたかったんですが、難しそうですね