本篇教程探討了HTML5如何實現音頻可視化頻譜跳動，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML5+CSS3從入門到精通 。

<

html>

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

*?{

margin:?0;

padding:?0;

}

#canvas?{

display:?block;

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

}

window.onload?=?function?()?{

var?oAudio?=?document.getElementById(‘myaudio‘);

window.οnclick=function(){

if(oAudio.paused){

oAudio.play();

}else{

oAudio.pause();

}

}

//?創建音頻上下文對象

var?oCtx?=?new?AudioContext();

//?console.log(oCtx);

//?創建媒體源,除了audio本身可以獲取，也可以通過oCtx對象提供的api進行媒體源操作

var?audioSrc?=?oCtx.createMediaElementSource(oAudio);

//?創建分析機

var?analyser?=?oCtx.createAnalyser();

//?媒體源與分析機連接

audioSrc.connect(analyser);

//?輸出的目標：將分析機分析出來的處理結果與目標點(耳機/揚聲器)連接

analyser.connect(oCtx.destination);

//?效果(實現的具體方法)

//?繪制音頻圖的條數(fftSize)

/*

根據分析音頻的數據去獲取音頻頻次界定音頻圖的高度

放在與音頻頻次等長的8位無符號字節數組

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?color?=?ctx.createLinearGradient(oW?/?2,?oH?*2/?3?-?30,?oW?/?2,?oH?*2/?3?-?100);

color.addColorStop(0,?‘#000‘);

color.addColorStop(.5,?‘#069‘);

color.addColorStop(1,?‘#f6f‘);

//?音頻圖的條數

var?count?=?150;

//?緩沖區:進行數據的緩沖處理，轉換成二進制數據

var?voiceHeight?=?new?Uint8Array(analyser.frequencyBinCount);

//?console.log(voiceHeight);

function?draw()?{

//?將當前的頻率數據復制到傳入的無符號字節數組中，做到實時連接

analyser.getByteFrequencyData(voiceHeight);

//?console.log(voiceHeight);

//?自定義獲取數組里邊數據的頻步

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

ctx.clearRect(0,?0,?oW,?oH);

for?(var?i?=?0;?i?

var?audioHeight?=?voiceHeight[step?*?i];

ctx.fillStyle?=?color;

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

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

}

window.requestAnimationFrame(draw);

}

draw();

/*

analyserNode?提供了時時頻率以及時間域的分析信息

允許你獲取實時的數據，并進行音頻可視化

analyserNode接口的fftSize屬性

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

ffiSize屬性值是從32位到32768范圍內的2的非零冪,默認值是2048

*/

}

本文由職坐標整理并發布，希望對同學們有所幫助。了解更多詳情請關注職坐標WEB前端HTML5/CSS3頻道！

總結

以上是生活随笔為你收集整理的傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。