实现本地可视化音频播放效果实例
位置:
首页 >
前端三套件[发布: 2024.3.19 作者: 马黑 阅读: 133]
本实例需要本地能够运行虚拟服务器。建议使用 PHPTS ，运行后可在浏览器使用 127.0.0.0 访问本地虚拟网站。以下代码可以保存在PHPTS安装目录下 X:\phpts\data\wwwroot 的一个子文件夹，比如 text 文件夹，代码保存为 123.html 或是别的名称，然后在浏览器地址栏输入 127.0.0.1/test/123.html 后回车，即可查看效果。
实例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>web audio API</title>
<style>
#papa { margin: auto; width: 1024px; height: 640px; border:1px solid gray; position: relative; }
#canv { position: absolute; left: calc(50% - 150px); bottom: 20px; }
</style>
</head>
<body>
<div id="papa">
<canvas id="canv" width="300" height="200" title="点击播放"></canvas>
</div>
<script>
/* 创建h5 audio对象 */
const aud = new Audio();
/* 同目录下音频文件 */
aud.src = 'humanlegacy.mp3';
aud.load(); /* 加载音乐 */
aud.loop = true; /* 循环播放 */
/* 下一句是自动播放音频 */
/* aud.play(); */
/* 创建web audio api音频上下文 */
let AudioContext = window.AudioContext || window.webkitAudioContext;
/* 音频上下文操作句柄 */
let Ac = new AudioContext;
/* 创建音频分析器 */
let analyser = Ac.createAnalyser();
/* 指定傅里叶快速变换参数 ：作用于频率长度，2的非零幂，默认2048 */
analyser.fftSize = 256;
/* 创建音源节点 ：这里使用 audio 标签的音频输出作为音频来源 */
let source = Ac.createMediaElementSource(aud);
/* 音频节点连接到分析器 */
source.connect(analyser);
/* 分析器连接到音频输出对象（比如声卡） */
analyser.connect(Ac.destination);
/* 频谱条数 ：一般建议为 analyser.fftSize的一半，即下一句，
let len = analyser.frequencyBinCount;
综合考虑还是手工给出一个比fftSize小一点的数
*/
let len = 90;
/* 创建8位无符号整型数组 ： 它将从analyser获得实时音频数据 */
let output = new Uint8Array(len);
/* 下面是画笔相关设定 */
let canvctx = canv.getContext('2d'); /* 创建2d画笔 */
let ppWidth = canv.width / len; /* 计算单个频谱宽度 */
let ppHeight, x; /* 单个频谱高度和众频谱条的水平起始位置x */
/* 创建画笔渐变填充对象 */
let gradient = canvctx.createLinearGradient(0,0,0,200);
gradient.addColorStop(0,'rgba(128,0,0'); /* 红 */
gradient.addColorStop(.3,'rgba(255,165,0'); /* 橙 */
gradient.addColorStop(1,'rgba(0,128,0'); /* 绿 */
/* 根据音频数据绘制频谱 */
(function draw() {
canvctx.clearRect(0, 0, canv.width, canv.height);
/* 分析器获取实时音频频率数据 ：这里是 0 ~ 255 Uint8Array 并赋值给 output 数组 */
analyser.getByteFrequencyData(output);
x = 0.5; /* 留一点点边 */
/* 绘制 len 条柱状频谱 */
for(let i = 0; i < len; i ++) {
ppHeight = output[i] * .75 + ppWidth;
canvctx.fillStyle = gradient;
canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);
x += ppWidth;
}
requestAnimationFrame(draw); /* 递归调用请求关键帧动画 */
})();
/* audio 监听事件 ：显示相应提示语 */
aud.onpause = aud.onplaying = () => canv.title = aud.paused ? '点击播放' : '点击暂停';
/* 画布点击事件 ：播放或暂停音乐 */
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</body>
</html>
上述实例，利用html5的audio元素作为音源输出，web audio api 获得相关音频实时数据后经过一系列的处理实时传给 output 数组，canvas 画布则实时将 output 数组里的音频数据转化为频谱条的高度并绘制出来，形成音频与频谱联动的响应式动态效果。代码的注解我写的已经相当详细，但要彻底理解其工作原理，需要自己网补一下 web audio api，注意它不是H5的audio元素。
前一篇: 认识CSS的background（九）
下一篇: 认识CSS的background（十）
发表评论:
评论列表 [1条]
#1 | 悄然 于 2024-3-19 12:57 发布: 我把自己音乐传到同目录，换了音乐名称。。用老师这个代码就运行正常~~神了。。这个是柱状的频谱。。。好看。。有图有真相。。
