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

最新推荐文章于 2024-03-13 11:53:13 发布

呱呱•.•

最新推荐文章于 2024-03-13 11:53:13 发布

阅读量3.4k

点赞数

分类专栏： # H5C3

本文链接：https://blog.youkuaiyun.com/alisa_lisa/article/details/104677201

版权

本文介绍了两种解决原生audio不支持amr音频格式的方法，推荐使用benz-amr-recorder，提供了下载引入、初始化示例以及一个模拟进度条的组件代码，并列出相关API，适用于vue项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

初始化

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

我用element+vue模拟了一个进度条，大致效果如下
补充一个完整代码，仅为弹框播放组件代码，组件支持’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"

最低0.47元/天解锁文章