国产一级黄片视频在线观看,黄色视频久久久,97色色综合网,做爱视频无码免费网站,www.肏屄,91原创国产内射,台湾在线无码视频,污污无码视频

1. 前言

項(xiàng)目中需要實(shí)現(xiàn)音頻智能控制以及根據(jù)音樂轉(zhuǎn)換色彩功能，WaveView 完全滿足目前需求，完美實(shí)現(xiàn)需求，該庫還有另外 WaveSurferView 和

FrequencyHistogramView 兩個(gè)庫，下面一一介紹，分享給大家。

2. 功能展示

下面這些波形、頻率的計(jì)算和顯示都是由純 js 代碼編寫的，并未用到瀏覽器專有特性，因此可以方便的移植到其他語言實(shí)現(xiàn)，比如移植到 Android、iOS 原生實(shí)現(xiàn)。

3. FrequencyHistogramView 音頻可視化頻率直方圖顯示

此功能源碼：frequency.histogram.view.js + lib.fft.js 12kb大小源碼，音頻可視化頻率直方圖顯示；外觀為上面 Gif 圖最后一行，可通過參數(shù)配置繪制成不同的外觀。

此擴(kuò)展核心算法參考 Java 開源庫 jmp123 的代碼編寫的，jmp123 版本 0.3；直方圖我特意優(yōu)化主要顯示 0-5khz 語音部分，其他高頻顯示區(qū)域較小，不適合用來展示音樂頻譜。

要獲得 PCM 頻率信息，需要將 PCM 由時(shí)域轉(zhuǎn)換成頻域，這里就用到了 FFT 算法快速傅里葉變換，里面水很深我就沒有深入研究了，這里直接用的 jmp123 里面的 FFT 實(shí)現(xiàn)，純js代碼實(shí)現(xiàn) 100 行不到。我們只管使用就 ok 了，假設(shè)有 44100hz 采樣率的 16 位 PCM 數(shù)據(jù)，取 1024 個(gè)采樣數(shù)據(jù)經(jīng)過 FFT 變換后，會(huì)輸出 512 個(gè)頻率信息點(diǎn)，每個(gè)點(diǎn)之間的頻率間隔為 44100/2/512=43hz，0hz 是第 1 個(gè)點(diǎn)，1khz 是第 1000/43個(gè)點(diǎn)，以此類推，最高能識(shí)別到 22050hz，有了這些頻率點(diǎn)信息就能繪制不同頻率下的音量幅度了，或者獲得需要的頻率分信號(hào)。

通過FFT獲得了頻率信息，我們就可以繪制直方圖了，將所有頻率點(diǎn)按照我們需要繪制的直方圖柱子數(shù)量平均劃分成頻段（ jmp123 里面采用的非線性劃分，沒看懂是什么原理，就采用更多人使用的線性劃分），每個(gè)頻段內(nèi)取最大值并轉(zhuǎn)換成音量，音量計(jì)算公式：dB=20*Math.log10(maxValue)，然后計(jì)算實(shí)際的繪制高度：DrawMaxHeight * dB / MaxDB，DrawMaxHeight 是你最大繪制高度（畫布高度），MaxDB 為最大音量等于 20 * Math.log10(0x7FFF)。

按照你想要的樣子繪制完成后，通過實(shí)時(shí)數(shù)據(jù)驅(qū)動(dòng)，一個(gè)可視化頻率直方圖就完工了。

4. WaveSurferView 音頻可視化波形顯示

此功能源碼：wavesurfer.view.js，7kb 大小源碼，音頻可視化波形顯示；外觀為上面 Gif 圖第二行，可通過參數(shù)配置繪制成不同的外觀。

外觀和名稱來源于 wavesurfer.js，這個(gè)波形的繪制直接簡(jiǎn)單的使用 16 位 PCM 的采樣數(shù)值大小來進(jìn)行線條的繪制，同一段音頻繪制出的波形和 Audition 內(nèi)顯示的波形外觀上幾乎沒有差異。

由于是直接簡(jiǎn)單的用 PCM 的值大小來繪制線條，因此沒有什么復(fù)雜的邏輯；對(duì)于繪制這種前進(jìn)式的動(dòng)畫，無需每次都繪制所有線條，只需往另外一塊畫布上不斷的在后面繪制即可，然后再繪制回顯示的畫布并移動(dòng)位置，就能實(shí)現(xiàn)不斷前進(jìn)的動(dòng)畫，并且性能有保障。

5. WaveView 動(dòng)態(tài)顯示波形

此功能源碼：waveview.js，4kb 大小源碼，錄音時(shí)動(dòng)態(tài)顯示波形；外觀為上面Gif圖第一行，可通過參數(shù)配置繪制成不同的外觀。

這個(gè)是這個(gè)庫最原始的一款可視化波形，參考 MCVoiceWave 庫編寫的，簡(jiǎn)單用用還可以，就是代碼里面相位計(jì)算不太懂，波形的顯示難控制和優(yōu)化，微調(diào)一下參數(shù)波形就亂套。

別說，這個(gè)波形還是很耐看的，相比其他可視化界面各有特色吧。

6. 使用

這些可視化波形、頻譜要?jiǎng)悠饋砭托枰獙?shí)時(shí)的輸入pcm數(shù)據(jù)，輸入源可以是麥克風(fēng)實(shí)時(shí)錄音數(shù)據(jù)塊，也可以是音頻文件解碼的實(shí)時(shí)播放數(shù)據(jù)塊。

雖然目前只用在了我的H5錄音庫里面當(dāng)做實(shí)時(shí)的音頻展示，但移植到別的語言還是很輕松的，因?yàn)樗麄兊脑创a都沒有用到瀏覽器特有的東西。

7. 源碼

源碼包含：

GitHub Recorder 開源庫
FrequencyHistogramView 音頻模塊

frequency.histogram.view.js
lib.fft.js

WaveSurferView 音頻模塊

wavesurfer.view.js

WaveView 動(dòng)態(tài)顯示波形模塊

waveview.js

獲取源碼方式：

https://github.com/xiangyuecn/Recorder

「音頻可視化」 波形頻譜和頻率直方圖

FrequencyHistogramView 兩個(gè)庫，下面一一介紹，分享給大家。

此功能源碼：frequency.histogram.view.js + lib.fft.js 12kb大小源碼，音頻可視化頻率直方圖顯示；外觀為上面 Gif 圖最后一行，可通過參數(shù)配置繪制成不同的外觀。

此功能源碼：wavesurfer.view.js，7kb 大小源碼，音頻可視化波形顯示；外觀為上面 Gif 圖第二行，可通過參數(shù)配置繪制成不同的外觀。

「音頻可視化」波形頻譜和頻率直方圖