javascript - オーディオからの JavaScript による波形の視覚化

Question

JavaScript を使用して、オーディオ ファイルの波形を表示しようとしていますが、開始方法もわかりません。Audio Data APIを見つけましたが、ほとんどのオーディオ用語に慣れておらず、提供されているものや操作方法がよくわかりません。JavaScript で波形の例を見つけましたが、複雑すぎて何が起こっているのか理解できません。それでは私の質問は、JavaScript を使用してキャンバス上に曲の波形を作成する方法と、その背後にあるプロセスとは正確には何ですか?

Answer 1

これが私の本（HTML5マルチメディア：開発と設計）からのサンプルコードで、まさにそれを実行します。オーディオ波形。Mozilla AudioDataAPIを使用します。

このコードは、オーディオデータのスナップショットを取得し、それを使用してキャンバスに描画するだけです。

Answer 2

これは、BBC の R&D チームの記事で、2 つの JS ライブラリなどを構築するために、まさにそれをどのように行ったかを示しています。結果はすべて公開されており、かなり良いようです。

すべてのユーザーのブラウザーでサポートされているかどうかわからない Audio Data API を使用するよりも、サーバー側で波形データを生成し (BBC チームはそれを行うための C++ アプリを作成しました)、次に少なくとも、クライアント側の表示の側面を再生の側面から分離しています。また、ピークを計算して波形をレンダリングするには、オーディオ ファイル全体がブラウザに到達する必要があることに注意してください。ストリーミング ファイル (MP3 など) を使用して、ファイルが入ってくるときにピークを計算できるかどうかはわかりません。しかし、全体的には、サーバー側でピークを一度計算してから、JSON 経由でデータを送信する方が確実に優れています (またはグラフィックをサーバー側で作成 + キャッシュします - 多数の PHP チャート ライブラリが存在するか、またはGD を使用してネイティブに実行できます)。

ブラウザーでの再生には、(Flash 以外の) 優れたオプションがいくつかあります。個人的には、コードがディスプレイから完全に分離されているため、 SoundManager 2が気に入っています。つまり、好きな (またはクライアントが望む) UI / ディスプレイを自由に作成できます。同じページに複数のプレイヤーがいる 1 つのプロジェクトで最初は困難がありましたが、堅牢で信頼できることがわかりました。彼らのサイトの例は素晴らしいものではありませんが (imho)、想像力を働かせれば素晴らしいことができます。SM2 には、アンティーク ブラウザ用のオプションの Flash フォールバック オプションもあります。

Answer 3

私はまさにそれを Web オーディオ API で行い、wavesurfer というプロジェクトを使用しました。 http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html

それが行うことは、小さな長方形を描画し、オーディオ バッファーを使用して各長方形の高さを決定することです。また、ウェーブサーファーでは、スペースバーを使用して再生および一時停止し、波をクリックしてその時点で再生を開始することもできます。

更新: この POC Web サイトはもう存在しません。

私が作成したものを確認するには、このサイトにアクセスしてください: 更新: この POC Web サイトは存在しません。これは google chrome ブラウザとおそらく safari でのみ機能しますが、それについてはわかりません。

さらに情報が必要な場合はお知らせください。

Answer 4

まだ十分にサポートされていませんが、この Firefox トーン ジェネレーターを見てください。