HTML5音頻可視化頻譜跳動代碼

*{

margin:0;

padding:0;

}

#canvas {

display: block;

background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);

}

window.οnclick=function () {if(oAudio.paused) {

oAudio.play();

}else{

oAudio.pause();

}

}//創(chuàng)建音頻上下文對象

var oCtx = newAudioContext();//console.log(oCtx);//創(chuàng)建媒體源,除了audio本身可以獲取，也可以通過oCtx對象提供的api進行媒體源操作

var audioSrc =oCtx.createMediaElementSource(oAudio);//創(chuàng)建分析機

var analyser =oCtx.createAnalyser();//媒體源與分析機連接

audioSrc.connect(analyser);//輸出的目標：將分析機分析出來的處理結(jié)果與目標點(耳機/揚聲器)連接

analyser.connect(oCtx.destination);//效果(實現(xiàn)的具體方法)//繪制音頻圖的條數(shù)(fftSize)

/*根據(jù)分析音頻的數(shù)據(jù)去獲取音頻頻次界定音頻圖的高度

放在與音頻頻次等長的8位無符號字節(jié)數(shù)組

Uint8Array:初始化默認值為1024*/

//利用cancas漸變進行音頻繪制

var ctx = canvas.getContext('2d');

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;var oW =canvas.width;var oH =canvas.height;var color1 = ctx.createLinearGradient(oW / 2, oH / 2 - 30, oW / 2, oH / 2 - 100);var color2 = ctx.createLinearGradient(oW / 2, oH / 2 + 30, oW / 2, oH / 2 + 100);

color1.addColorStop(0, '#000');

color1.addColorStop(.5, '#069');

color1.addColorStop(1, '#f6f');

color2.addColorStop(0, '#000');

color2.addColorStop(.5, '#069');

color2.addColorStop(1, '#f6f');//音頻圖的條數(shù)

var count = 150;//緩沖區(qū):進行數(shù)據(jù)的緩沖處理，轉(zhuǎn)換成二進制數(shù)據(jù)

var voiceHeight = newUint8Array(analyser.frequencyBinCount);//console.log(voiceHeight);

function draw() {//將當前的頻率數(shù)據(jù)復制到傳入的無符號字節(jié)數(shù)組中，做到實時連接

analyser.getByteFrequencyData(voiceHeight);//console.log(voiceHeight);//自定義獲取數(shù)組里邊數(shù)據(jù)的頻步

var step = Math.round(voiceHeight.length /count);

ctx.clearRect(0, 0, oW, oH);for (var i = 0; i < count; i++) {var audioHeight = voiceHeight[step *i];

ctx.fillStyle= color1; //繪制向上的線條

ctx.fillRect(oW / 2 + (i * 10), oH / 2, 7, -audioHeight);

ctx.fillRect(oW/ 2 - (i * 10), oH / 2, 7, -audioHeight);

ctx.fillStyle= color2; //繪制向下的線條

ctx.fillRect(oW / 2 + (i * 10), oH / 2, 7, audioHeight);

ctx.fillRect(oW/ 2 - (i * 10), oH / 2, 7, audioHeight);

}

window.requestAnimationFrame(draw);

}

draw();/*analyserNode 提供了時時頻率以及時間域的分析信息

允許你獲取實時的數(shù)據(jù)，并進行音頻可視化

analyserNode接口的fftSize屬性

fftSize:無符號長整型值，用于確定頻域的FFT(快速傅里葉變換)

ffiSize屬性值是從32位到32768范圍內(nèi)的2的非零冪,默認值是2048*/}

總結(jié)

以上是生活随笔為你收集整理的html频谱跳动效果,HTML5音频可视化频谱跳动代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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