一般的な波形があるとユーザーにとって混乱しすぎますか？
現在、オンラインラジオの再設計に取り組んでいます。コンテンツが少ないので、ホームページの主役をプレイヤーにすることにしました。デザイン自体が明確で有益であることを望みます。ページを見ると、ストリームが再生中か一時停止中かを簡単に理解できます。そのために、ストリームの現在の状態を反映する波形を表示することを計画していました。オーディオがまだ直線である場合は、オーディオが再生されているかどうかがはっきりします。オーディオがない場合は再生されます。私はそれを次のように見せたかったです：
ただし、HTML（5）だけを使用してストリーミングメディアでこのようなことを行うことは技術的に不可能であることがわかります。つまり、ストリームからデータを取得して波形を作成することは不可能です。波形のアイデアが本当に好きだったので、汎用の波形を表示することにしました。実際のオーディオストリームの状態は反映されませんが、ラジオが再生されているか一時停止されているかをユーザーに知らせます。ただし、プレーヤー自体が一時停止されていないため、ストリームがサイレントで波形が動いている場合、混乱が生じる可能性があります。
わかりにくいので、一般的な波形を使用する必要があるかどうかを質問します。画面に再生または一時停止のアイコンを常に表示する以外に、目的を達成するための他の良い方法はありますか？
これは様式化された波形で完全に可能になると思います。これは実在しないように注意深く設計されています。形状が少し漫画のようで単純化されていて、動きがかなり規則的である場合、誰もが混乱することはないと思います。
また、混乱した場合の結果は、この場合はそれほど重要ではありません。ユーザーが波形を見て、最初にそれが再生されている実際の波形だと思った場合、これはどのような害をもたらしますか？とにかく、プロのオーディオの世界以外では、波形は見た目が悪くなる傾向があります。
実際の波形と区別するためにスタイルを設定する必要があると思いますが、たまに人がそれを誤解しても、大したことにはなりません。したがって、これがスタイル的にあなたのサイトに最適であるなら、私はそれに行くと言います。
アニメーションインジケータが重要な場合のその他のオプション：
- 鼓動するスピーカー。
- ある種のアニメーション化された円/ループ。
ただし、再生/一時停止で十分だと思います。
一般的な波形の問題は、何もないとき（音声が無音部分を再生しているとき）に「動いて」音を示し、この切断が（少なくとも私にとっては）面倒になることだと思います。回転するレコードのようなものが良いでしょう。私は実際に数年前にこの問題に直面しました。オーディオが再生されていることをはっきりと示すインジケーターが必要でしたが、物事をコンパクトに保ちたいので、再生ボタンの矢印を回転させてから、再生モードにしました。
http://vijayanderson.com/projects/quartet-trio/
非常に単純な技術：再生時に回転するGIFの背景を持つクラスを設定するだけです。
あなたは多かれ少なかれ最初の質問に答えました。ユーザーを混乱させないでください。ストリーミングの品質と状態を示す様式化された図があることに気付くかもしれませんが、実際にはそうではないように見せることは避けてください。
ユーザーは実際に何を望んでいますか？最初の数秒間は、見た目がかっこいい波形が楽しいと思います。しかし、それが使用されている場合、すぐに関心が薄れます。 （利害関係者中心またはユーザー中心）
- シンプルでクリーンで小さなインターフェースは、強力なユーザー要件になる可能性があります
- おそらく、大きな便利なボタンのあるレイアウトをもっとコンパクトなものに折りたたませる
- 次の情報やリンクが必要な場合があります：
- 何をプレイしているか
- 彼らが接続されているチャネル
- 代替（類似チャネル）
はい、そうです。波長は、音の振幅（ラウドネス）の標準的な分母であり、ストリームのアクティビティを表すために使用すると、大多数のユーザーを間違いなく混乱させます。
代わりに使用するより良いオプションは、ケースの標準的な視覚化である同じデータを表示する棒グラフまたはブロック棒グラフです。
Vypr VPNおよびOS Xアクティビティモニター。
D3を使用して、このようなコンポーネントを構築できます。 https://github.com/mbostock/d3/releases
ただし、HTML（5）だけを使用してストリーミングメディアでこのようなことを行うことは技術的に不可能であることがわかります。つまり、ストリームからデータを取得して波形を作成することは不可能です。
純粋なHTML5メディアプレーヤーでデータを取得することは技術的に不可能ではありません。 Web Audio APIでは、再生中のオーディオを取得できます<audio>要素を使用して MediaElementAudioSourceNode を送信し、データを AnalyserNode に送信します。これにより、オーディオデータのスニペットを取得しながら、通常のオーディオ出力で再生することができます。
同じノードを使用して、「グラフィックイコライザー」スタイルの表示のために、周波数領域のサンプルを取得することもできます。
音楽にはまだ完全な沈黙の期間がある可能性があるため、このアプローチを選択した場合（私がそれが良いアイデアであるかどうかについては言及していませんが、それが可能であるということだけです）、「再生しているが静か」と「一時停止しました。」 （音楽がかなり長い時間無音になることはまれであるため、この区別は一目で明確である必要はありません。）たとえば、次のように一時停止/停止すると、波形表示領域を空白にすることができます。沈黙の波形である直線を持つのとは対照的です。