用js写一个可切换多种样式的可视化音频动态炫酷的代码
<html>
<head>
<title>音频可视化</title>
<style type="text/css">
#audio { position: relative; width: 100%; height: 300px; }
/* 可以改变的样式 */
#visualizer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.style1 { background-color:#000; }
.style2 { background-color:#f00; }
.style3 { background-color:#0f0; }
</style>
</head>
<body onload="init()">
<!-- 音频文件 -->
<audio id="audio" src="music.mp3"></audio>
<!-- 动态图形，用于呈现声波 -->
<canvas id="visualizer"></canvas>
<!-- 样式切换按钮 -->
<button onclick='changeStyle(1)' >Style 1</button><br />
<button onclick='changeStyle(2)' >Style 2</button><br />
<button onclick='changeStyle(3)' >Style 3</button><br />
<script type="text/javascript"> //定义全局变量 var audio, context, analyser, visualizer, styleIndex=1;; //初始化函数，用来获取音频文件和绘图环境 function init(){ audio = document.getElementById('audio'); context = new AudioContext(); analyser = context.createAnalyser(); visualizer = document.getElementById('visualizer'); //将analyser与source连接起来 var source = context.createMediaElementSource(audio); source.connect(analyser); analyser.connect(context.destination); //定义一个Uint8Array来保存声波数据 var dataArray = new Uint8Array(analyser.frequencyBinCount); //在动画循环中不断地读取并绘制声波数据 renderFrame(); }; //定义renderFrame函数，用来循环读取并绘制声波数据 function renderFrame(){ requestAnimationFrame(renderFrame); //读取当前的声波数据 analyser.getByteFrequencyData(dataArray); //计算当前的能量值 var energy=calculateEnergy(); drawSpectrum(energy); }; //定义drawSpectrum函数，用来根据能量值加以处理后写入Canvas中 function drawSpectrum (energy){ var ctx=visualizer.getContext('2d'); ctx.clearRect (0, 0 , visualizer .width , visualizer .height ); switch (styleIndex) { case 1 : drawStyle1 (ctx , energy ); break ; case 2 : drawStyle2 (ctx , energy ); break ; case 3 : drawStyle3 (ctx , energy ); break ; }; }; //定义calculateEnergy函数，用来计算当前的能量值 function calculateEnergy (){ var sum=0 ; for (var i=0 ;i<dataArray .length ;i++) sum+=dataArray[i]; return sum/dataArray .length /256 *100 ; }; /* 各样式对应的处理方式 */ /* 样式1 */ function drawStyle1 (ctx , e ){ ctx .fillRect ( 0 , 0 , e*10+50 , 300 ); }; /* 样式2 */ function drawStyle2 (ctx , e ){ for (var i=e*10+50 ;i-- ;) ctx .fillRect ((300 -i)*Math .random ()*10 +20 , i*Math .random ()*5+20, 10, 10) }; /* 样式3 */ function drawStyle3 (ctx , e ){ for (var i=(e+50)*5 ;) ctx .fillRect ((300 -i)*Math .random ()*10 +20, i*Math .random ()*5+20, 10, 10) }; /* 切换样式函数 */ function changeStyle (_index){ styleIndex=_index % 3 + 1 ; }; </script> </body></html>
创作工场
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。
点击这里>>使用🔥专业版，更聪明、更完整、更原创！