AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)

要實(shí)現(xiàn)音頻可視化,實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext:
AudioContext
接口表示由鏈接在一起的音頻模塊構(gòu)建的音頻處理圖,每個(gè)模塊由一個(gè)AudioNode
表示。音頻上下文控制它包含的節(jié)點(diǎn)的創(chuàng)建和音頻處理或解碼的執(zhí)行。- 在做任何其他操作之前,您需要?jiǎng)?chuàng)建一個(gè)
AudioContext
對(duì)象,因?yàn)樗惺虑槎际窃谏舷挛闹邪l(fā)生的。建議創(chuàng)建一個(gè)AudioContext
對(duì)象并復(fù)用它,而不是每次初始化一個(gè)新的AudioContext對(duì)象,并且可以對(duì)多個(gè)不同的音頻源和管道同時(shí)使用一個(gè)AudioContext
對(duì)象。
一、準(zhǔn)備 audio 和 canvas 標(biāo)簽
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' width='300px' height='300px'></canvas>
二、創(chuàng)建并返回一個(gè)新的AudioContext對(duì)象。
const ctx = new AudioContext();
三、創(chuàng)建一個(gè)新的MediaElementAudioSourceNode對(duì)象
AudioContext
接口的createMediaElementSource()
方法用于創(chuàng)建一個(gè)新的MediaElementAudioSourceNode
對(duì)象,輸入某個(gè)存在的 HTML<audio>or<video>` 元素, 對(duì)應(yīng)的音頻即可被播放或者修改.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
四、創(chuàng)建AnalyserNode對(duì)象
AudioContext
的createAnalyser()
方法能創(chuàng)建一個(gè)AnalyserNode
,可以用來獲取音頻時(shí)間和頻率數(shù)據(jù),以及實(shí)現(xiàn)數(shù)據(jù)可視化。
const analyser = ctx.createAnalyser();
五、設(shè)置 fftSize 屬性
AnalyserNode
接口的 fftSize 屬性的值是一個(gè)無符號(hào)長整型的值, 表示(信號(hào))樣本的窗口大小。當(dāng)執(zhí)行快速傅里葉變換(Fast Fourier Transfor (FFT))時(shí),這些(信號(hào))樣本被用來獲取頻域數(shù)據(jù)。fftSize
屬性的值必須是從32到32768范圍內(nèi)的2的非零冪; 其默認(rèn)值為2048。
analyser.fftSize = 512;
六、audioSrc 和 analyser 進(jìn)行鏈接
AudioNode
接口的 connect()
方法使你能將一個(gè)節(jié)點(diǎn)的輸出連接到一個(gè)指定目標(biāo),這個(gè)指定的目標(biāo)可能是另一個(gè) AudioNode(從而將音頻數(shù)據(jù)引導(dǎo)到下一個(gè)指定節(jié)點(diǎn))或一個(gè)AudioParam, 以便上一個(gè)節(jié)點(diǎn)的輸出數(shù)據(jù)隨著時(shí)間流逝能自動(dòng)地對(duì)下一個(gè)參數(shù)值進(jìn)行改變。
audioSrc.connect(analyser);
七、analyser 和 ctx.destination 進(jìn)行鏈接
AudioContext
的 destination
屬性返回一個(gè) AudioDestinationNode
表示context
中所有音頻(節(jié)點(diǎn))的最終目標(biāo)節(jié)點(diǎn),一般是音頻渲染設(shè)備,比如揚(yáng)聲器。
analyser.connect(ctx.destination)
八、歌曲播放進(jìn)行中
Uint8Array
數(shù)組類型表示一個(gè)8位無符號(hào)整型數(shù)組,創(chuàng)建時(shí)內(nèi)容被初始化為0。創(chuàng)建完后,可以以對(duì)象的方式或使用數(shù)組下標(biāo)索引的方式引用數(shù)組中的元素。
AnalyserNode
接口的 getByteFrequencyData() 方
法將當(dāng)前頻率數(shù)據(jù)復(fù)制到傳入的Uint8Array
(無符號(hào)字節(jié)數(shù)組)中。
如果數(shù)組的長度小于 AnalyserNode.frequencyBinCount
, 那么Analyser
多出的元素會(huì)被刪除. 如果是大于, 那么數(shù)組多余的元素會(huì)被忽略.
visualization() { const arr = new Uint8Array(this.analyser.frequencyBinCount); this.analyser.getByteFrequencyData(arr); this.draw(arr); },
九、使用canvas繪制音頻圖譜
HTMLCanvasElement.getContext()
方法返回canvas
的上下文,如果上下文沒有定義則返回 null .- 2d建立一個(gè) 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(); });}
效果展示:
到此這篇關(guān)于 AudioContext
實(shí)現(xiàn)音頻可視化(web技術(shù)分享)的文章就介紹到這了,更多相關(guān) AudioContext 實(shí)現(xiàn)音頻可視化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對(duì)你有所幫助2022-02-23
Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道,當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行2017-01-21響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04