前端开发攻略---根据音频节奏实时绘制不断变化的波形图。深入剖析如何通过代码实现音频数据的可视化。

1、演示

2、代码分析

逐行解析 JavaScript 代码块:

const audioEle = document.querySelector('audio')
const cvs = document.querySelector('canvas')
const ctx = cvs.getContext('2d')

这几行代码首先获取了 <audio> 和 <canvas> 元素的引用,并使用 getContext('2d') 方法获取了 Canvas 2D 上下文对象,以便后续在画布上进行绘图操作。

function initCvs() {cvs.width = window.innerWidth * devicePixelRatiocvs.height = (window.innerHeight / 2) * devicePixelRatio
}
initCvs()

initCvs 函数用于初始化画布的尺寸。它将画布的宽度设置为窗口宽度的倍数,高度设置为窗口高度的一半,同时乘以设备像素比 devicePixelRatio,以确保在不同设备上显示的效果一致。

let isInit = false
let dateArray = null
let analyser = null

这几行定义了一些状态变量,用于跟踪音频分析器的初始化状态、频率数据数组、分析器对象以及音频播放状态。

audioEle.addEventListener('play', function (e) {if (isInit) return// 初始化const audCtx = new AudioContext() // 创建音频上下文const source = audCtx.createMediaElementSource(audioEle) // 创建音频源节点analyser = audCtx.createAnalyser()analyser.fftSize = 512 // 设置 FFT 大小dateArray = new Uint8Array(analyser.frequencyBinCount) // 创建存储频率数据的数组source.connect(analyser)analyser.connect(audCtx.destination)isInit = true
})

这段代码是一个事件监听器,当音频开始播放时触发。在此事件处理程序中:

  • 首先检查是否已经初始化过分析器,如果是,则直接返回。
  • 创建 AudioContext 对象 audCtx,用于处理音频。
  • 使用 createMediaElementSource 方法创建音频源节点 source,将 <audio> 元素作为输入。
  • 创建 AnalyserNode 对象 analyser,用于分析音频频率数据。
  • 设置 AnalyserNode 的 fftSize 属性为 512,表示采样点数。
  • 创建一个 Uint8Array 数组 dateArray 用于存储频率数据。
  • 将音频源节点连接到分析器节点,然后将分析器节点连接到 AudioContext 的目标节点。
  • 最后设置状态变量 isInit 为 true,表示分析器已经初始化且音频正在播放。
function draw() {requestAnimationFrame(draw)// 清空画布const { width, height } = cvsctx.clearRect(0, 0, width, height)if (!isInit && !isPlay) return// 获取频率数据并绘制波形图analyser.getByteFrequencyData(dateArray)const len = dateArray.length / 2.5ctx.fillStyle = '#266fff'const barWidth = width / len / 2for (let i = 0; i < len; i++) {const data = dateArray[i] // < 256const barHeight = (data / 255) * heightconst x1 = i * barWidth + width / 2const x2 = width / 2 - (i + 1) * barWidthconst y = height - barHeightctx.fillRect(x1, y, barWidth - 2, barHeight)ctx.fillRect(x2, y, barWidth - 2, barHeight)}
}
draw()

draw 函数用于绘制波形图,通过 requestAnimationFrame 实现动画效果。在函数中:

  • 首先清空画布。
  • 检查分析器是否已初始化并且音频正在播放,如果不是,则直接返回。
  • 使用 analyser.getByteFrequencyData 方法获取频率数据,并存储在 dateArray 中。
  • 计算每个柱状条的宽度和高度,并根据频率数据绘制柱状图形。

