HTML5+CSS3+JS小实例：音频可视化

最新推荐文章于 2024-07-30 11:16:33 发布

耀南.

最新推荐文章于 2024-07-30 11:16:33 发布

阅读量501

点赞数 9

分类专栏：前端好玩炫酷的动画小案例文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/YN2000609/article/details/135824239

版权

前端好玩炫酷的动画小案例专栏收录该内容

103 篇文章 11 订阅

订阅专栏

制作不易安利给大家前端实用的小实例 cv可直接运行使用

效果图：

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频可视化</title>
    <link rel="stylesheet" href="209.css">
</head>
<body>
    <canvas></canvas>
    <audio src="/夜曲.mp3" controls></audio>
</body>
</html>

<script src="209.js"></script>

css：

*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
}
canvas{
    width: 100%;
    height: 100vh;
}
audio{
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 0.15;
    transition: opacity 0.5s;
}
audio:hover{
    opacity: 1;
}

js：

// 要操作的元素
const audio=document.querySelector('audio');
const cvs=document.querySelector('canvas');
const ctx=cvs.getContext('2d');

// 初始化画布
function initCvs(){
    cvs.width=window.innerWidth * devicePixelRatio;
    cvs.height=(window.innerHeight / 2) * devicePixelRatio;
}

initCvs();


// 是否已初始化
let isInit=false;
// 数组，用于接收分析器节点的分析数据
let dataArray;
// 分析器节点
let analyser;
// 音频播放事件
audio.onplay=function(){
    // 判断是否初始化
    if(isInit){
        return;
    }

    // 开始初始化
    // 创建音频上下文
    const audioCtx=new AudioContext();
    // 创建音频源节点
    const source=audioCtx.createMediaElementSource(audio);
    // 创建分析器节点
    analyser=audioCtx.createAnalyser();
    analyser.fftSize=512;
    // 接收分析器节点的分析数据
    dataArray=new Uint8Array(analyser.frequencyBinCount);
    source.connect(analyser);
    analyser.connect(audioCtx.destination);

    // 已初始化
    isInit=true;
}

// 把分析出来的波形绘制到canvas上
function draw(){
    // 逐帧绘制
    requestAnimationFrame(draw);

    // 接下来清空画布
    const { width, height } = cvs;
    ctx.clearRect(0,0,width,height);
    if(!isInit){
        return;
    }
    // 让分析器节点分析出数据到数组中
    analyser.getByteFrequencyData(dataArray);
    const len=dataArray.length / 2; //条的数量，取一半，前半部分（低频范围就好，高频部分人耳几乎听不到，看不到波形）
    const barWidth=width / len / 2; //条的宽度
    ctx.fillStyle='#e0f9b5';
    // 循环绘制
    for(let i=0;i<len;i++){
        const data=dataArray[i];
        const barHeight=(data / 255) * height; //条的高度
        const x1=i * barWidth + width / 2; //右边区域中条的x坐标
        const x2=width / 2 - (i + 1) * barWidth; //左边区域中条的x坐标 镜像
        const y=height - barHeight; //条的y坐标
        ctx.fillRect(x1,y,barWidth - 2,barHeight); //填充右边区域
        ctx.fillRect(x2,y,barWidth - 2,barHeight); //填充左边区域
    }
}

draw();

音频mp3：

在资源里，可以直接下载使用

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!
以上内容技术相关问题😈欢迎一起交流学习🔥嘉vx+18634371151