当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/nibabaoo/article/details/137646829 2024/11/1 18:26:54

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>

相关文章：

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

1、演示 2、代码分析 逐行解析 JavaScript 代码块&#xff1a; const audioEle document.querySelector(audio) const cvs document.querySelector(canvas) const ctx cvs.getContext(2d)这几行代码首先获取了 <audio> 和 <canvas> 元素的引用&#xff0c;并使用…...

编程日记 2024/4/14 21:40:38

【计算机毕业设计】基于Java+SSM的实战开发项目150套(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f9e1;今天给大家分享150的Java毕业设计&#xff0c;基于ssm框架&#xff0c;这些项目都经过精心挑选&#xff0c;涵盖了不同的实战主题和用例&#xff0c;可做毕业设计和课程…...

编程日记 2024/4/14 21:39:37

STM32H7的MPU学习和应用示例

STM32H7的MPU学习记录 什么是MPU&#xff1f;MPU的三种内存类型内存映射MPU保护区域以及优先级 MPU的寄存器XN位AP位TEX、C、B、S位SRD 位SIZE 位CTRL 寄存器的各个位 示例总结 什么是MPU&#xff1f; MPU&#xff08;Memory Protection Unit&#xff0c;内存保护单元&#xf…...

编程日记 2024/4/14 21:37:35

964: 数细胞

样例&#xff1a; 解法&#xff1a; 1.遍历矩阵 2.判断矩阵[i][j]&#xff0c;若是未标记细胞则遍历相邻所有未标记细胞并标记&#xff0c;且计数 实现&#xff1a;遍历相邻所有未标记细胞 以DFS实现&#xff1a; function dfs(当前状态) {if (终止条件) {}vis[标记当前状…...

编程日记 2024/4/14 21:36:34

流程图步骤条

1.结构 <ul class"stepUl"> <li class"stepLi" v-for"(item, index) in stepList" :key"index"> <div class"top"> <p :class"{active: currentState > item.key}">{{ item.value }}…...

编程日记 2024/4/14 21:34:31

GPT知识库浅析

一、引言 上篇文章《GPT简介及应用》介绍了GPT的应用场景&#xff0c;里面提到GPT bot的基本使用&#xff1a;基于GPT训练好的数据&#xff0c;回答用户的问题。 但在使用过程中&#xff0c;如果用户的问题里面出现最新的术语&#xff0c;就会出现这种提示&#xff1a; 截至我…...

编程日记 2024/4/14 21:33:30

SpringMVC--SpringMVC的视图

目录 1. 总述 2. ThymeleafView视图 3. 转发视图 4. 重定向视图 5. 视图控制器view-controller 1. 总述 在SpringMVC框架中&#xff0c;视图&#xff08;View&#xff09;是一个非常重要的概念&#xff0c;它负责将模型数据&#xff08;Model&#xff09;展示给用户。简单…...

编程日记 2024/4/14 21:32:29

Datax，hbase与mysql数据相互同步

参考文章&#xff1a;datax mysql 和hbase的 相互导入 目录 0、软件版本说明 1、hbase数据同步至mysql 1.1、hbase数据 1.2、mysql数据 1.3、json脚本&#xff08;hbase2mysql.json&#xff09; 1.4、同步成功日志 2、mysql数据同步至hbase 1.1、hbase数据 1.2、mysql…...

编程日记 2024/4/14 21:28:24

ubuntu spdlog 封装成c++类使用

安装及编译方法&#xff1a;ubuntu spdlog 日志安装及使用_spdlog_logger_info-CSDN博客 h文件&#xff1a; #ifndef LOGGING_H #define LOGGING_H#include <iostream> #include <cstring> #include <sstream> #include <string> #include <memor…...

编程日记 2024/4/14 21:27:23

【C语言】——字符串函数的使用与模拟实现（上）

【C语言】——字符串函数 前言一、 s t r l e n strlen strlen 函数1.1、函数功能1.2、函数的使用1.3、函数的模拟实现&#xff08;1&#xff09;计数法&#xff08;2&#xff09;递归法&#xff08;3&#xff09;指针 - 指针 二、 s t r c p y strcpy strcpy 函数2.1、函数功能…...

编程日记 2024/4/14 21:26:22

数据库（1）

目录 1.什么是事务&#xff1f;事务的基本特性ACID&#xff1f; 2.数据库中并发一致性问题&#xff1f; 3.数据的隔离等级&#xff1f; 4.ACID靠什么保证的呢&#xff1f; 5.SQL优化的实践经验&#xff1f; 1.什么是事务&#xff1f;事务的基本特性ACID&#xff1f; 事务指…...

编程日记 2024/4/14 21:24:20

VirtualBox - 与 Win10 虚拟机 与 宿主机 共享文件

原文链接 https://www.cnblogs.com/xy14/p/10427353.html 1. 概述 需要在 宿主机 和 虚拟机 之间交换文件复制粘贴 貌似不太好使 2. 问题 设置了共享文件夹之后, 找不到目录 3. 环境 宿主机 OS Win10开启了 网络发现 略虚拟机 OS Win10开启了 网络发现 略Virtualbox 6 4…...

编程日记 2024/4/14 21:23:19

深入浅出 useEffect：React 函数组件中的副作用处理详解

useEffect 是 React 中的一个钩子函数&#xff0c;用于处理函数组件中的副作用操作&#xff0c;如发送网络请求、订阅消息、手动修改 DOM 等。下面是 useEffect 的用法总结&#xff1a; 基本用法 import React, { useState, useEffect } from react;function Example() {cons…...

编程日记 2024/4/14 21:22:16

《QT实用小工具·十九》回车跳转到不同的编辑框

1、概述 源码放在文章末尾 该项目实现通过回车键让光标从一个编辑框跳转到另一个编辑框&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget>namespace Ui { class Widget; }class Widget : p…...

编程日记 2024/4/14 21:21:15

基本的数据类型在16位、32位和64位机上所占的字节大小

1、目前常用的机器都是32位和64位的&#xff0c;但是有时候会考虑16位机。总结一下在三种位数下常用的数据类型所占的字节大小。 数据类型16位(byte)32位(byte)64位(byte)取值范围char111-128 ~ 127unsigned char1110 ~ 255short int / short222-32768~32767unsigned short222…...

编程日记 2024/4/14 21:20:13

关注招聘 关注招聘 关注招聘

&#x1f525;关注招聘 &#x1f525;关注招聘 &#x1f525;关注招聘 &#x1f525;开源产品&#xff1a; 1.农业物联网平台开源版 2.充电桩系统开源版 3.GPU池化软件(AI人工智能训练平台/推理平台) 开源版 产品销售&#xff1a; 1.农业物联网平台企业版 2.充电桩系统企业…...

编程日记 2024/4/14 21:19:12

Django框架设计原理

相信大多数的Web开发者对于MVC&#xff08;Model、View、Controller&#xff09;设计模式都不陌生&#xff0c;该设计模式已经成为Web框架中一种事实上的标准了&#xff0c;Django框架自然也是一个遵循MVC设计模式的框架。不过从严格意义上讲&#xff0c;Django框架采用了一种更…...

编程日记 2024/4/14 21:18:10

Linux ARM平台开发系列讲解（QEMU篇） 1.2 新添加一个Linux kernel设备树

1. 概述 上一章节我们利用QEMU成功启动了Linux kernel，但是细心的小伙伴就会发现，我们用默认的defconfig是没有找到设备树源文件的，但是又发现kernel启动时候它使用了设备树riscv-virtio,qemu，这是因为qemu用了一个默认的设备树文件，该章节呢我们就把这个默认的设备树文件…...

编程日记 2024/4/14 21:17:09

OSPF动态路由实验（思科）

华为设备参考&#xff1a; 一&#xff0c;技术简介 OSPF&#xff08;Open Shortest Path First&#xff09;是一种内部网关协议&#xff0c;主要用于在单一自治系统内决策路由。它是一种基于链路状态的路由协议&#xff0c;通过链路状态路由算法来实现动态路由选择。 OSPF的…...

编程日记 2024/4/14 21:16:08

MyBatis 等类似的 XML 映射文件中，当传入的参数为空字符串时，＜if＞ 标签可能会导致 SQL 语句中的条件判断出现意外结果。

问题 传入的参数为空字符串&#xff0c;但还是根据参数查询了。 原因 在 XML 中使用 标签进行条件判断时&#xff0c;需要明确理解其行为。在 MyBatis 等类似的 XML 映射文件中&#xff0c; 标签通常用于动态拼接 SQL 语句的条件部分。当传入的参数 riskLevel 为空字符串时…...

编程日记 2024/4/14 21:15:07

git的安装

git的安装 在CentOS系统上安装git时&#xff0c;我们可以选择yum安装或者源码编译安装两种方式。Yum的安装方式的好处是比较简单&#xff0c;直接输入”yum install git”命令即可。但是Yum的安装的话&#xff0c;不好控制安装git的版本。如果我们想选择安装git的版本&#xf…...

编程日记 2024/4/14 21:14:05

蓝桥杯嵌入式模板（cubemxkeil5）

LED 引脚PC8~PC15&#xff0c;默认高电平&#xff08;灭&#xff09;。 此外还要配置PD2为输出引脚&#xff08;控制LED锁存&#xff09; &#xff0c;默认低电平&#xff08;锁住&#xff09;&#xff01;&#xff01;&#xff01; #include "led.h"void led_disp…...

编程日记 2024/4/14 21:12:03

ELFK （Filebeat+ELK）日志分析系统

一. 相关介绍 Filebeat&#xff1a;轻量级的开源日志文件数据搜集器。通常在需要采集数据的客户端安装 Filebeat&#xff0c;并指定目录与日志格式&#xff0c;Filebeat 就能快速收集数据&#xff0c;并发送给 logstash 进或是直接发给 Elasticsearch 存储&#xff0c;性能上相…...

编程日记 2024/4/14 21:11:02

HttpClient、OKhttp、RestTemplate接口调用对比（ Java HTTP 客户端）

文章目录 HttpClient、OKhttp、RestTemplate接口调用对比HttpClientOkHttprestTemplate HttpClient、OKhttp、RestTemplate接口调用对比 HttpClient、OkHttp 和 RestTemplate 是三种常用的 Java HTTP 客户端库&#xff0c;它们都可以用于发送 HTTP 请求和接收 HTTP 响应&#…...

编程日记 2024/4/14 21:08:59

[旅游] 景区排队上厕所

人有三急&#xff0c;急中最急是上个厕所要排队&#xff0c;而且人还不少&#xff01;这样就需要做一个提前量的预测&#xff0c;万一提前量的预测&#xff0c;搞得不当&#xff0c;非得憋出膀光炎&#xff0c;或者尿裤子。尤其是女厕所太少&#xff01;另外一点是儿童根本就没…...

编程日记 2024/4/14 21:06:57

三 maven的依赖管理

一 maven依赖管理 Maven 依赖管理是 Maven 软件中最重要的功能之一。Maven 的依赖管理能够帮助开发人员自动解决软件包依赖问题&#xff0c;使得开发人员能够轻松地将其他开发人员开发的模块或第三方框架集成到自己的应用程序或模块中&#xff0c;避免出现版本冲突和依赖缺失等…...

编程日记 2024/4/14 21:05:56

iperf3 网络性能测试

iperf3测试 1、iperf3简介 iperf3是一个主动测试网络带宽的工具&#xff0c;可以测试iTCP、UDP、SCTP等网络带宽&#xff1b;可以通过参数修改网络协议、缓冲区、测试时间、数据大小等&#xff0c;每个测试结果会得出吞吐量、带宽、重传数、丢包数等测试结果 2、参数详解 通…...

编程日记 2024/4/14 20:59:48

08 Php学习：if语句、Switch语句

PHP 条件语句 当您编写代码时&#xff0c;您常常需要为不同的判断执行不同的动作。您可以在代码中使用条件语句来完成此任务。 在 PHP 中&#xff0c;提供了下列条件语句&#xff1a; if 语句 - 在条件成立时执行代码 if…else 语句 - 在条件成立时执行一块代码&#xff0c;…...

编程日记 2024/4/14 20:56:44

二分查找的边界问题是怎么产生的？

总结&#xff1a;二分查找的目标有两个&#xff0c;一个是左区件的右边界&#xff0c;一个是右区间的左边界 如何去理解二分的过程&#xff1f; 如果要查找的是左区间的右边界&#xff1a; 可以将[l, r]理解一个集合&#xff0c;这个集合范围内的数都有可能是最后需要得到的…...

编程日记 2024/4/14 20:55:42

华为 2024 届校园招聘-硬件通⽤/单板开发——第十套

华为 2024 届校园招聘-硬件通⽤/单板开发——第十套 部分题目分享&#xff0c;完整版带答案(有答案和解析&#xff0c;答案非官方&#xff0c;未仔细校正&#xff0c;仅供参考&#xff09;&#xff08;共十套&#xff09;获取&#xff08;WX:didadidadidida313&#xff0c;加我…...

编程日记 2024/4/14 20:52:39

网站管理教程/今日国际新闻摘抄

&#xfeff;&#xfeff;孙广东&#xff1a;2015-2-6/2:28 转载请注明出处&#xff1a;http://blog.csdn.net/u010019717 更全的内容请看我的游戏蛮牛地址&#xff1a;http://www.unitymanual.com/space-uid-18602.html 先看一下效果&#xff1a;区别就是一个2d一个3d. 2d就…...

编程日记 2024/11/1 12:19:18

政府网站cms模板/网络黄页推广软件哪个好

本篇文章主要给大家介绍关于css实现图片的滑动效果示例&#xff0c;希望大家阅读完本篇后对css滑动效果的相关知识有所了解。下面给大家举一个简单的css图片滑动效果示例(自下而上滑动)&#xff1a;css怎么实现图片滑动img{height: 200px;width: 200px;}.slider {overflow-y: h…...

编程日记 2024/11/1 11:35:29

广州白云网站建设公司/产品推广平台有哪些

方法1&#xff1a;快捷键&#xff1a;CtrlF5 方法2&#xff1a;菜单栏 > Display > Color/visibility 方法3&#xff1a;点击四色块状的图标 配置项1&#xff1a;透明度 Global Transparency &#xff0c;全局透明度&#xff0c;建议设置70%以上&#xff0c;接近实心…...

编程日记 2024/11/1 9:53:51

浏览器怎么打开网站服务器设置/广告营销推广方案

此题不具有代表性 也不怎么好I Hate It Time Limit: 9000/3000 MS (Java/Others)Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 14776Accepted Submission(s): 5722Problem Description很多学校流行一种比较的习惯。老师们很喜欢询问&#xff0c;从某某到某…...

编程日记 2024/11/1 5:50:18

友情链接购买平台/seo 优化 工具

题目 正常情况下&#xff0c;数据包由起始码(16bit)、数据段(n字节,n<256)、结束码(16bit)三部分构成。起始码为0xFF00,结束码为0xFF01。在一个完整的数据包中&#xff0c;数据段部分不会出现起始码和结束码。请设计一个电路&#xff0c;在码流中检测完整且有效的数据包&am…...

编程日记 2024/11/1 4:08:45

建设工程施工安全网站/高端网站建设定制

神码ai人工智能写作机器人以下是摘自Earle Castledine撰写的新书HTML5 Games&#xff1a;Ninja的新手 。 这本书的访问权限包含在SitePoint Premium会员资格中&#xff0c;或者您可以在世界各地的商店中索取副本。 您可以在此处查看第一章的免费样本 。 现在&#xff0c;我们拥…...

编程日记 2024/11/1 3:59:34