傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动

本篇教程探讨了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();

// 媒体源