vue+canvas音频可视化

1.代码 

<template><div class="subGuide"><canvas id="canvas"></canvas><br><audio id="audio" src="./audio.mp3" controls></audio></div>
</template><script>
export default {name: 'subGuide',data() {return {}},mounted() {const audioEle = document.querySelector('audio')const cvs = document.querySelector('canvas')const ctx = cvs.getContext('2d')function initCvs() {cvs.width = (window.innerWidth / 2) * devicePixelRatiocvs.height = (window.innerHeight / 3) * devicePixelRatio}initCvs()let isInit = falselet dateArray = nulllet analyser = nullaudioEle.addEventListener('play', function (e) {if (isInit) returnconst audCtx = new AudioContext()const source = audCtx.createMediaElementSource(audioEle)analyser = audCtx.createAnalyser()analyser.fftSize = 512dateArray = new Uint8Array(256)source.connect(analyser)analyser.connect(audCtx.destination)isInit = true})function draw() {requestAnimationFrame(draw)const { width, height } = cvsctx.clearRect(0, 0, width, height)if (!isInit) returnanalyser.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]const 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()},methods: {}
}
</script><style lang="scss" scoped></style>

2.效果

音频可视化

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

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

相关文章

48、PHP 实现冒泡排序法

题目&#xff1a; PHP 实现冒泡排序法 描述&#xff1a; /** 第1趟&#xff1a;3, 6, …2, 6, 3, …2, 6, 3, 4, …2, 6, 3, 4, 10, …1, 6, 3, 4, 10, 2, …1, 6, 3, 4, 10, 2, 9, …1, 6, 3, 4, 10, 2, 9, 8, …1, 6, 3, 4, 10, 2, 9, 8, 5, …1, 6, 3, 4, 10, 2, 9, 8, 5…

音乐曲谱软件Guitar Pro 8.2 for Mac 中文破解版

Guitar Pro 8.2 for Mac 中文破解版是一款功能强大的音乐曲谱软件&#xff0c;非常适合学习如何玩&#xff0c;改进技巧&#xff0c;重现喜爱的歌曲或陪伴自己。 Guitar Pro for Mac 是一款功能强大的音乐曲谱软件&#xff0c;非常适合学习如何玩&#xff0c;改进技巧&#xf…

做一个能和你互动玩耍的智能机器人之一

2024年被很多人称为AI元年&#xff0c;其实AI元年的叫法由来以久&#xff0c;近年来每一次AI技术的进步&#xff0c;都有很多圈内人大呼AI元年&#xff0c;但不仅一直风声不大&#xff0c;雨点也偏小&#xff0c;都是小范围交流。 得益于软硬件的进步&#xff0c;AI今年开始侵…

深度学习系列70:模型部署torchserve

1. 流程说明 ts文件夹下&#xff0c; 从launcher.py进入&#xff0c;执行jar文件。 入口为model_server.py的start()函数。内容包含&#xff1a; 读取args&#xff0c;创建pid文件 找到java&#xff0c;启动model-server.jar程序&#xff0c;同时读取log-config文件&#xff…

数据库表结构创建

一、原型图 二、分析 1、天气&#xff0c;值字段只有实测值&#xff0c;可用一个字段表示&#xff08;单位、来源同上&#xff09; 2、气温有默认值与实测值两个选项&#xff0c;一个字段无法表示默认值与实测值&#xff08;单位&#xff0c;来源同上&#xff09; 3、因为有…

【Kettle实现神通(数据库)MPP增量、全量数据ETL,同步任务Linux运行(通用)】

1、背景介绍 具体Kettle操作步骤不做过多介绍&#xff0c;主要技术方案说明&#xff0c;Kettle8.2版本放在底部链接提取&#xff0c;本次采用Kettle实现源端&#xff1a;神通数据通用库、目标端&#xff1a;神通MPP增量数据同步&#xff0c;并在服务器端运行Job。 2、windows…

【AIGC】构建自己的谷歌搜索引擎服务并使用

一、谷歌 谷歌的搜索引擎需要自己创建服务才能启用检索api。&#xff08;需自行翻墙和创建自己的谷歌账号&#xff09; 1.1 API服务创建 1&#xff09;登陆https://console.cloud.google.com/: 2&#xff09; 选择新建项目&#xff0c;取号项目名即可&#xff08;比如:Olin…

在 Windows 搭建 flink 运行环境并模拟流数据处理

一、引入 在大数据场景中,开发者追求高效与灵活,Linux 系统以其稳定性成为众多组件的首选,但在资源有限的情况下,在本机搭建一个 Linux 虚拟机集群却显得过于笨重,启动、运行占资源,需要配置网络,无法和windows共享资源,尤其是对只有 8GB 内存的 Windows 系统用户来说…

