js 选择一个音频文件,绘制音频的波形,从右向左逐渐前进。

选择一个音频文件,绘制波形,从右向左逐渐前进。
在这里插入图片描述

在这里插入图片描述

完整代码:

<template><div><input type="file" ="handleFileChange" accept="audio/*" /><button ="stopPlayback" :disabled="!isLoaded">停止</button><canvas ref="canvas" width="1201" height="211"></canvas></div>
</template><script>
import axios from "axios";export default {data() {return {// audioUrl:"http://121.41.225.74:9091/mintti/app/storage/newFile/b26uvk9ipd8n5iop1lzs.wav",audioUrl: "http://121.41.225.74:9091/mintti/app/storage/newFile/c19xqqqtd8ywqyaf8gno.wav",// audioUrl: "http://121.41.225.74:9091/mintti/app/storage/newFile/d3msxipdfxrbyijm3ys0.wav",// audioUrl:"http://121.41.225.74:9091/mintti/app/storage/newFile/xm456t9dptsrigxye84q.wav",dataArray: [],isPlaying: false,isLoaded: false,drawInterval: 200, // 设置绘制的时间间隔(单位:毫秒)drawIntervalId: null,fileData: new Int8Array(0),index: 0,mWidth: 0,mHeight: 0,}},mounted() {const ctx = this.$refs.canvas.getContext('2d')this.drawGrid(ctx)this.downloadAudio()},methods: {// 下载音频文件downloadAudio() {axios({method: 'get',url: this.audioUrl,responseType: 'arraybuffer'}).then(res => {if (!res) {return;}console.log("decodeAudioData")this.loadAudio(res.data)}).catch(error => {console.error('下载音频时出错:', error);});;},handleFileChange(event) {this.isLoaded = falseconst file = event.target.files[0]this.stopPlayback()const reader = new FileReader();reader.onload = (e) => {console.log("onLoad")this.loadAudio(e.target.result)};reader.readAsArrayBuffer(file);},loadAudio(res) {this.dataArray = []this.isLoaded = truethis.index = 0;// 获取文件的前 100 个字节this.fileData = new Int8Array(res);this.refreshData()this.drawIntervalId = setInterval(() => {console.log("定时器执行了")this.refreshData()}, this.drawInterval)//循环读取},refreshData() {let i = this.indexconsole.log("文件总长度:" + this.fileData.byteLength + ",,i=" + i)if (i * 1600 + 44 > this.fileData.byteLength) {clearInterval(this.drawIntervalId)return}const byteArray = this.fileData.slice(i * 1600 + 44, (i + 1) * 1600 + 44);// 创建一个新的 Uint16Array,长度为 byteArray 的一半let shortArray = new Int16Array(byteArray.length / 2)//遍历 byteArray,将每两个字节合并成一个短整型for (let i = 0; i < byteArray.length; i += 2) {shortArray[i / 2] = (byteArray[i] & 0xFF) | (byteArray[i + 1] & 0xFF) << 8;}const step = 10;for (let i = 0; i < shortArray.length; i += step) {// console.log(i + "文件short值:" + shortArray[i])if (this.mWidth > 0 && this.dataArray.length >= this.mWidth) {this.dataArray.shift()}this.dataArray.push(shortArray[i])}this.isPlaying = truethis.draw2();this.index += 1;},stopPlayback() {console.log("停止播放-stopPlayback")this.isPlaying = falseclearInterval(this.drawIntervalId)const ctx = this.$refs.canvas.getContext('2d')ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)this.drawGrid(ctx)},draw2() {if (!this.isPlaying) {return}// console.log('开始绘图-draw')const ctx = this.$refs.canvas.getContext('2d')ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)this.drawGrid(ctx)this.drawWaveform(ctx)},drawGrid(ctx) {const { width, height } = ctx.canvasthis.mWidth = ctx.canvas.widththis.mHeight = ctx.canvas.heightctx.strokeStyle = '#ccc'ctx.lineWidth = 1for (let i = 0; i < height; i += 10) {ctx.beginPath()ctx.moveTo(0, i)ctx.lineTo(width, i)ctx.stroke()}for (let j = 0; j < width; j += 10) {ctx.beginPath()ctx.moveTo(j, 0)ctx.lineTo(j, height)ctx.stroke()}},drawWaveform(ctx) {ctx.beginPath()ctx.lineWidth = 1ctx.strokeStyle = '#25ebd7'let x = 0let len = this.dataArray.length;let index = this.mWidth - len;for (let i = index + 1; i < this.mWidth; i++) {const mCenterY = this.mHeight / 2;const y = mCenterY - (this.dataArray[i - index - 1] / (32768 / mCenterY));// console.log(`i=${i},position=${i - index - 1},,data=${this.dataArray[i - index - 1]},,y=${y},,mCenterY=${mCenterY}`)x = i - 1;ctx.lineTo(x, y)ctx.stroke()}},}
}
</script>

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

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

相关文章

Typora编辑的markdown文档莫名其妙消失或未保存--解决方案【亲测可行】

由于误触键盘导致文件关闭&#xff0c;打开文件之后发现里面文字全没了~气死了&#xff01;&#xff01;&#xff01;&#xff01; 可以通过如下方法解决&#xff01; 一、打开typora 二、【文件】-【偏好设置】 三、点击恢复未保存的草稿&#xff0c;找到最近的文件复制粘贴…

django 内置 JSON 字段 使用场景

Django 内置的 JSON 字段&#xff08;JSONField&#xff09;是在 Django 3.1 版本中引入的&#xff0c;用于处理 JSON 格式的数据。JSONField 允许在数据库表中存储和查询 JSON 数据&#xff0c;并且在与 Python 代码交互时自动转换为合适的 Python 数据类型。以下是一些常见的…

nignx简易安装脚本

yum -y install gcc gcc-c pcre pcre-devel gd-devel openssl openssl-devel zlib zlib-devel id nginx || useradd nginx wget http://nginx.org/download/nginx-1.16.0.tar.gz tar xzf nginx-1.16.0.tar.gz cd nginx-1.16.0/ #预编译 ./configure \ --prefix/usr/loc…

2024050302-重学 Java 设计模式《实战享元模式》

重学 Java 设计模式&#xff1a;实战享元模式「基于Redis秒杀&#xff0c;提供活动与库存信息查询场景」 一、前言 程序员&#x1f468;‍&#x1f4bb;‍的上下文是什么&#xff1f; 很多时候一大部分编程开发的人员都只是关注于功能的实现&#xff0c;只要自己把这部分需求…

Facebook商城号怎么做?思路与操作分析

2016 年&#xff0c;Facebook打造了同名平台 Facebook Marketplace。通过利用 Facebook 现有的庞大客户群&#xff0c;该平台取得了立竿见影的成功&#xff0c;每月访问量将超过 10 亿。对于个人卖家和小企业来说&#xff0c;Facebook Marketplace是一个不错的销货渠道&#xf…

动态规划实现斐波那契数列,时间复杂度和空间复杂度解析

动态规划实现斐波那契数列 代码回顾&#xff1a; #include <iostream> using namespace std;// 动态规划实现&#xff0c;时间复杂度 O(n) unsigned long long fibonacciDP(int n) {if (n < 1) return n;unsigned long long prev2 0;unsigned long long prev1 1;u…

【面试宝藏】Redis 常见面试题解析其二

Redis 高级面试题解析 20. 说说 Redis 哈希槽的机制&#xff1f; Redis 集群采用哈希槽&#xff08;Hash Slot&#xff09;机制来分布和管理数据。整个哈希空间被划分为 16384 个槽&#xff0c;每个键通过 CRC16 校验后取模映射到一个哈希槽。每个节点负责一部分哈希槽&#…

【二进制部署k8s-1.29.4】十一、metallb的安装部署

文章目录 简介 一.安装metallb二.配置metallb三.验证metallb 简介 本章节主要讲解安装metallb-v0.7.1的安装&#xff0c;metallb算是平民版的负载均衡&#xff0c;用于测试、访问量较小的情况还是比较不错的&#xff0c;但是对于请求量比较的时候&#xff0c;由于流量都集中在一…

猫熊超市管理系统

import java.util.Scanner;//增加商品类 //此类用来录入一个商品的所有属性&#xff0c;并作为结果对其返回 public class Add {public Goods add1() {Scanner scanner new Scanner(System.in);System.out.println("请输入商品名称");String name scanner.next();S…

表示学习(Representation learning)以及相关(半监督)论文阅读

引言: 这篇博客主要介绍的是表示学习(representation learning),在此基础上,研究了Circle loss这篇CVPR文章。感觉所谓的半监督,目前,在图像分类领域作用寥寥,图数据已经与图像这类数据不是一个类别了。 表示学习(Representation learning)以及相关(半监督)论文阅读…

dns域名解析服务和bond网卡

目录 dns域名解析服务 一、DNS 1、定义 2、以www.baidu.com为例 3、域名体系结构 4、DNS解析使用的协议和端口 5、dns域名解析的过程 6、dns解析的优先级 二、如何实现域名解析 1、域名解析 2、bind配置文件位置 &#xff08;一&#xff09;正向解析 &#xff08;…

fedora40上安装dotnet-sdk-6.0

电脑已经安装过vs code&#xff0c;但是在终端上执行&#xff1a;dotnet --version还是报错。 现在要重新安装dotnet-sdk-6.0 1、确保清理干净之前的安装 首先&#xff0c;移除可能的残留文件&#xff1a; sudo dnf remove dotnet-sdk-6.0 sudo rm -rf /usr/share/dotnet/ …

Python面试宝典:Python中与Pandas数据分析相关的面试笔试题(1000加面试笔试题助你轻松捕获大厂Offer)

Python面试宝典:1000加python面试题助你轻松捕获大厂Offer【第二部分:Python高级特性:第十九章:数据处理和分析:第二节:Pandas数据分析】 第十九章:数据处理和分析第二节:Pandas数据分析1. Pandas的核心数据结构2. 创建Series和DataFrame3. 数据访问和选择4. 数据清洗5…

利他性「销售」回复话术|学会事半功倍!

【菜鸟】&#xff1a;我给你的真的已经是最低价了 【销冠】&#xff1a;现在市场竞争这么激烈&#xff0c;能给你少100我都不会给你少报1块的&#xff0c;我的目的是留下你呀&#xff0c;又怎么会傻到报高价格把你拒之门外呢 【菜鸟】&#xff1a;适合你的才是最好的产品&#…

层出不穷的大模型产品,你怎么选?

随着近日腾讯元宝APP的正式上线&#xff0c;国内大模型产品又添一员。关于接连出现的“全能“大模型AIGC产品&#xff0c;你都用过哪些呢&#xff1f;不妨来分享一下你的使用体验吧&#xff01;在这些大模型产品中&#xff0c;你更倾向于选择哪款&#xff1f; 目前&#xff0c;…

每天CTF小练--ctfshow新手村

easy_base 密文&#xff1a;0XezFWZfNXafRjNlNXYit3dvh2cmR3Y 等号在前面&#xff0c;直接倒序后解码 ctfshow{base64_is_easy} 代码解&#xff1a; s 0XezFWZfNXafRjNlNXYit3dvh2cmR3Y print(s[::-1]) #翻转字符串 print(s[::-1]) #翻转字符串 print(s[::-1]) #翻转…

线性回归模型:统计学中的预测利器

线性回归模型&#xff1a;统计学中的预测利器 线性回归模型是统计学中一种重要的预测模型&#xff0c;广泛应用于各个领域&#xff0c;如经济学、社会科学、生物学和工程学等。它基于最小二乘法原理&#xff0c;通过拟合线性关系来解释变量之间的关系&#xff0c;并预测因变量…

HarmonyOS(二十五)——Harmonyos通用事件之点击事件

组件被点击时触发的事件就是点击事件。 1.事件 名称支持冒泡功能描述onClick(event: (event?: ClickEvent) > void)否点击动作触发该回调&#xff0c;event返回值见ClickEvent对象说明。从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 2.ClickEvent对象…

实现带有执行次数的二分搜索程序

开篇 在之前的文章其二&#xff1a;使用递归法实现二分搜索 中&#xff0c;我们实现了递归的二分搜索程序。今天&#xff0c;我们更进一步&#xff0c;来探讨二分搜索的执行次数。 问题概要 给你的二分搜索程序添加虚拟的“计时变量”来计算程序执行的比较次数&#xff0c;并使…

C++ STL初阶(2):string 的模拟实现

此文的背景是自己实现库中的string&#xff0c;由于string的模版实现较为困难&#xff0c;我们只实现最简单char版本。 1.命名空间分割 为了避免与库中的string冲突&#xff0c;我们使用一个自己的命名空间中来分离并实现所有内容&#xff0c;并且将所有的声明和定义相分离&…