Cachable/decodeAudioDataでAudioBufferが長くかかる

Question

Web Audio APIを使用して音楽用のカスタムWebプレーヤーを作成しようとしていますが、音声のデコードに問題があります。

AudioContext.decodeAudioData関数を使用して、バックエンドからArrayBufferとして.mp3を取り出し、デコードしています。

const resp = await fetch(url); 
    const raw = await resp.arrayBuffer(); 
    const audioBuffer = context.decodeAudioData(raw); 

AudioBufferをIndexedDBにキャッシュしようとしていますが、クローン可能ではありません。私のデバイスでは通常のmp3で約10秒かかります。かなり長いです。プリフェッチと「プリデコード」を除いて、曲間の待ち時間を長くすることを防ぐための選択肢はありますか？

AudioBuffer

Answer 1

オーディオ

の大部分のために意図されていないこのインターフェイスは、メモリ常駐オーディオアセット（ワンショット音や他の短いオーディオクリップため）を表します。そのフォーマットはノンインターリーブIEEE 32ビットリニアPCMで、公称範囲は-1→+1です。 1つまたは複数のチャネルを含むことができます。典型的には、PCMデータの長さは、かなり短く（通常、1分未満）となると予想される。。音楽サウンドトラックなどのより長いサウンドの場合は、オーディオエレメントでストリーミングを、MediaElementAudioSourceNodeでストリーミングを使用する必要があります。

（強調鉱山）

https://www.w3.org/TR/webaudio/#AudioBuffer

あなたが実際にその場でオーディオを操作する必要がある場合はMediaElementAudioSourceNodeに見たいと思うかもしれません。そうしないと、単純なオーディオ要素で十分です。