3、全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {background-color: #ffffff;display: flex;justify-content: center;align-items: center;flex-direction: column;}* {margin: 0;padding: 0;}canvas {border-bottom: 1px solid #266fff;}</style></head><body><canvas></canvas><audio src="./123.mp3" controls></audio></body><script>const audioEle = document.querySelector('audio')const cvs = document.querySelector('canvas')const ctx = cvs.getContext('2d')// 初始化canvas尺寸function initCvs() {cvs.width = window.innerWidth * devicePixelRatiocvs.height = (window.innerHeight / 2) * devicePixelRatio}initCvs()// 初始化,只需要做一次就可以了let isInit = falselet dateArray = nulllet analyser = nullaudioEle.addEventListener('play', function (e) {if (isInit) return// 初始化const audCtx = new AudioContext() // 创建音频上下文const source = audCtx.createMediaElementSource(audioEle) // 创建音频源节点// 什么叫音频源节点?节点其实就是音频处理的一个环节。音频可能有很多环节 比如说修音 比如说混响 比如说把音调高调低这些都是处理环节// 每一个环节就是一个节点 在这些节点当中有一种叫源节点 表示我们音频数据的来源analyser = audCtx.createAnalyser()analyser.fftSize = 512 // 2的n次幂。数值越大越细腻// 创建数组 用于接收分析器节点的分析数据dateArray = new Uint8Array(analyser.frequencyBinCount) // 数组里面的每一项都是一个无符号的8位整数source.connect(analyser)analyser.connect(audCtx.destination)isInit = true})// 把分析出的波形绘制到canvas上function draw() {requestAnimationFrame(draw)// 清空画布const { width, height } = cvsctx.clearRect(0, 0, width, height)if (!isInit) return// 让分析器节点分析出数据到数组中analyser.getByteFrequencyData(dateArray)const len = dateArray.length / 2.5ctx.fillStyle = '#266fff'const barWidth = width / len / 2for (let i = 0; i < len; i++) {const data = dateArray[i] // < 256const barHeight = (data / 255) * heightconst x1 = i * barWidth + width / 2const x2 = width / 2 - (i + 1) * barWidthconst y = height - barHeightctx.fillRect(x1, y, barWidth - 2, barHeight)ctx.fillRect(x2, y, barWidth - 2, barHeight)}}draw()</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

群晖虚拟机搭建Synology Drive并实现Obsidian笔记异地多端同步

文章目录 一、简介软件特色演示&#xff1a; 二、使用免费群晖虚拟机搭建群晖Synology Drive服务&#xff0c;实现局域网同步1 安装并设置Synology Drive套件2 局域网内同步文件测试 三、内网穿透群晖Synology Drive&#xff0c;实现异地多端同步Windows 安装 Cpolar步骤&#…

关于学习和技术提升的思考

从技术框架的演进可以看出专业性越来越强&#xff0c;门槛越来越低&#xff0c;我们经常强调要解耦合&#xff0c;把公共模块功能做抽取&#xff0c;减少重复劳动&#xff0c;使主要精力专注于特定场景特定业务的处理。老美在设计框架的时候也是这么干的。殊不知&#xff0c;我…

微服务-4 Nacos

目录 一、注册中心 二、配置管理 1. 添加配置 2. 配置自动刷新 3. 多环境配置共享​编辑 一、注册中心 服务列表&#xff1a; 服务详情&#xff1a; 二、配置管理 1. 添加配置 (1). 在 nacos 界面中添加配置文件&#xff1a; 配置列表&#xff1a; 配置详情&#xff1a;…

2024年华为OD机试真题-符号运算-Python-OD统一考试(C卷)

题目描述: 给定一个表达式,求其分数计算结果 表达式的限制如下: 1. 所有的输入数字皆为正整数(包括0) 2. 仅支持四则运算(+-*/)和括号 3. 结果为整数或分数, 分数必须化为最简格式(比如6, 3/4, 7/8, 90/7) 4. 除数可能为0,如果遇到这种情况,直接输出"ERROR" 5.…

[C++][算法基础]模拟散列表(哈希表)

维护一个集合&#xff0c;支持如下几种操作&#xff1a; I x&#xff0c;插入一个整数 x&#xff1b;Q x&#xff0c;询问整数 x 是否在集合中出现过&#xff1b; 现在要进行 N 次操作&#xff0c;对于每个询问操作输出对应的结果。 输入格式 第一行包含整数 N&#xff0c;…

致远目前最新V8.2,打开公文正文的原文档,提示错误:http返回码=12157……解决办法

新版V8.2&#xff0c;打开发文中的正文原文档时&#xff0c;提示错误&#xff1a;http返回码12157&#xff0c;返回信息安全频道支持出错&#xff0c;更新安装插件也不能解决。 解决办法 设置IE浏览器的Internt选项配置。 控制面板-网络和Internet–Internet选项-高级-使用TLS …

【基础】损失函数和评估指标的区别

文章目录 一.损失函数&#xff08;Loss Function&#xff09;&#xff1a;1.1 作用1.2 示例1.3 常见面试题1.3.1 常见的损失函数有哪些&#xff1f;它们分别适用于什么类型的任务&#xff1f;1.3.2 介绍一下交叉熵损失函数&#xff1f;1.3.3 均方误差损失函数&#xff08;Mean …

如何使用Tomcat+cpolar搭建本地站点并发布到公网分享好友远程访问

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器拥有强大功能&#xff0c;由于其可以实…

【React】React Hooks

useState useState 向组件中添加状态变量 状态是只读的&#xff0c;不可以直接修改 对于对象类型的状态变量&#xff0c;应该传递一个新的对象来更改 需要对象展开&#xff0c;并重新赋值&#xff0c;进行增加或者修改。 如果需要删除&#xff0c;则使用 filter。 import { …

【踩坑日记】Pop!OS中文输入法的坑

文章目录 前言一、编译安装最新的IBus-pinyin输入法1.卸载旧输入法2.安装编译依赖3.下载源码4.编译和安装libpinyin5.编译和安装ibus-libpinyin6.重启IBus服务二、安装Fcitx5前言 使用Linux时,特别是涉及到中文的时候,会遇到一些问题。我最近在使用Pop!OS 22.04,这是Ubuntu…

Qt for MCUs 2.7正式发布

本文翻译自&#xff1a;Qt for MCUs 2.7 released 原文作者&#xff1a;Qt Group高级产品经理Yoann Lopes 翻译&#xff1a;Macsen Wang Qt for MCUs的新版本已发布&#xff0c;为Qt Quick Ultralite引擎带来了新功能&#xff0c;增加了更多MCU平台的支持&#xff0c;并且我们…

Apache SeaTunnel 社区 3 月月报

各位热爱 SeaTunnel 的小伙伴们&#xff0c;SeaTunnel 社区 3 月月报来啦&#xff01;这里将记录 SeaTunnel 社区每个月的重要更新&#xff0c;并评选出月度之星&#xff0c;欢迎关注。 SeaTunnel 月度 Merge Stars 感谢以下小伙伴 3 月为 Apache SeaTunnel 做的精彩贡献&…

[Java、Android面试]_17_Fragment和Service生命周期

本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天整理一点&#xff0c;后续会陆续分享出来&#xff0c;感兴趣的朋友可关注收…

将数组元素转化为指针的方法

1. 数组名作为指针 int arr[5] {0,1,2,3,4}; int*ptr arr; 2. 取地址 int* ptr &arr[3]; 3.指针算数运算 int* ptr arr; int* p *(arr1);

【个人使用分享】教你大厂云服务器如何选 联机不卡顿 幻兽帕鲁小白一键部署 16G低至26 续费1.5折

更新日期&#xff1a;4月11日&#xff08;半年档 价格回调&#xff0c;京东云采购季持续进行&#xff09; 本文纯原创&#xff0c;侵权必究 《最新对比表》已更新在文章头部—腾讯云文档&#xff0c;文章具有时效性&#xff0c;请以腾讯文档为准&#xff01; 【腾讯文档实时更…

计算机网络——WEB服务器编程实验

实验目的 1. 处理一个 http 请求 2. 接收并解析 http 请求 3. 从服务器文件系统中获得被请求的文件 4. 创建一个包括被请求的文件的 http 响应信息 5. 直接发送该信息到客户端 具体内容 一、C 程序来实现 web 服务器功能。 二、用 HTML 语言编写两个 HTML文件&#xff0c;并…

Java 中装饰模式,请用代码具体举例

装饰器模式允许你通过将对象放入包含行为的特殊包装对象中来为原对象动态添加新的行为。以下是一个简单的 Java 示例&#xff1a; // 定义接口 interface Component {void operation(); }// 具体组件实现接口 class ConcreteComponent implements Component {public void opera…

面向对象设计原则实验“依赖倒置原则”

高层模块不应该依赖于低层模块。二者都应该依赖于抽象。抽象不应该依赖于细节。细节应该依赖于抽象。 &#xff08;开闭原则、里氏代换原则和依赖倒转原则的三个实例很相似&#xff0c;原因是它之间的关系很紧密&#xff0c;在实现很多重构时通常需要同时使用这三个原则。开闭…

python 会员信息管理系统2.0

问题介绍 综合案例实现&#xff1a;会员管理系统设计与实现-V3 利用所学习的知识点 ,结合会员管理系统的分析与实现&#xff0c; 了解面向对象开发过程中类内部功能的分析方法&#xff0c;系统讲解 Python语法、控制结构、四种典型序列 ,函数定义以及面向对象语法和模块的应用…

【RealSense】Ubuntu20.04 安装 Intel RealSense ROS 并使用 D435i 测试

【RealSense】Ubuntu20.04 安装 Intel RealSense ROS 并使用 D435i 测试 1 本机环境2 安装流程3 存在的 bug3.1 Resource not found: rgbd_launch 1 本机环境 Ubuntu20.04ROS Noetic 2 安装流程 参考文档: Link 安装 Intel RealSense™ SDK 2.0&#xff0c;参考上一篇文章: L…