作者：Sanpeier

https://juejin.im/post/5dd88289e51d4523564243da

什么是音頻可視化

音頻可視化，顧名思義，就是通過獲取音頻的波形、頻率和其他來自音頻的數(shù)據(jù)轉(zhuǎn)換成圖像，再到屏幕上顯示出來。通過它，我們能夠制作一些炫酷的前端音樂界面。

下面，我將分析一個來自云音樂技術(shù)團隊的音頻可視化開發(fā)案例，快速幫助小白，制作自己喜歡的炫酷的音頻可視化界面。

先上圖

想開發(fā)這么一個炫酷的音頻界面，我們可以先來聊聊 canvas

canvas是什么

canvas是HTML5中用于圖形繪制的容器元素，它通常通過JavaScript腳本來完成圖形繪制。要完成我們下面的音頻可視化開發(fā)，我們可以借組結(jié)構(gòu)canvas的幾個方法，下面將通過開發(fā)一個頁面倒計時的小案例來幫助初學(xué)者了解canvas的一些屬性和方法。

先上代碼

<canvas id="myCanvas"> canvas> <script> const canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.font = "50px Verdana"; let dis = 550; let i = 10; function animation(){ requestAnimationFrame(function(){ if(dis >= 0){ --dis; if(dis%50 == 0 ){ ctx.clearRect(0,0,300,150); ctx.fillText(i--,100,100); } animation(); } }); } animation();script>

我們在html頁面創(chuàng)建一個canvas畫布元素并設(shè)置id為myCanvas，它的默認(rèn)大小是300*150，創(chuàng)建好了這塊畫布，接下來我們就能在JavaScript腳本中繪制圖形了。

先通過getElementById()找到這個元素，然后創(chuàng)建canvas對象ctx并設(shè)置填充色為紅色，字體為Verdana，大小為50px，設(shè)置dis變量用于條件控制，再定義一個i變量用于顯示倒計時數(shù)字，然后我們就可以開始在我們的畫布里繪制倒計時數(shù)字了。

創(chuàng)建一個animation函數(shù)，在這個函數(shù)里面，我們使用了一個html5專門用于請求動畫的APIrequestAnimationFrame請求動畫幀，相比于定時器setTimeout，它不會引起丟幀、丟幀，看起來更加流暢。

在requestAnimationFrame里面，先設(shè)置刷幀條件dis>=0，dis每次減一，總共550次，再設(shè)置條件為每50次執(zhí)行一次繪制操作，在每次繪制之前，通過clearRect(x,y,width,height)方法將畫布上給定矩形清空，它的4個參數(shù)分別表示要清除的矩形左上角的x，y坐標(biāo)，以及要清空矩形的寬度和高度，單位以像素計算。然后再通過fillText()畫布指定位置繪制倒計時數(shù)字,該方法接收四個參數(shù)：text輸出的文本，x繪制文本的x坐標(biāo)，y繪制文本的y坐標(biāo)，注意：這兩個值都是相對于畫布，最后一個參數(shù)maxWidth表示允許文本的最大寬度，它是一個可選參數(shù)。

接著我們通過遞歸的方式調(diào)用animation()函數(shù)直到倒計時結(jié)束，最后在外部調(diào)用一下animation()函數(shù)，至此，一個簡單的倒計時界面完成。我們還可以給canvas通過innerWidth和innerHeight設(shè)置

畫布大小。

canvas可以繪制各種圖形，更多內(nèi)容請自行參看canvas內(nèi)容

聊完了canvas，接下來就是我們的正題了。

Web Audio

在開始之前，我們還需要了解什么是Web Audio。

Web Audio 是 Web 端處理和分析音頻的一套 API 。它可以使用戶在音頻上下文中進行音頻操作，具有模塊化路由的特點，它也使我們能夠控制音頻的空間化。

通過Web Audio，我們能夠?qū)崿F(xiàn)取數(shù)據(jù)和映射數(shù)據(jù)兩個過程，下面我們將實現(xiàn)這兩個過程。

