原生的audio不支持amr音頻解決辦法

方法一：格式轉換（水平和時間有限，而且操作麻煩，暫時放棄）

方法二：使用 benz-amr-recorder（推薦）

1. 下載和引入（我用的vue所以直接npm）

npm install benz-amr-recorder
const BenzAMRRecorder = require('benz-amr-recorder')

2. 初始化

let amr = new BenzAMRRecorder();
amr.initWithUrl(url).then(function() {
  amr.play(); 播放
});

3. 我用element+vue模擬了一個進度條，大致效果如下
   
   
4. 補充一個完整代碼，僅爲彈框播放組件代碼，組件支持’audio’, ‘video’, ‘img’, ‘file’，

<template>
  <el-dialog
    class="preview-file-wrap"
    width="700px"
    :title="title"
    top="5vh"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <video v-if="type==='video'" class="video" :src="url" controls="controls">您的瀏覽器不支持視頻video標籤。</video>
    <div v-if="type==='audio'" :src="url" controls="controls">您的瀏覽器不支持音頻audio標籤。</div>
    <el-row class="audio" v-if="type==='amr'">
      <el-col :span="2">
        <i class="el-icon-video-play audioBtn" @click="playUrl" v-show="isPlay"></i>
        <i class="el-icon-video-pause audioBtn" @click="playUrl" v-show="!isPlay"></i>
      </el-col>
      <el-col :span="22">
        <el-slider class="progress" v-model="currentTime" :max="amrTime"></el-slider>
      </el-col>
    </el-row>
    <img v-if="type==='img'" :src="url" />
  </el-dialog>
</template>

<script>
const BenzAMRRecorder = require('benz-amr-recorder')

export default {
  name: 'index',
  props: {
 	 //播放路徑
    url: {
      type: String,
      default: 'https://www.w3school.com.cn/i/movie.ogg'
    },
    //播放格式
    type: {
      type: String,
      default: 'video' // ['audio', 'video', 'img', 'file']
    }
  },
  data() {
    return {
      dialogVisible: false,
      amrTime: 0,
      currentTime: 0,
      isPlay: true, //是否播放,
      arm: null,
      getCurrentTime: null
    }
  },
  computed: {
    title() {
      return this.type === 'audio' ? '預覽查看' : '錄音播放'
    }
  },
  watch: {
    dialogVisible(v) {
      if (v && this.title === '錄音播放') {
        this.amr = new BenzAMRRecorder()
        //初始化
        this.amr.initWithUrl(this.url).then(() => {
          this.playUrl()
          this.amrTime = this.amr.getDuration() //音頻總時長
        })
      }
    },
    isPlay(v) {
      if (!v) {
        this.getCurrentTime = setInterval(() => {
          this.currentTime = this.amr.getCurrentPosition()
        }, 600)
      } else {
        clearInterval(this.getCurrentTime)
      }
      this.amr.onEnded(() => {
        this.isPlay = true
        this.currentTime = this.max
        this.currentTime = 0
      })
    }
  },
  methods: {
    show() {
      this.$nextTick(() => {
        if (this.type === 'file') {
          this.$confirm('該文件不支持預覽,是否下載該文件', '提示', {
            confirmButtonText: '下載',
            showCancelButton: false,
            closeOnClickModal: false,
            type: 'warning'
          }).then(async () => {
            const url = location.origin + this.url
            window.open(url)
          })
          return
        }
        if (!this.valid()) {
          this.$message.error('文件格式不支持')
          return
        }
        this.dialogVisible = true
      })
    },
    valid() {
      const m = this.url.match(/\.(\w+)(#|\?|$)/)
      const fileType = ((m && m[1]) || '').toString().toLowerCase()
      const allowHook = {
        video: ['mp4', 'ogv', 'ogg', 'webm'],
        audio: ['wav', 'mp3', 'ogg', 'acc', 'webm'],
        img: ['jpg', 'jpeg', 'png', 'gif'],
        amr: ['amr'] //amr文件特殊處理
      }
      return (allowHook[this.type] || []).includes(fileType)
    },
    // 播放amr格式文件
    playUrl() {
      this.isPlay = !this.isPlay
      this.amr.playOrPauseOrResume()
    }
  }
}
</script>

<style scoped lang="scss">
audio,
video,
img {
  width: 100%;
}
video {
  height: 500px;
}
</style>
<style lang="scss">
.preview-file-wrap {
  .audio {
    width: 100%;
    height: 50px;
    background-color: #ccc;
    padding: 0 8px;
    .el-col {
      height: 100%;
    }
    .audioBtn {
      font-size: 32px;
      margin-top: 12px;
      margin-left: 5px;
      cursor: pointer;
    }
    .progress {
      margin-top: 10px;
    }
  }
}
</style>

5. 用到的相關API

• 整合 play() 和 resume() 和 pause() //播放狀態會暫停，暫停狀態會播放

amr.playOrPauseOrResume();

• 獲取當前播放位置（秒）

amr.getCurrentPosition();

• 獲取音頻的時間長度（單位：秒）

amr.getDuration();

• 播放結束時觸發

amr.onEnded(function() {
  console.log('播放結束');
});

總結：做了個簡單版本，如果發現問題可以發出來溝通交流

參考資料：官方文檔