4

<audio>タグからオーディオを表現するために、ある種のイコライザー/ビジュアライザーを作成することに本当に興味があります。これまでのところ、オーディオを視覚化する非常に凝った実験をいくつか見つけることができました。それらのほとんどは webgl に基づいており、chrome でのみ動作します。私が達成したくないことは、それよりもはるかに単純です。それは基本的な 1 色の 2D ビジュアライザーであり、派手なものは何もありません。

これは、私が達成したくないことと非常によく似ています (中央にある種の画像と側面に沿って視覚化された、非常に基本的なものですが、私はそれが好きです ;) )
http://www.youtube.com/watch?v =yLRyAz0WFnw

私がそれを機能させたい方法は、オーディオタグの src に基づいて視覚化をレンダリング/作成することです。たとえば、

<audio id="test" 
src="http://api.soundcloud.com/tracks/78404260/stream?client_id=7a17129ba9cd5fff34f847e3539829b7">
</audio>
<!-- Some example from sound cloud -->

特定の ID (この場合は "test") を持つ audio タグから src を取得するページに canvas タグがあります。この単純なものに WebGl を使用する必要はないと思います。代わりにプレーン キャンバスを使用したいので、html5 をサポートするほとんどのブラウザーで動作します。私は JavaScript の初心者なので、どこから始めればよいかわかりません。以前に見つけたいくつかの例について言及しましたが、それらのソースを調べてもまったく役に立ちませんでした。複雑なことは何もしていないエレガントなソリューションを探しています。stackoverflow は完全なコードを要求するためのものではないことを理解しています。たとえば、オーディオとやり取りする方法を説明したり、再生中のものに応じてこれらの「イコライザー スティック」のサイズを変更したりする方法を説明していただければ幸いです ;) ) (jQuery の提案も歓迎します)

4

3 に答える 3

4

オーディオを使用するのではなく、WebAudio Api を使用する必要があります。
Chrome、Safari、Firefox、Edge では処理されますが、IE では処理されません。
(ここを参照してください: http://caniuse.com/audio-api )
Safari (webkit) では webaudio がプレフィックスとして付けられていることに注意してください。

よりグローバルなリーチが必要な場合は、Flash フォールバックを備えたすべてのブラウザーで動作するため、SoundManager2 が (可能なものの 1 つとして) ニーズに応える可能性があります:
http://www.schillmania.com/projects/soundmanager2/

WebAudio を使用して、この記事では、任意のトラックから非常に簡単な方法で周波数分析を取得する方法について説明します: http://joshondesign.com/p/books/canvasdeepdive/chapter12.html

于 2013-03-19T22:23:15.060 に答える
1

これのローレバー部分を行うdancer.jsと呼ばれるライブラリが登場しました（そしてそれはいくつかのキラーデモを持っています）。

私のアプローチはあなたが要求したようにアニメーション化されていませんが、これを行う方法（デモ、「すべての曲を再生」を押す）は、曲のアップロード時に波形を事前に生成し、CSSを使用することです（background-image波形のを設定することによりdiv） 。このアプローチは驚くほどうまく機能します。

于 2013-03-19T21:09:00.627 に答える
0

クロスプラットフォームの音楽イコライザーを作成しました。イコライザーがオンのときにオーディオ ファイルを再生できます。チュートリアルとデモを参照し、http://www.bestofjqueryplugins.com/plugins.php?name=からソース コードをダウンロードできます。 jquery-music-イコライザー

于 2013-07-13T17:54:20.700 に答える