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 数据类型。以下是一些常见的…

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

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

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

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

【二进制部署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…

dns域名解析服务和bond网卡

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

每天CTF小练--ctfshow新手村

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

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

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

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

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

Etcd Raft架构设计和源码剖析1:宏观架构

Etcd Raft架构设计和源码剖析1&#xff1a;宏观架构 | Go语言充电站 序言 Etcd提供了一个样例contrib/raftexample&#xff0c;用来展示如何使用etcd raft。这篇文章通过raftexample介绍如何使用etcd raft。 raft服务 raftexample是一个分布式KV数据库&#xff0c;客户端可…

vivado BEL_PIN、CELL

BEL_PIN是BEL对象上的接点或连接点。 BEL_PIN是一个设备对象&#xff0c;与网表对象&#xff08;如逻辑上的PIN&#xff09;相关 CELL&#xff0c;它是NET的连接点。 相关对象 如图所示&#xff0c;BEL_PIN-对象与BEL和SITE设备资源相关&#xff0c;并且 PIN和NET网表对象。您可…

Nginx配置详细解释:(3)http模块及server模块,location模块

目录 环境概述&#xff1a; http模块中的全局模块 1. root配置主要是对主web页面的路径访问。 2.server虚拟主机 2.1基于IP&#xff1a; 2.2基于域名&#xff1a; 3.alias别名 4.location匹配 5.access模块&#xff1a; 6.验证模块 7.自定义错误页面 8.日志存放位置…

王道408数据结构CH3_栈、队列

概述 3.栈、队列和数组 3.1 栈 3.1.1 基本操作 3.1.2 顺序栈 #define Maxsize 50typedef struct{ElemType data[Maxsize];int top; }SqStack;3.1.3 链式栈 typedef struct LinkNode{ElemType data;struct LinkNode *next; }*LiStack;3.2 队列 3.2.1 基本操作 3.2.2 顺序存储…

【Intro】Cora数据集介绍

https://graphsandnetworks.com/the-cora-dataset/ Graph Convolutional Network (GCN) on the CORA citation dataset — StellarGraph 1.0.0rc1 documentation pytorch-GAT/The Annotated GAT (Cora).ipynb at main gordicaleksa/pytorch-GAT GitHub Cora数据集 Cora数据…

Windows上虚拟机安装OpenGaus22.03

在Windows上安装OpenGauss并不像在Linux上那么直接&#xff0c;因为OpenGauss主要面向OpenEuler系统设计。可以通过使用虚拟机或者Docker来在Windows上运行OpenGauss。虚拟机比Docker提供更完整的操作环境。以下是采用虚拟机的详细步骤&#xff1a; 通过虚拟机安装OpenGauss …

运放应用1 - 反相放大电路

1.前置知识 反相放大电路存在 负反馈电路 &#xff0c;工作在线性区&#xff0c;可以利用 虚短 概念来分析电路。 注&#xff1a;运放的 虚断 特性是一直存在的&#xff0c;虚短特性则需要运放工作在 线性区 有关运放的基础知识&#xff0c;可以参考我的另外一篇文章&#xff…

ASCE(美国土木工程师学会)文献校外去哪里查找下载

今天要讲的数据库是ASCE&#xff08;美国土木工程师学会&#xff09;&#xff0c;该数据库每年出版5万多页的专业期刊、杂志、会议录、专著、技术报告、实践手册和标准等。目前&#xff0c;ASCE数据库中包含35种期刊(1983年至今)、近700卷会议录( 1996年至今)、Civil Engineeri…

htb_solarlab

端口扫描 80,445 子域名扫描 木有 尝试使用smbclient连接445端口 Documents目录可查看 将Documents底下的文件下载到本地看看 xlsx文件里有一大串用户信息&#xff0c;包括username和password 先弄下来 不知道在哪登录&#xff0c;也没有子域名&#xff0c;于是返回进行全端…

C++缺省参数函数重载

缺省参数 大家知道什么是备胎吗&#xff1f; C中函数的参数也可以配备胎。 3.1缺省参数概念 缺省参数是声明或定义函数时为函数的参数指定一个默认值。在调用该函数时&#xff0c;如果没有指定实参则采用该默认值&#xff0c;否则使用指定的实参。 void TestFunc(int a 0…