項目實現(xiàn)

我們先在頁面創(chuàng)建一個canvas元素和一個audio標(biāo)簽以及一個用于作播放按鈕的a標(biāo)簽。

然后在JavaScript里面獲取audio和a這兩個元素，并給a標(biāo)簽設(shè)置單擊事件。

var btn = document.getElementById('play-btn'); var audio = document.getElementById('audio'); btn.addEventListener('click',function(){ btn.style.display = 'none'; audio.play(); onloadAudio(); })

在onLoadAudio()函數(shù)里面，我們先獲取canvas元素，設(shè)置它占滿整個頁面，再創(chuàng)建canvas的對象。

var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d');

創(chuàng)建 **AudioContext **對象，用來控制它所包含的節(jié)點的創(chuàng)建，以及音頻處理、解碼操作的執(zhí)行。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

通過 createAnalyser() 方法創(chuàng)建 **AnalyserNode **用來獲取音頻時間和頻率數(shù)據(jù)，實現(xiàn)音頻數(shù)據(jù)可視化。

var analyser = audioCtx.createAnalyser(); analyser.fftSize = 512;

fftSize 在 MDN 里面介紹是快速傅里葉變換的一個參數(shù)，取值必須是從32到32768范圍內(nèi)的2的非零冪，默認(rèn)值為2048，在這里我們?nèi)?12。另外，fftSize 的值決定了 frequencyData 的長度。

將音頻節(jié)點關(guān)聯(lián)到 AudioContext上，作為整個音頻分析的輸入。

我們采用MediaElementAudioSourceNode 將節(jié)點作為輸入源，并將音頻關(guān)聯(lián)到分析器，再將分析器關(guān)聯(lián)到輸出設(shè)備。

var source = audioCtx.createMediaElementSource(audio); source.connect(analyser); analyser.connect(audioCtx.destination);

接下來獲取頻率數(shù)組。

var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength);

frequencyBinCount()的值是 fftSize 取值的一半，所以這里的 Uint8Array() 數(shù)組的長度就是256。

然后設(shè)置音柱的寬度，而高度只定義變量而不賦值，留在后面通過dataArray[]數(shù)組動態(tài)設(shè)置

var barWidth = WIDTH / bufferLength*1.5; var barHeight;

繪制音柱

定義一個 renderFrame() 函數(shù)用于繪制音柱，并且每次繪制之前都先將整個畫布清除，然后更新頻率數(shù)組。

ctx.clearRect(0,0,WIDTH,HEIGHT); analyser.getByteFrequencyData(dataArray);

通過for循環(huán)里面設(shè)置每一個矩形的高度，再根據(jù)高度設(shè)置一個背景色，然后繪制矩形，并填充背景顏色。然后通過遞歸的方式調(diào)用函數(shù)。

barHeight = dataArray[i]; var r = barHeight + 25 * (i / bufferLength); var g = 250 * (i / bufferLength); var b = 50; ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; ctx.fillRect(x,HEIGHT-barHeight,barWidth,barHeight); x += barWidth+2;

最后，運行代碼，體驗屬于你的可視化音樂吧。

小結(jié)

本文簡單介紹了 canvas 的使用和如何通過 Web Audio 的相關(guān) API 獲取音頻的頻率數(shù)據(jù)。

然而 canvas 和 Web Audio的用處遠(yuǎn)遠(yuǎn)不止于此，讀者還可以發(fā)揮想象力和創(chuàng)造力，開發(fā)出更多有意思的項目。

附上項目源碼：

https://github.com/anpeier/lesson_shuidi/tree/master/html5/visualize

?--------? END? ---------

推薦閱讀

(點擊標(biāo)題可跳轉(zhuǎn)閱讀)

十款 Windows 下必裝軟件，大大增強工作幸福

漫畫：什么是 HTTPS 協(xié)議？

又一個框架來了！被稱為要取代 React , vue ，Aangular ！

? ? ? ??朕已閱?

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的傅里叶变换音频可视化_快速上手网易云音乐可视化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。