web-dev-qa-db-ja.com

RAWオーディオファイルを再生する方法

私は現在、別のデバイスが拾ったオーディオレベルを示すチャートで構成されるプロジェクトに取り組んでいます。チャートはフロートAPIを介して作成されます。チャートで時間範囲を選択し、その選択された領域にズームインするために、ズーム機能と選択機能があります。次のステップは、チャートのその領域に対応するオーディオをユーザーが聴けるようにすることです。私はオーディオファイルを共有サーバーに保存しており、すべてのファイルは個別のRAWデータファイルになっています。私はウェブページでオーディオを使用した経験がなく、現在このタスクを完了する方法に苦労しています。私が見つけた限りでは、<audio> HTMLタグは、再生用のRAWデータファイルを処理できません。私はWebオーディオAPIを調査してきましたが、それがどのように機能し、どのように実装するかについて混乱しています。

私の最初の質問は、サーバーからRAWオーディオファイルをデコードし、クライアントがリッスンできるようにHTMLページに表示する方法です。

2番目のタスクは、選択した範囲に対応するすべてのオーディオファイルを取得し、それらを1つのオーディオ出力に結合することです。たとえば、クライアントが午後1時から午後1時50分までの時間範囲を選択した場合、毎分50のRAWデータオーディオファイルにアクセスする必要があります。次に、それらを組み合わせて単一の再生サウンドを生成したいと思います。したがって、私の2番目の質問は、これをスムーズに達成する方法を誰かが知っているかどうかです。

誰かが提供してくれて助けてくれてありがとう！

javascriptaudiohtml5-audioweb-audio-apiraw-data
2
CollegeStudent

Webオーディオを使用すると少し簡単になる可能性のある代替策として、基本的に上記と同じことができますが、Audio要素を使用しないでください。必要に応じて、生のオーディオデータをfなどの浮動小数点配列に変換し、次のようにします。

_// Only need to do this once when setting up the page
let c = new AudioContext();

// Do this for each clip:
let b = new AudioBuffer({length: f.length, sampleRate: c.sampleRate});
b.copyToChannel(f, 0);
let s = new AudioBufferSourceNode(c, {buffer: b});
s.connect(c.destination);
s.start();
_

これは、Webオーディオを使用して再生を行う方法の概略図です。 AudioBuffersを再利用するように調整できます。そして、正しい時間値でs.start()を呼び出すことに注意する必要があります。しかし、これであなたが始めるのに十分であることを願っています。そうでない場合は、さらに質問してください。

0
Raymond Toy