<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

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

          共 2188字,需瀏覽 5分鐘

           ·

          2021-04-19 23:20

          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 / MaxDBDrawMaxHeight 是你最大繪制高度(畫布高度),MaxDB 為最大音量等于 20 * Math.log10(0x7FFF)

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

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


          此功能源碼:wavesurfer.view.js7kb 大小源碼,音頻可視化波形顯示;外觀為上面 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.js4kb 大小源碼,錄音時(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
          瀏覽 215
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  爆操无码 | 成人AV麻豆 | www亚洲视频 | 黄色片网站视频 | 亚洲色情免费视频 |