This time to GitHub Recorder open source library added two new audio visualization functions, much richer than the previous single dynamic waveform display (the last two lines below is not more than the first line looks plump); While the iron is hot to write an audio visualization related extension test code, the following is a screenshot of the test Gif, it looks ok, test address

The above waveform, frequency calculation and display are written by pure JS code, does not use browser proprietary features, so it can be easily transplanted to other languages, such as Android, IOS native implementation.

FrequencyHistogramView Audio visual frequency histogram display

This function source: frequency histogram. View. Js + lib. FFT. Js source 12 KB size, audio visual frequency histogram display; Appearance is the last line of the Gif image above. You can draw different appearance by setting parameters.

This extended core algorithm is written with reference to the code of JMP123, jMP123 version 0.3; I specially optimized the histogram to mainly display 0-5khz speech, while other high-frequency display areas are small and not suitable for displaying music spectrum.

To obtain PCM frequency information, it is necessary to convert PCM from the time domain to the frequency domain. Here, FFT algorithm fast Fourier transform is used, which is very deep and I will not go into the in-depth study. Here, FFT is directly used in JMP123 to achieve, less than 100 lines of pure JS code. Assuming that there is 16-bit PCM data with 44100 Hz sampling rate, 1024 sampled data will output 512 frequency information points after FFT transformation. The frequency interval between each point is 44100/2/512= 43Hz. 0Hz is the first point, 1khz is the 1000/43 point. And so on, the highest can be identified to 22050Hz, with these frequency point information can draw the volume amplitude of different frequencies, or obtain the required frequency points signal.

Via FFT frequency information, we can draw the histogram, will all frequency points according to the histogram pillar quantity we need to draw an average divided into spectrum (jmp123 using nonlinear classification inside, didn’t understand what is the principle of using more use of linear classification), take maximum translates into the volume in each frequency band, the volume calculation formula: DB =20* math.log10 (maxValue), then calculate the actual drawing height: DrawMaxHeight * dB/MaxDB, DrawMaxHeight is your maximum drawing height, MaxDB is the maximum volume equals 20* math.log10 (0x7FFF).

Once you’ve drawn it the way you want it, a visual frequency histogram is created, driven by real-time data.

WaveSurferView Audio visual waveform display

This function source code: Wavesurfer.view.js, 7KB size source code, audio visualization waveform display; The appearance is the second line of the Gif image above, and can be drawn into different appearance by parameter configuration.

Its appearance and name come from wavesurfer.js. The drawing of this waveform is directly and simply using the sampling value of 16-bit PCM to draw lines.

Since it is straightforward to draw lines with PCM values, there is no complicated logic; For drawing this kind of forward animation, there is no need to draw all the lines every time, just to another canvas constantly in the back can be drawn, and then draw back to the display of the canvas and move the position, you can achieve continuous forward animation, and performance is guaranteed.

WaveView Dynamic display waveforms

This function source: waveview.js, 4KB size source, dynamic display waveform when recording; The appearance is the first line of the Gif image. You can draw different appearance by setting parameters.

This is the library of the most original a visual waveform, reference MCVoiceWave library prepared, simple use can also be used, is the code inside the phase calculation is not quite understand, waveform display is difficult to control and optimize, fine tuning the parameters of the waveform is chaotic.

Not to mention, this waveform is still very durable, compared to other visual interface has its own characteristics.

use

These visualized waveforms and spectra need real-time input of PCM data to move. The input source can be microphone real-time recording data block or audio file decoding real-time playback data block.

Although currently used only in my H5 library as a live audio presentation, porting to other languages is easy because none of their source code uses browser-specific stuff.

The test address: xiangyuecn. Dead simple. IO/Recorder/as…

The relevant source code can be found on GitHub: github.com/xiangyuecn/…

To the end.