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

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

完整代码：

1. <template>
2.   <div>
3.     <input type="file" @change="handleFileChange" accept="audio/*" />
4.     <button @click="stopPlayback" :disabled="!isLoaded">停止</button>
5.     <canvas ref="canvas" width="1201" height="211"></canvas>
6.   </div>
7. </template>
9. <script>
10. import axios from "axios";
12. export default {
13.   data() {
14.     return {
15.       // audioUrl:"http://121.41.225.74:9091/mintti/app/storage/newFile/b26uvk9ipd8n5iop1lzs.wav",
16.       audioUrl: "http://121.41.225.74:9091/mintti/app/storage/newFile/c19xqqqtd8ywqyaf8gno.wav",
17.       // audioUrl: "http://121.41.225.74:9091/mintti/app/storage/newFile/d3msxipdfxrbyijm3ys0.wav",
18.       // audioUrl:"http://121.41.225.74:9091/mintti/app/storage/newFile/xm456t9dptsrigxye84q.wav",
20.       dataArray: [],
21.       isPlaying: false,
22.       isLoaded: false,
23.       drawInterval: 200, // 设置绘制的时间间隔（单位：毫秒）
24.       drawIntervalId: null,
25.       fileData: new Int8Array(0),
26.       index: 0,
27.       mWidth: 0,
28.       mHeight: 0,
29.     }
30.   },
31.   mounted() {
32.     const ctx = this.$refs.canvas.getContext('2d')
33.     this.drawGrid(ctx)
34.     this.downloadAudio()
35.   },
36.   methods: {
37.     // 下载音频文件
38.     downloadAudio() {
39.       axios({
40.         method: 'get',
41.         url: this.audioUrl,
42.         responseType: 'arraybuffer'
43.       }).then(res => {
44.         if (!res) {
45.           return;
46.         }
48.         console.log("decodeAudioData")
49.         this.loadAudio(res.data)
50.       }).catch(error => {
51.         console.error('下载音频时出错:', error);
52.       });;
53.     },
55.     handleFileChange(event) {
56.       this.isLoaded = false
57.       const file = event.target.files[0]
59.       this.stopPlayback()
60.       const reader = new FileReader();
61.       reader.onload = (e) => {
62.         console.log("onLoad")
63.         this.loadAudio(e.target.result)
65.       };
67.       reader.readAsArrayBuffer(file);
68.     },
70.     loadAudio(res) {
71.       this.dataArray = []
72.       this.isLoaded = true
73.       this.index = 0;
74.       // 获取文件的前 100 个字节
75.       this.fileData = new Int8Array(res);
76.       this.refreshData()
78.       this.drawIntervalId = setInterval(() => {
79.         console.log("定时器执行了")
80.         this.refreshData()
81.       }, this.drawInterval)//循环读取
82.     },
83.     refreshData() {
84.       let i = this.index
85.       console.log("文件总长度：" + this.fileData.byteLength + ",,i=" + i)
86.       if (i * 1600 + 44 > this.fileData.byteLength) {
87.         clearInterval(this.drawIntervalId)
88.         return
89.       }
90.       const byteArray = this.fileData.slice(i * 1600 + 44, (i + 1) * 1600 + 44);
92.       // 创建一个新的 Uint16Array,长度为 byteArray 的一半
93.       let shortArray = new Int16Array(byteArray.length / 2)
95.       //遍历 byteArray,将每两个字节合并成一个短整型
96.       for (let i = 0; i < byteArray.length; i += 2) {
97.         shortArray[i / 2] = (byteArray[i] & 0xFF) | (byteArray[i + 1] & 0xFF) << 8;
98.       }
100.       const step = 10;
102.       for (let i = 0; i < shortArray.length; i += step) {
103.         // console.log(i + "文件short值：" + shortArray[i])
104.         if (this.mWidth > 0 && this.dataArray.length >= this.mWidth) {
105.           this.dataArray.shift()
106.         }
107.         this.dataArray.push(shortArray[i])
108.       }
110.       this.isPlaying = true
111.       this.draw2();
112.       this.index += 1;
113.     },
114.     stopPlayback() {
115.       console.log("停止播放-stopPlayback")
116.       this.isPlaying = false
118.       clearInterval(this.drawIntervalId)
119.       const ctx = this.$refs.canvas.getContext('2d')
120.       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
121.       this.drawGrid(ctx)
122.     },
124.     draw2() {
125.       if (!this.isPlaying) {
126.         return
127.       }
128.       // console.log('开始绘图-draw')
130.       const ctx = this.$refs.canvas.getContext('2d')
131.       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
132.       this.drawGrid(ctx)
133.       this.drawWaveform(ctx)
134.     },
135.     drawGrid(ctx) {
136.       const { width, height } = ctx.canvas
137.       this.mWidth = ctx.canvas.width
138.       this.mHeight = ctx.canvas.height
140.       ctx.strokeStyle = '#ccc'
141.       ctx.lineWidth = 1
143.       for (let i = 0; i < height; i += 10) {
144.         ctx.beginPath()
145.         ctx.moveTo(0, i)
146.         ctx.lineTo(width, i)
147.         ctx.stroke()
148.       }
150.       for (let j = 0; j < width; j += 10) {
151.         ctx.beginPath()
152.         ctx.moveTo(j, 0)
153.         ctx.lineTo(j, height)
154.         ctx.stroke()
155.       }
156.     },
157.     drawWaveform(ctx) {
158.       ctx.beginPath()
159.       ctx.lineWidth = 1
160.       ctx.strokeStyle = '#25ebd7'
163.       let x = 0
164.       let len = this.dataArray.length;
165.       let index = this.mWidth - len;
166.       for (let i = index + 1; i < this.mWidth; i++) {
167.         const mCenterY = this.mHeight / 2;
168.         const y = mCenterY - (this.dataArray[i - index - 1] / (32768 / mCenterY));
169.         // console.log(`i=${i},position=${i - index - 1},,data=${this.dataArray[i - index - 1]},,y=${y},,mCenterY=${mCenterY}`)
170.         x = i - 1;
172.         ctx.lineTo(x, y)
173.         ctx.stroke()
174.       }
175.     },
176.   }
177. }
178. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。