YandexのYuri GagarinとWeb Audio API

宇宙飛行士の日おめでとうございます!

ヤンデックスはユーリ・ガガーリンの飛行のインタラクティブな録音を投稿しました。 開始するには、 https://www.yandex.ru/を開き、検索フィールドの左側の画像をクリックします。 この美しいページが開きます:

画像

ページへの直接リンク

それが何で構成されるかを考えてください:

-スクリプトコードはここにあります

ご覧のとおり、主要部分は、ページ上部のテキストに表示される交渉のトランスクリプトから構成されています。

Yu.Gagarinの写真には、イコライザーのグラフィック表現が表示されます。 コードから判断すると、画像はAnalyserNodeを使用して作成されます。AnalyserNodeはオーディオストリームを受信し、 FFTテーブルを生成します。

別のサウンドファイルがAudioBufferSourceNodeにロードされ、スケールに沿って移動すると接続されます(または、マウスで特定のマークを突くことができます)。

おそらく、IEを除き、すべてがデスクトップとモバイルブラウザーの両方で動作するはずです。

Web Audioがなければ、このような結論を出し、音を視覚化することは非常に困難です。

PS

FireFoxでは、開発者ツールにはWeb Audioノードを表示するための個別のタブがあります。

画像

Source: https://habr.com/ru/post/J281420/


All Articles