【Vue】audio标签播放amr音频文件

一. 需求

前端播放 amr 音频文件，想利用 audio标签（该标签支持 mp3、ogg 和 wav格式）
二. 思绪

• 最初，假想的是java端将 amr 音频文件转为 mp3，但是实践了一下 根本都是要基于 ffmpeg，不想整那么贫苦，以是就想着前端处理处罚。（以下大抵实现写了下，但必须有 ffmpeg）。如下 2.1示例
  技能：Vue2 + ffmpeg + jave
  
• 然后，前端想利用 audio 标签，但是呢该标签不支持播放 amr，因此想着把 amr 转换为 wav或mp3。如下 2.2 将 amr 转为 wav
  技能：Vue2 + amrnb.js
  

2.1 基于 ffmpeg 将 amr转为 mp3

• 先准备好 ffmpeg （因本人没有实践，就不外多先容了）
  
• 下载jar包并置于项目中
  （1）下载路径：点击跳转
  （2）下载压缩包
  
  
  
  （3）解压压缩包并找到jar包
  （4）放在java项目中
  
  
  
  （5）pom.xml文件导入该依赖
  
  
  
  

1. <dependency>
2.      <groupId>jave</groupId>
3.      <artifactId>jave</artifactId>
4.      <version>1.0.2</version>
5.      <scope>system</scope>
6.      <systemPath>${project.basedir}/src/main/resources/lib/jave-1.0.2.jar</systemPath>
7. </dependency>

复制代码

• 实现
  

1. package com.sihongan.emergdrillbox.utils.fileUtil;
3. import it.sauronsoftware.jave.*;
4. import org.springframework.stereotype.Component;
5. import org.springframework.web.multipart.MultipartFile;
6. import javax.sound.sampled.UnsupportedAudioFileException;
7. import java.io.File;
8. import java.io.IOException;
10. @Component
11. public class AudioFileConversionUtil {
13.     public static File convertAudioToMp3(MultipartFile multipartFile) throws IllegalAccessException, IOException, UnsupportedAudioFileException, EncoderException {
15.         if(multipartFile == null){
16.             throw new IllegalAccessException("File is null");
17.         }
19.         // MultipartFile 转为 File 格式
20.         File file = new File(multipartFile.getOriginalFilename());
21.         multipartFile.transferTo(file);
23.         // 临时存放地址
24.         String tempPath = "D:\\tempAudio.mp3";
25.         File target = new File(tempPath);
26.         AudioAttributes audio = new AudioAttributes();
27.         audio.setCodec("libmp3lame");
28.         EncodingAttributes attrs = new EncodingAttributes();
29.         attrs.setFormat("mp3");
30.         attrs.setAudioAttributes(audio);
31.         Encoder encoder = new Encoder();
32.         encoder.encode(file, target, attrs);
34.         return target;
35.     }
36. }

复制代码

2.2. 利用 amrnb.js 将 amr 转为 wav

2.2.1 路径所在转wav

• 利用 amrnb.js 库，链接所在：点击跳转下载
  
• 跳转到以上链接后，利用git拉代替码/下载zip文件
  
  
  
  
• 将 步调 2 的 js放于 public/static 下
  
  
  
  
• 在index.html文件中添加 步调2 的路径
  
  
  
  
• 实现
  （1）音频链接（http://1xxx.vod2.myqcloud.com/xxxx/xxx/xxx.amr） 转为 wav
  （2）思绪：先通过链接获取文件内容，再将该内容转为 File 文件，末了将 File 转为 wav
  

