【音频可视化】通过canvas绘制音频波形图
前言
这两天写项目刚好遇到Ai对话相关的需求,需要录音功能,绘制录制波形图,写了一个函数用canvas实现可视化,保留分享一下,有需要的直接粘贴即可,使用时传入一个1024长的,0-255大小的Uint8Array类型音频数据源
<canvas ref="canvasRef" width="800" height="200"></canvas>
const drawWaveform = (audioArray) => {const canvas = canvasRef.value;if (!canvas || !audioArray) return;const ctx = canvas.getContext('2d');if (!ctx) return;const width = canvas.width;const height = canvas.height;const bufferLength = audioArray.length;// 清除画布ctx.clearRect(0, 0, width, height);// 设置线条样式ctx.strokeStyle = '#4f35b5';ctx.lineWidth = 2;ctx.beginPath();const sliceWidth = width / bufferLength;let x = 0;for (let i = 0; i < bufferLength; i++) {const value = audioArray[i] / 255.0; // 将0-255的值归一化为0-1const y = value * height;if (i === 0) {ctx.moveTo(x, y);} else {ctx.lineTo(x, y);}x += sliceWidth;}ctx.stroke();
};
通过requestAnimationFrame调用即可
示例:
// 持续更新波形
const updateWaveform = () => {ensureRecorder(() => {audioArray.value = recorder!.getRecordAnalyseData();drawWaveform(audioArray.value);animationFrameId = requestAnimationFrame(updateWaveform);});
};
相关文章:
【音频可视化】通过canvas绘制音频波形图
前言 这两天写项目刚好遇到Ai对话相关的需求,需要录音功能,绘制录制波形图,写了一个函数用canvas实现可视化,保留分享一下,有需要的直接粘贴即可,使用时传入一个1024长的,0-255大小的Uint8Arra…...
解决github每次pull push输入密码问题
# 解决git pull/push每次都需要输入密码问题 git bash进入你的项目目录,输入: git config --global credential.helper store然后你会在你本地生成一个文本,上边记录你的账号和密码。配置项写入到 "C:\Users\用户名\ .gitconfig" …...
Java重修笔记 第六十四天 坦克大战(十四)IO 流 - 标准输入输出流、InputStreamReader 和 OutputStreamWriter
标准输入输出流 1. System.in 标准输入流 本质上是一个InputString,对应键盘,表示从键盘输入。 定义:public final static InputStream in null; 所以 Scanner scanner new Scanner(System.in); 会从键盘中获取数据 2. System.out 标准输…...
prctl的函数和pthread_self函数
1.prctl的函数原型如下: #include<sys/prctl.h> prctl(PR_SET_NAME, “process_name”);第一个参数是操作类型,指定PR_SET_NAME(对应数字15),即设置进程名; 第二个参数是进程名字符串,…...
Vim 命令行模式下的常用命令
Vim 命令行模式下的常用命令 文件操作: :w :保存当前文件。:w filename :将当前内容另存为指定的 filename 。:q :退出 Vim,如果文件有修改但未保存,会提示错误。:q! :强制退出 Vim,…...
【动态规划-最长递增子序列(LIS)】力扣2826. 将三个组排序
给你一个整数数组 nums 。nums 的每个元素是 1,2 或 3。在每次操作中,你可以删除 nums 中的一个元素。返回使 nums 成为 非递减 顺序所需操作数的 最小值。 示例 1: 输入:nums [2,1,3,2,1] 输出:3 解释: …...
Elastic Stack--16--ES三种分页策略
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 方式一:from size实现原理使用方式优缺点 方式二:scroll实现原理使用方式优缺点 方式三:search_after实现原理使用方式优缺点 三…...
[LeetCode] 315. 计算右侧小于当前元素的个数
题目描述: 给你一个整数数组 nums ,按要求返回一个新数组 counts 。数组 counts 有该性质: counts[i] 的值是 nums[i] 右侧小于 nums[i] 的元素的数量。 题目链接: . - 力扣(LeetCode) 题目主要思路&a…...
【hot100-java】二叉树展开为链表
二叉树篇。 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {* …...
如何在在 YOLOv3模型中添加Attention机制
在YOLOv3模型中添加Attention机制需要以下几个步骤: 1. 规定格式 当添加新的模块(如Attention机制模块)时,需要像定义[convolutional]、[maxpool]等层在cfg文件中的格式一样,对新模块进行格式规定。例如对于SE模块&a…...
单点登录Apereo CAS 7.1安装配置教程
笔者目前正在做一个单点登录的课题,历时较长总算摸到一些门路,其中的辛酸不易按下不表。截至本文发布,CAS的最新版本为7.1。由于涉及到课题内容,而且内容比较新,整理试验不容易,暂时只对VIP开放,后续课题完成后会完全开放,敬请谅解。 CAS项目区别 在CAS的项目选择上,…...
windows C++-移除界面工作线程(一)
本文档演示了如何使用并发运行时将 Microsoft 基础类 (MFC) 应用程序中由用户界面 (UI) 线程执行的工作移动到工作线程。 本文档还演示了如何提高冗长绘制操作的性能。 通过将阻塞性操作(例如,绘制)卸载到工作线程来从 UI 线程中移除工作&am…...
Qt小bug — LINK : fatal error LNK1158: 无法运行“rc.exe“
Qt小bug —— LINK :fatal error LNK1158:无法运行"rc.exe" 环境 Qt 5.14.2 MSVC 2015 x64 现象 解决 在电脑上找到rc.exe 和rcdll.dll (一般在C:\Program Files(x86)\Windows Kits*\bin\x64下面)拷贝到 C:\Qt\Qt5…...
c++小游戏
目录 狼人杀 走迷宫 炸弹人 贪吃蛇 飞翔的小鸟 跑酷 吃豆人 飞机大战 人生模拟器 坦克大战 修仙模拟器 搜集了一些小游戏,名字下是个人是个人喜欢度,可供参考~ 狼人杀 ❤❤❤❤ #include<bits/stdc.h> #include<cstdio> #incl…...
k8s为什么用Calico
Calico是一种开源的网络和安全解决方案,主要用于容器、虚拟机、宿主机之间的网络连接。 它支持Kubernetes、OpenShift、Docker EE、OpenStack等PaaS或IaaS平台,提供高效的网络通信和安全控制功能12。 Calico的核心组件包括Felix、etcd、BIRD等。F…...
HashMap 和 Hashtable 有什么区别?
HashMap和Hashtable都是Java中常用的存储键值对的集合类,它们都实现了Map接口,但二者之间存在一些显著的区别。以下是对HashMap和Hashtable区别的详细归纳: 一、线程安全性 HashMap:是非线程安全的,即多个线程可以同…...
【机器学习】深度学习、强化学习和深度强化学习?
深度学习、强化学习和深度强化学习是机器学习的三个重要子领域。它们有着各自独特的应用场景和研究目标,虽然都属于机器学习的范畴,但各自的实现方式和侧重点有所不同。 1. 深度学习(Deep Learning) 深度学习是一种基于神经网络的…...
fastadmin 多商户模式下侧边栏跳转路径BUG
记录:仅作自己项目记录,在一个域名下部署多套项目时,若不是多商户模式项目会出现跳转路径问题。 修改 \manystore\library\Auth.php 文件的 getSidebar 方法 // 1 改为: $v[url] isset($v[url]) && $v[url] ? $v[url]…...
java内置的四种函数式接口
供给型:Supplier 无入参,有返回值。 FunctionalInterface public interface Supplier<T> {T get();}消费型:Consumer 有入参,无返回值。 FunctionalInterface public interface Consumer<T> {void accept(T t);de…...
如何获取 uni-app 应用发布所需的证书、私钥与配置文件
引言 在开发和发布iOS应用时,开发者常常会面临一系列复杂的证书、私钥密码以及配置文件的管理问题。这些配置不仅影响到应用的开发调试,还决定了应用是否能够顺利通过审核并发布到App Store。对于使用uni-app进行开发的开发者来说,自动生成的…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
安卓基础(aar)
重新设置java21的环境,临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的: MyApp/ ├── app/ …...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
