AudioContext實現音訊視覺化

要實現音訊視覺化，實現一些酷炫的效果需要藉助Web Audio API提供的一些方法AudioContext：

AudioContext介面表示由連結在一起的音訊模組建立的音訊處理圖，每個模組由一個AudioNode表示。音訊上下文控制它所包含的節點的創建和音訊處理或解碼的執行。 在做任何其他操作之前，您需要建立一個AudioContext對象，因為所有事情都是在上下文中發生的。建議建立一個AudioContext物件並重複使用它，而不是每次初始化一個新的AudioContext對象，並且可以對多個不同的音訊來源和管道同時使用一個AudioContext物件。

一、準備audio 和canvas 標籤

<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>

<canvas ref='canvas' width='300px' height='300px'></canvas>

二、建立並傳回一個新的AudioContext物件。

 const ctx = new AudioContext();

三、創建一個新的MediaElementAudioSourceNode對象

AudioContext介面的createMediaElementSource()方法用於建立一個新的MediaElementAudioSourceNode物件,輸入某個存在的HTML<audio>or<video>` 元素, 對應的音訊即可被播放或修改.

 const audioSrc = ctx.createMediaElementSource(this.audioElement);

四、創建AnalyserNode對象

AudioContext的createAnalyser()方法能建立一個AnalyserNode ，可以用來取得音訊時間和頻率數據，以及實現數據視覺化。

 const analyser = ctx.createAnalyser();

五、設定fftSize 屬性

AnalyserNode介面的fftSize 屬性的值是一個無符號長整型的值, 表示（訊號）樣本的視窗大小。當執行快速傅立葉變換（Fast Fourier Transfor (FFT)）時，這些（訊號）樣本被用來取得頻域資料。 fftSize屬性的值必須是從32到32768範圍內的2的非零冪; 其預設值為2048。

 analyser.fftSize = 512;

六、audioSrc 和analyser 進行鏈接

AudioNode介面的connect()方法讓你能將一個節點的輸出連接到一個指定目標，這個指定的目標可能是另一個AudioNode（從而將音訊資料引導到下一個指定節點）或一個AudioParam, 以便上一個節點的輸出資料隨著時間流逝能自動地對下一個參數值進行改變。

 audioSrc.connect(analyser);

七、analyser 和ctx.destination 進行鏈接

AudioContext的destination屬性傳回一個AudioDestinationNode表示context中所有音訊（節點）的最終目標節點，一般是音訊渲染設備，例如揚聲器。

 analyser.connect(ctx.destination)

八、歌曲播放進行中

Uint8Array數組類型表示一個8位元無符號整數數組，創建時內容初始化為0。建立完後，可以以物件的方式或使用陣列下標索引的方式來引用陣列中的元素。

AnalyserNode介面的getByteFrequencyData() 方將目前頻率資料複製到傳入的Uint8Array （無符號位元組數組）。

如果數組的長度小於AnalyserNode.frequencyBinCount , 那麼Analyser多出的元素會被刪除. 如果是大於, 那麼數組多餘的元素會被忽略.

 visualization() {

const arr = new Uint8Array(this.analyser.frequencyBinCount);

this.analyser.getByteFrequencyData(arr);

this.draw(arr);

},

九、使用canvas繪製音訊圖譜

HTMLCanvasElement.getContext()方法傳回canvas的上下文，如果上下文沒有定義則回傳null .2d建立一個CanvasRenderingContext2D 二維渲染上下文。

 this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); const start = ((document.body .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((item, index) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); this.canvas.lineTo(start + (index * 4), this.canvasHeight - item / 2); this.canvas.stroke(); });}

效果展示：

到這篇關於AudioContext實現音頻視覺化(web技術分享)的文章就介紹到這了,更多相關AudioContext 實現音頻可視化內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支援downcodes.com！