原生的audio不支持amr音频解决办法

小鱼儿 2023-07-11 12:35 7阅读 0赞

#### 方法一：格式转换（水平和时间有限，而且操作麻烦，暂时放弃） ####

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

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

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

1.  初始化

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

1.  我用element+vue模拟了一个进度条，大致效果如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]
2.  补充一个完整代码，仅为弹框播放组件代码，组件支持’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>

1.  用到的相关API

*  整合 play() 和 resume() 和 pause() //播放状态会暂停，暂停状态会播放

amr.playOrPauseOrResume();

*  获取当前播放位置（秒）

amr.getCurrentPosition();

*  获取音频的时间长度（单位：秒）

amr.getDuration();

*  播放结束时触发

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

总结：做了个简单版本，如果发现问题可以发出来沟通交流

参考资料：[官方文档][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305162445160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200305162252901.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E=,size_16,color_FFFFFF,t_70
[Link 1]: https://www.npmjs.com/package/benz-amr-recorder