これまで時間のGitHubレコーダー、オープンソースのライブラリ二つの新しいオーディオの可視化機能を追加し、豊かなディスプレイ多く以前の単一の動的波形より（2行下の図は、より良い最初の行はふっくら見た目よりではありません後）、書き込みAへの進捗状況のビルドテストコード関連するオーディオビジュアル・拡大が、これはそれはかなりまともに見える、次のテストのGIFショットで、テストアドレス
これらの波形の上に、周波数を計算して書かれた純粋なJSコードを表示しているブラウザは、特定の特性を使用していない、それは簡単なアンドロイド、IOSネイティブ実装に移植されたとして、他の言語に移植することができます。
FrequencyHistogramViewオーディオビジュアル・周波数ヒストグラム表示
この機能出典：frequency.histogram.view.js + lib.fft.js 12キロバイト源サイズ、オーディオビジュアル表示頻度ヒストグラム図のGIF外観上の最後の行は、異なる外観パラメータを引き出すように構成されてもよいです。
コアアルゴリズム参照Javaのオープンソースライブラリのこの拡張jmp123のコードが書かれたjmp123バージョンを0.3、私は、特別番組の音楽スペクトルには適していない音声のヒストグラム表示0-5khz主要部品、他の小さな高周波の表示領域を、最適化されました。
PCMの周波数の情報を取得するには、PCMの必要性は、それが使用する周波数領域、時間領域から変換するFFT算法高速フーリエ変換、私の中の水の深さは、ここでは純粋なJSを実装FFT内部jmp123の直接の使用の一切の綿密な研究はありませんコード実装未満の100行。我々は仮定して、OKだけ使用44100hzのサンプリングレート16位撮影PCMデータ、1024个FFT変換後のサンプリングされたデータを、出力する512个周波数情報点は、各点間の周波数間隔44100/2/512=43hz、最初のポイント中0Hz、1kHzのである1000/43番目ポイントなど最高を同定するために、上に22050hz、これらの周波数で情報量の振幅は、異なる周波数で描画することができる、または得られた分周信号は、所望の。
周波数情報を取得するFFTすることにより、我々はヒストグラムを描くことができ、すべての周波数は、列の数に応じて、我々はバンド（jmp123は、使用上、原則が何であるかを理解していなかった、内部の使用に分かれ平均非線形性のヒストグラムを描画する必要があります、より多くの人々が線形分割を使用する）と、各周波数帯域の最大値は、ボリュームへの式のボリュームを変換取る：dB=20*Math.log10(maxValue)、その後、実際の高さの描画を計算するDrawMaxHeight * dB / MaxDB、DrawMaxHeightキャンバスの最大高さ（高さ）を描き、MaxDB最大音量に等しいです20*Math.log10(0x7FFF)。
あなたが描画を終了した後に見てみたいの発明によれば、リアルタイムのデータが主導、視覚的な周波数が完了時にヒストグラム。
オーディオビジュアル波形表示WaveSurferView
この機能はソース：wavesurfer.view.js、7キロバイト源サイズ、オーディオビジュアル波形表示;第上段のGIF形式の外観図は、異なる外観パラメータを引き出すように構成されてもよいです。
名前は、外観から来るwavesurfer.js、ライン、外観オーディションで同じ音声波形の部分波形ディスプレイ上にプロットほとんど差を描画する16ビットPCMサンプルの数値描か波形簡単使用。
PCMの大きさの値は、線を引くと、それはとても複雑なロジックが存在しない、単純であるので、この進歩的な描画アニメーションのために、すべての行を毎回描画する必要がなく、唯一常に他の上のキャンバスに背を描か私たちは、その後、キャンバスを描き、表示位置に戻って移動し、アニメーションを実現するために前進し続けることができるようになり、パフォーマンスが保証されていることができます。
WaveView動的表示波形
この機能出典：waveview.js、4キロバイト源サイズ、記録波形中の動的表示、最初の行の上図のGIF外観は、異なる外観パラメータを引き出すように構成されてもよいです。
このライブラリは、視覚的な波形の最も原始的で、参照MCVoiceWaveは簡単な使用も、理解していないコード位相計算の内側に制御波形表示と最適化、間違った波形パラメータを行ったものをチューニングすることは困難であると、ライブラリにより調製しました。
言及に、この波形は今、自分の特性を持っている他のビジュアルインターフェイスに比べて、まだ非常に格好良いではありません。
使用
これらの視覚的波形、リアルタイムでPCMデータ入力を上に移動するスペクトルニーズは、入力ソースがデータ・ブロックデコードされたオーディオファイルのリアルタイム再生できるデータブロックのマイクロフォンリアルタイム記録であってもよいです。
唯一のリアルタイムのオーディオプレゼンテーションなどH5記録内部マイライブラリであるが、しかし彼らは、ソースコードブラウザ固有のものを使用していなかったので、それは、非常に簡単です、まだ他の言語に移植しました。
見直しに関連したGitHubのソースコードを見る：https://github.com/xiangyuecn/Recorder
仕上がり。