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

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

---

效果图：

HTML：

 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

音频mp3：

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

---

更多干货

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