1. <template>
2.         <div>
3.                 <audio v-if="audioUrl != ''" id="audioPlayer" ref="audioPlayer" controls></audio>
4.         </div>
5. </template>
6. <script>
7. // 禁用eslint
8. /* eslint-disable */
9. import { getDetail,getAudioUrl } from '@/api/xxx'
10.    
11. export default{
12.         data(){
13.                 return{
14.                         audioUrl:''
15.                 }
16.         },
17.         watch:{
18.                 $route:{
19.                         handler(route){
20.                                 this.fetchData(route.params.id,route.params.dataId)
21.                         }
22.                 }
23.         },
24.         methods:{
25.                 fetchData(id,dataId){
26.                         Promise.all([getDetail(id),getAudioUrl(dataId)]).then(res=>{
27.                                 this.fileConver(res[1].audioUrl)
28.                         })
29.                 },
30.                
31.                 fileConver(audioURL) {
32.                 // 获取文件内容
33.                 this.fetchFileAndCreateBlob(audioURL).then((blob) => {
34.                           // 创建一个伪造的File对象
35.                           const file = new File([blob], 'file.amr', { type: 'audio/amr' })
36.                           // 将amr格式的音频文件转为wav格式
37.                           this.amrConvertWav(file)
38.                 })
39.               },
40.               fetchFileAndCreateBlob(fileUrl) {
41.                 return fetch(fileUrl).then((response) => response.blob()).then((blob) => blob)
42.               },
43.               //文件格式转化 amr-wav
44.               amrConvertWav(file) {
45.         const audioElement = document.getElementById('audioPlayer')
46.         if (!file) {
47.           audioElement.src = ''
48.           return
49.         }
50.         const reader = new FileReader()
51.         reader.onload = function (e) {
52.           if (file.name.indexOf('.amr') !== -1) {
53.             const data = new Uint8Array(e.target.result)
54.             if (AMRWB.getAMRHeader(data) === AMRWB.AMR_HEADER) {
55.               // 二进制文件头为：#!AMR-WB文件头
56.               AMRWB.decodeInit()
57.               const buffer = AMRWB.toWAV(data) // amr转wav
58.               AMRWB.decodeExit()
59.               const url = URL.createObjectURL(
60.                 new Blob([buffer], {
61.                   type: 'audio/wav',
62.                 })
63.               )
64.               audioElement.src = url
65.             } else if (AMR.getAMRHeader(data) === AMR.AMR_HEADER) {
66.               // 二进制文件头为：#!AMR文件头
67.               const buffer = AMR.toWAV(data) // amr转wav
68.               const url = URL.createObjectURL(
69.                 new Blob([buffer], {
70.                   type: 'audio/wav',
71.                 })
72.               )
73.               audioElement.src = url
74.             } else {
75.               alert('文件格式不支持！')
76.             }
77.           } else {
78.             const buffer = e.target.result
79.             const url = URL.createObjectURL(
80.               new Blob([buffer], {
81.                 type: 'audio/x-wav',
82.               })
83.             )
84.             audioElement.src = url
85.           }
86.         }
87.         reader.readAsArrayBuffer(file)
88.       },
89.         }
90. }
91. </script>

复制代码

2.2.1 File文件转wav

少了将 链接转File的步调，直接传文件即可

1. <template>
2.         <div>
3.                 <div>
4.                         <input type="file" onchange="fileChange(event)" accept=".mp3,.wav,.ogg,.amr,.m4a">
5.                 </div>
6.                 <audio id="audio" src="" controls></audio>
7.         </div>
8. </template>
9. <script>
10. export default{
11.         data(){
12.                 return{
13.                 }
14.         },
15.         methods:{
16.                 fileChange(e) {
17.                                 const file = e.target.files[0]
18.                                 const audioElement = document.getElementById('audio')
19.                                 if (!file) {
20.                                         audioElement.src = ''
21.                                         return
22.                                 }
23.                                 const reader = new FileReader()
24.                                 reader.onload = function(e) {
25.                                         if (file.name.indexOf('.amr') !== -1) {
26.                                                 const data = new Uint8Array(e.target.result)
27.                                                 if (AMRWB.getAMRHeader(data) === AMRWB.AMR_HEADER) {
28.                                                         // #!AMR-WB文件头
29.                                                         AMRWB.decodeInit()
30.                                                         const buffer = AMRWB.toWAV(data) // amr转wav
31.                                                         AMRWB.decodeExit()
32.                                                         const url = URL.createObjectURL(new Blob([buffer], {
33.                                                                 type: 'audio/wav'
34.                                                         }))
35.                                                         audioElement.src = url
36.                                                 } else if (AMR.getAMRHeader(data) === AMR.AMR_HEADER){
37.                                                         // #!AMR文件头
38.                                                         const buffer = AMR.toWAV(data) // amr转wav
39.                                                         const url = URL.createObjectURL(new Blob([buffer], {
40.                                                                 type: 'audio/wav'
41.                                                         }))
42.                                                         audioElement.src = url
43.                                                 } else {
44.                                                         alert('文件格式不支持！')
45.                                                 }
46.                                         } else {
47.                                                 const buffer = e.target.result
48.                                                 const url = URL.createObjectURL(new Blob([buffer], {
49.                                                         type: 'audio/x-wav'
50.                                                 }))
51.                                                 audioElement.src = url
52.                                         }
53.                                 }
54.                                 reader.readAsArrayBuffer(file)
55.                         }
56.         }
57. }
58. </script>

复制代码