vue根据amr格式音频链接地址实现音频文件的播放 暂停等功能

不少前端开发的人员应该都知道，web端开发的时候，audio对amr文件不能直接读取播放暂停等，这时候需要我们处理一下，如何进行操作，本文是小编的亲身踩坑体验，现分享给大家。

首先我们需要安装引入库 BenzAMRRecorder

这依赖不懂得小伙伴，可以去npm官网看看

npm i BenzAMRRecorder

可能会多次用到，小编就封装了一下

export function readAudio(audioUrl: string) {

  // audioUrl 音频文件地址
  
  var xhr = new XMLHttpRequest();
  xhr.open('GET', audioUrl);
  xhr.responseType = 'blob'; // 这里的类型一定是 blob 文件类型
  xhr.send();
  xhr.onload = function () {
    console.log(xhr.response);
    let blob = new Blob([xhr.response])
    let amr = new BenzAMRRecorder()
    amr.initWithBlob(blob).then(function () {
      amr.play();
      console.log(amr.getDuration(), 55555)
    });
    amr.onEnded(function () {
      alert('播放完毕');
    })
  };
}

以上就是文件获取的基本方法下面这个案列，看得懂可以看下，看不懂就私聊我，哈哈O(∩_∩)O哈哈~

<template>
  <div class="audio-box">
    <!-- <audio id="wrapp_aud">
      <source
        src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText+'"
        type="audio/mpeg"
      />';
    </audio>-->
    <audio v-if="audioUrl" :src="audioUrl" controls class="content-audio">语音</audio>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :before-upload="handleChange"
    >
      <el-button type="primary">Click to upload</el-button>
      <template #tip>
        <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
      </template>
    </el-upload>
    <!-- <button @click="fileFuc">下载音频</button> -->
  </div>
</template>
<script lang='ts'>
import {
  defineComponent, onMounted, reactive, toRefs
} from 'vue'
// import {
//   readAudio
// } from '@/utils/getAudio/index'
export default defineComponent({
  name: 'lostTrack',
  setup() {
    const state = reactive({
      audioUrl: '',
    })

    // const fileFuc = () => {
    //   readAudio('amr音频地址')
    // }

    // const fileFuc = () => {
    //   var xhr = new XMLHttpRequest();
    //   xhr.open('GET', 'amr音频地址');
    //   xhr.responseType = 'blob';
    //   xhr.send();
    //   xhr.onload = function () {
    //     console.log(xhr.response);
    //     let blob = new Blob([xhr.response])
    //     let amr = new BenzAMRRecorder()
    //     amr.initWithBlob(blob).then(function () {
    //       amr.play();
    //       console.log(666)
    //     });
    //     // var reader = new FileReader();
    //     // reader.readAsDataURL(blob);
    //     // reader.onload = function () {
    //     //   console.log(reader.result, blob);
    //     //   let lenBase = reader.result
    //     //   let ddurl = dataURLtoBlob(lenBase)
    //     //   state.audioUrl = URL.createObjectURL(ddurl)
    //     //   console.log(state.audioUrl, '99999', ddurl)
    //     //   let amr = new BenzAMRRecorder()
    //     //   amr.initWithBlob(ddurl).then(function () {
    //     //     amr.play();
    //     //     console.log(666)
    //     //   });
    //     // };
    //   };
    // }


    // const dataURLtoBlob = (dataurl: any) => {

    //   var arr = dataurl.split(','),
    //     mime = arr[0].match(/:(.*?);/)[1],
    //     bstr = atob(arr[1]),
    //     n = bstr.length,
    //     u8arr = new Uint8Array(n);
    //   while (n--) {
    //     u8arr[n] = bstr.charCodeAt(n);
    //   }
    //   console.log(arr)
    //   return new Blob([u8arr], { type: mime });
    // }

    // const handleChange = (file: any) => {
    // console.log(file)
    // var reader = new FileReader();
    // reader.readAsDataURL(file);
    // reader.onload = function () {
    //   console.log(reader.result);
    //   let lenBase = reader.result
    // };
    // let url = new File([file], 'test.mp3', { type: 'audio/mp3', lastModified: Date.now() })
    // state.audioUrl = URL.createObjectURL(url)
    // console.log(state.audioUrl, 'state.audioUrl', url)
    // }


    onMounted(() => {

    })
    return {
      ...toRefs(state),
      // handleChange,
      // fileFuc
    }
  }
})
</script>
<style lang='scss' scoped>
</style>

以上就是前端实现amr音频文件播放的过程，希望可以帮助各位小伙伴喔！！！