钙成像数据建模为行为事件

摘要 我在触摸屏盒中记录了小鼠在进行行为学习任务时的钙映像数据。 我想找到一种方法来整合神经数据&#xff08;100 个个体细胞随时间的活动&#xff08;约 30,000 x 约 30 毫秒时间段&#xff09;&#xff09;和行为数据&#xff08;动物在行为任务期间做出的时间戳动作和决…

2.4 openCv -- 对图像操作

处理图像 从文件加载图像: Cpp 1Mat img = imread(filename); 如果读取的是 JPG 文件,默认会创建一个三通道的图像。如果你需要灰度图像,可以使用: Cpp 1Mat img = imread(filename, IMREAD_GRAYSCALE); 注意 文件的格式由其内容(前几个字节)决定。要将图像保存到文…

[Mysql-视图和存储过程]

视图 视图是从一个或者几个基本表&#xff08;或视图&#xff09;导出的表。它与基 本表不同&#xff0c;是一个虚表。 创建使用视图 # 视图 -- 视图只能用来查询&#xff0c;不能做增删改 -- 创建视图 -- create view 视图名【view_xxx / v_xxx】 -- as 查询语句 create view…

电脑如何进行录屏?电脑录屏无压力!

在数字时代&#xff0c;屏幕录制已成为我们日常生活和工作中不可或缺的一部分。无论你是想要制作教程、记录游戏过程&#xff0c;还是捕捉在线会议的精彩瞬间&#xff0c;掌握屏幕录制的方法都显得尤为重要。本文将为你详细介绍电脑如何进行录屏&#xff0c;帮助你轻松捕捉屏幕…

MySql 触发器、存储器练习

一&#xff1a; 触发器 1、建立两个表:goods(商品表)、orders(订单表) 查看数据库&#xff1a;mysql> show databases; 使用数据库&#xff1a;mysql> use mydb16_trigger; 创建goods表&#xff1a; mysql> create table goods(gid char(8) not null primary key, …

免费【2024】springboot 畅游游戏销售平台

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

AnyMP4 Data Recovery for Mac v1.5.8免激活版:高效数据恢复新选择

AnyMP4 Data Recovery for Mac是一款专为Mac用户设计的高效数据恢复软件&#xff0c;凭借其强大的功能和简洁的操作界面&#xff0c;为用户提供了快速、安全的数据恢复体验。 该软件支持恢复多种文件类型&#xff0c;包括照片、视频、音频、文档等&#xff0c;无论是常见的图片…

pytorch-梯度下降

梯度下降 y x 2 ∗ s i n ( x ) y ′ 2 x s i n x x 2 c o s x x 1 x − Δ y ′ ( x ) 其中 Δ 表示学习率&#xff0c; y ′ ( x ) 代表 y 在 x 点处关于 x 的梯度。 y x^2 * sin(x) \\ y 2xsinxx^2cosx \\ x_1 x - \Delta y(x) \\ 其中 \Delta 表示学习率&#xff0c…

【1.0】drf初识

【1.0】drf初识 【一】前后端开发模式 【1】前后端混合开发 【示例】flask混合、django混合【案例】bbs项目 模板&#xff1a;dtl语法&#xff08;django template language)模板语法 {{}} /{% %}后端渲染 qs对象–遍历循环到模板中–使用模板语法渲染渲染完成后 得到纯粹的…

STM32自定义协议串口接收解析指令程序

1、在使用串口接收自定义协议指令时&#xff0c;需要串口解析收到的是什么指令&#xff0c;举例通信报文为 上位机->单片机 名称 长度 备注 帧头 1Byte 0x5A 0x5A 帧长度 1Byte 数据包的长度0x00-0xFF 数据包 命令字 1Byte 功能标识 数据 可以为空 校验 …

python机器学习8--自然语言处理(2)

1&#xff0e;移除用词 在很多情况下&#xff0c;有一些文章内的英文字符、标点符号分词的结果不符合自己的预期&#xff0c;会出现一些不想要的分词&#xff0c;此时就能通过以下的函数自己设定用词&#xff0c;并且删除。 jieba.analyse.set_stop_words("stop_words.tx…

Ubuntu 防火墙设置

目录 1. 安装防火墙 2. 开启和关闭防火墙 3. 开放端口和服务规则 4. 关闭端口和删除服务规则 5. 查看防火墙状态 1. 安装防火墙 如果已经安装就忽略 # 安装ufw&#xff08;Uncomplicated Firewall&#xff09;&#xff0c;这是Ubuntu上管理防火墙的一个简单工具 sudo ap…