vue.js用benz-amr-recorder实现播放amr格式音频 AMR 录音机

最新推荐文章于 2024-04-24 09:59:01 发布
最新推荐文章于 2024-04-24 09:59:01 发布
阅读量2.7k 收藏 3
点赞数
文章标签： 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coldriversnow/article/details/124984686
版权

vue.js实现播放amr格式

benz-amr-recorder - npm

安装

npm i benz-amr-recorder --save

引用

import BenzAMRRecorder from 'benz-amr-recorder'

html部分

<el-descriptions-item label="上报音频">
  <template v-if="ruleForm.AJYP == null">
    暂无音频
  </template>
  <template v-else>
    <div class="yingping" >
      <span  @click="playstop()" v-show="!shpzt"><img src="../../../assets/img/ypstop.png" class="boan"></span>
      <span  @click="play(ruleForm.AJYP)" v-show="shpzt"><img src="../../../assets/img/ypbeging.png" class="boan"></span>
      <input class="amr-progress" type="range" min="0" max="1" step="any" :value="ypdt" disabled>
      <span id="amr-cur">{{ypdt}}'</span>
      <span>/</span>
      <span id="amr-duration">{{ypleng}}'</span>
    </div>
  </template>
</el-descriptions-item>

初始化对象

data() {
  return {
   ypleng:0,
   ypdt:0,
   shpzt:true
  }
}

调用方法

 //播放语音
        play(url) {
            let that=this;
            this.shpzt=!this.shpzt
            amr = new BenzAMRRecorder();
            amr.initWithUrl(url).then(function() {
                amr.play();
                that.ypleng=amr.getDuration().toFixed(2)
                var iCount =setInterval(function () {
                    let spchang=amr.getCurrentPosition().toFixed(2)
                    if (spchang != 0.00) {
                            that.ypdt = amr.getCurrentPosition().toFixed(2)
                    } else {
                        clearInterval(iCount);

                    }
                }, 30);

            });
            amr.onEnded(function() {
                that.shpzt=true
                that.ypdt=0
                //console.log('播放完毕');
            })
            // amr.isPlaying() 返回音频的播放状态 是否正在播放 返回boolean类型
        },
        //停止播放
        playstop(){
            this.shpzt=!this.shpzt
            amr.stop();
        },

效果如下

源码：


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>AMR decode/encode tests</title>
</head>

<body>
<h1>AMR 录音机 Demo</h1>
<h2>解码、播放</h2>
<div id="player-amr">
    <p>
        加载演示文件：<button id="amr-load">加载、解码</button>
        <a href="res/mario.amr">下载演示文件：mario.amr</a>
    </p>
    <p>
        加载本地文件：<input type="file" id="amr-file" accept=".amr">（不会上传到任何服务器）
    </p>
    <p>
        <button id="amr-play" disabled>播放</button>
        <button id="amr-stop" disabled>停止</button>
        <input id="amr-progress" type="range" min="0" max="1" step="any" value="0" disabled>
        <label for="amr-progress">
            <span id="amr-cur">0'</span>
            <span>/</span>
            <span id="amr-duration">0'</span>
        </label>
    </p>
</div>
<h2>录音、编码</h2>
<div id="recorder-amr">
    <p>
        <button id="amr-record">开始录音</button>（不会上传到任何服务器）
    </p>
    <p>
        <button id="amr-play-record" disabled>播放录音</button>
        <a href="#" id="amr-down-record"><!--下载录音amr文件--></a>
        <span id="amr-record-duration">0'</span>
    </p>
</div>
<script src="./BenzAMRRecorder.js"></script>
<!--suppress ES6ModulesDependencies, ES6ConvertVarToLetConst -->
<script>
    (function () {
        function E(selector) {
            return document.querySelector(selector);
        }

        /**** 解码、播放 ****/

        var amr;

        var loadDemoBtn = E('#amr-load');
        var loadAmrFile = E('#amr-file');
        var playBtn = E('#amr-play');
        var stopBtn = E('#amr-stop');
        var progressCtrl = E('#amr-progress');
        var isDragging = false;
        var cur = E('#amr-cur');
        var duration = E('#amr-duration');

        setInterval(function () {
            if (amr) {
                cur.innerHTML = amr.getCurrentPosition().toFixed(2) + '\'';
                if (!isDragging) {
                    progressCtrl.value = amr.getCurrentPosition().toFixed(2);
                }
            } else {
                cur.innerHTML = '0\'';
            }
        }, 10);

        loadDemoBtn.onclick = function() {
            amr = new BenzAMRRecorder();
            loadDemoBtn.setAttribute('disabled', true);
            loadAmrFile.setAttribute('disabled', true);
            playBtn.setAttribute('disabled', true);
            stopBtn.setAttribute('disabled', true);
            progressCtrl.setAttribute('disabled', true);
            amr.initWithUrl('./res/mario.amr').then(function () {
                loadDemoBtn.removeAttribute('disabled');
                loadAmrFile.removeAttribute('disabled');
                playBtn.removeAttribute('disabled');
                stopBtn.removeAttribute('disabled');
                progressCtrl.removeAttribute('disabled');
                progressCtrl.setAttribute('max', amr.getDuration());
                duration.innerHTML = amr.getDuration().toFixed(2) + '\'';
            });

            // 绑定事件
            amr.onPlay(function () {
                console.log('Event: play');
                playBtn.innerHTML = '暂停';
            });
            amr.onStop(function () {
                console.log('Event: stop');
                playBtn.innerHTML = '播放';
            });
            amr.onPause(function () {
                console.log('Event: pause');
                playBtn.innerHTML = '继续';
            });
            amr.onResume(function () {
                console.log('Event: resume');
                playBtn.innerHTML = '暂停';
            });
            amr.onEnded(function () {
                console.log('Event: ended');
                playBtn.innerHTML = '播放';
            });
            amr.onAutoEnded(function () {
                console.log('Event: autoEnded');
            });
            amr.onStartRecord(function () {
                console.log('Event: startRecord');
            });
            amr.onFinishRecord(function () {
                console.log('Event: finishRecord');
            });
            amr.onCancelRecord(function () {
                console.log('Event: cancelRecord');
            });
        };

        playBtn.onclick = function () {
            amr.playOrPauseOrResume();
        };

        stopBtn.onclick = function () {
            amr.stop();
        };

        progressCtrl.onmousedown = function () {
            isDragging = true;
        };
        progressCtrl.onmouseup = function () {
            isDragging = false;
        };
        progressCtrl.onchange = function (e) {
            amr.setPosition(e.target.value);
        };

        loadAmrFile.onchange = function() {
            amr = new BenzAMRRecorder();
            loadDemoBtn.setAttribute('disabled', true);
            loadAmrFile.setAttribute('disabled', true);
            playBtn.setAttribute('disabled', true);
            amr.initWithBlob(this.files[0]).then(function () {
                loadDemoBtn.removeAttribute('disabled');
                loadAmrFile.removeAttribute('disabled');
                playBtn.removeAttribute('disabled');
                duration.innerHTML = amr.getDuration().toFixed(2) + '\'';
            });

            // 绑定事件
            amr.onPlay(function () {
                console.log('Event: play');
                playBtn.innerHTML = '停止';
            });
            amr.onStop(function () {
                console.log('Event: stop');
                playBtn.innerHTML = '播放';
            });
            amr.onEnded(function () {
                console.log('Event: ended');
                playBtn.innerHTML = '播放';
            });
            amr.onAutoEnded(function () {
                console.log('Event: autoEnded');
            });
            amr.onStartRecord(function () {
                console.log('Event: startRecord');
            });
            amr.onFinishRecord(function () {
                console.log('Event: finishRecord');
            });
            amr.onCancelRecord(function () {
                console.log('Event: cancelRecord');
            });
        };

        /***** 录音、编码 *****/

        var amrForRecorder;

        var recordBtn = E('#amr-record');
        var playRecordBtn = E('#amr-play-record');
        var downRecordLink = E('#amr-down-record');
        var recordDuration = E('#amr-record-duration');

        recordBtn.onclick = function () {
            if (amrForRecorder && amrForRecorder.isRecording()) {
                recordBtn.innerHTML = '开始录音';
                playRecordBtn.removeAttribute('disabled');
                amrForRecorder.finishRecord().then(() => {
                    downRecordLink.href = window.URL.createObjectURL(amrForRecorder.getBlob());
                    downRecordLink.innerHTML = '下载录音amr文件';
                    recordDuration.innerHTML = amrForRecorder.getDuration().toFixed(2) + '\'';
                });
            } else {
                recordBtn.innerHTML = '停止录音';
                playRecordBtn.setAttribute('disabled', true);
                amrForRecorder = new BenzAMRRecorder();
                amrForRecorder.initWithRecord().then(() => {
                    amrForRecorder.startRecord();
                }).catch(function(e) {
                    alert(e.message || e.name || JSON.stringify(e));
                });

                // 绑定事件
                amrForRecorder.onPlay(function () {
                    console.log('Recorder Event: play');
                    playRecordBtn.innerHTML = '停止播放';
                });
                amrForRecorder.onStop(function () {
                    console.log('Recorder Event: stop');
                    playRecordBtn.innerHTML = '播放录音';
                });
                amrForRecorder.onEnded(function () {
                    console.log('Recorder Event: ended');
                    playRecordBtn.innerHTML = '播放录音';
                });
                amrForRecorder.onAutoEnded(function () {
                    console.log('Recorder Event: autoEnded');
                });
                amrForRecorder.onStartRecord(function () {
                    console.log('Recorder Event: startRecord');
                    recordBtn.innerHTML = '停止录音';
                });
                amrForRecorder.onFinishRecord(function () {
                    console.log('Recorder Event: finishRecord');
                    recordBtn.innerHTML = '开始录音';
                });
                amrForRecorder.onCancelRecord(function () {
                    console.log('Recorder Event: cancelRecord');
                    recordBtn.innerHTML = '开始录音';
                });
            }
        };

        playRecordBtn.onclick = function () {
            if (amrForRecorder.isPlaying()) {
                amrForRecorder.stop();
            } else {
                amrForRecorder.play();
            }
        };
    })();
</script>
</body>
</html>

 

coldriversnow
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
原生的audio不支持amr音频解决办法
呱呱的博客
03-05 3204
方法一：格式转换（水平和时间有限，而且操作麻烦，暂时放弃） 方法二：使用 benz-amr-recorder（推荐） 下载和引入（我用的vue所以直接npm） npm install benz-amr-recorder const BenzAMRRecorder = require('benz-amr-recorder') 初始化 let amr = new BenzAMRRecorde...
vue.js用benz-amr-recorder实现播放amr格式音频
qq_38914807的博客
02-04 1743
纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于 [amr.js] 注意：由于使用了 amr.js 做编码和解码，因此 js 文件（压缩后，未 gzip）接近 500 KB，使用前请考虑。 安装 npm i benz-amr-recorder --save 使用时引用 import BenzAMRRecorder from 'benz-amr-recorder' html部分 <div class="dialogue-item" v-if="diagItem.msgtyp
benz-amr-recorder:播放，录制，重新格式化AMR音频
05-04
AMR 录音机 () 纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于 和 。 注意：由于使用了 amr.js 做编码和解码，因此 js 文件（压缩后，未 gzip）接近 500 KB，使用前请考虑。 2019-10-05 更新 (v1.1.0)： 增加浏览器支持检测功能，增加暂停播放、设置播放进度功能。 特性 方便的 API 实现解码、播放、录音、编码 AMR 文件。 支持 url 和 blob （即<input type="file">）方式获取 AMR。 支持将浏览器 <audio> 所支持的音频格式（例如 MP3 或 OGG 音频）转换成 AMR 音频。 编码后的 AMR 文件可下载，无须服务器。 Demo 浏览器兼容性 最新的浏览器兼容性请参阅 。 仅播放： 播放+录音： 安装 方法一：引入 js 文件 <script type="text/javascrip
npm 拉包报错 No matching version found for benz-amr-recorder@^1.1.5.
最新发布
Aichuiniu666的博客
04-24 123
3、单独npm install XXX。2、切换镜像源后查看可下载版本。4、重新npm install。
Vue中使用benz-amr-recorder插件实现播放amr音频文件以及在线url跨域问题解决
BADAO_LIUMANG_QIZHI的博客
09-23 3355
需要做一个Android端和Web端的聊天室，Android端的录音音频文件为.amr格式，除了通过后台server端转码之后，是否可以通过插件在前端直接播放amr的音频文件。
BenzAMRRecorder---benz-amr-recorder
huanhuan03的博客
08-17 2225
benz-amr-recorder 解决pc端播放语音和录音 pc端播放语音
vue项目中，amr格式的音频播放
a_grain_of_wheat的博客
08-18 2730
amr格式的音频在pc端播放
Benz AMR Recorder：一款高效易用的Android音频录制库
gitblog_00005的博客
03-27 503
Benz AMR Recorder：一款高效易用的Android音频录制库 项目地址:https://gitcode.com/BenzLeung/benz-amr-recorder 项目简介 Benz AMR Recorder 是一个由开发者Benz Leung创建的开源Android音频录制工具库，它专注于提供高质量、低延迟的AMR（Adaptive Multi-Rate）音频格式录制功能。如果...
vue使用js-audio-recorder实现一句话识别功能
07-14
vue使用js-audio-recorder实现一句话识别功能：以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！...
vue使用recorder.js实现录音功能
10-15
在Vue项目中实现录音功能，我们可以借助第三方库recorder.js。Recorder.js是一个轻量级的JavaScript库，用于在Web浏览器中录制音频。以下是如何在Vue中集成并使用recorder.js的详细步骤： 1. **引入外部JS文件**： ...
Vue.js 利用v-for中的index值实现隔行变色
10-18
主要介绍了Vue.js 利用v-for中的index值实现隔行变色效果，首先定义好样式，利用v-for中的index值，然后绑定样式来实现隔行变色,需要的朋友可以参考下
js播放Amr音频_Mp3转Amr
09-16
AMR 播放器,录音机,转换器, 纯前端js解码、播放、录音、编码 AMR 音频... 详细介绍说明请看 https://blog.csdn.net/tianbbs2008/article/details/120331027
插件--纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持
02-22
纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于amr.js 和 RecorderJs。 特性 方便的 API 实现解码、播放、录音、编码 AMR 文件。 支持 url 和 blob （即<input type="file">）方式获取 AMR。 支持将浏览器 <audio> 所支持的音频格式（例如 MP3 或 OGG 音频）转换成 AMR 音频。 编码后的 AMR 文件可下载，无须服务器。
JS播放Amr音频
07-27
JS播放Amr音频
js 播放amr音频文件
07-02
js 播放amr音频文件,将amr文件转化成base64字符串，用js转换成音频播放
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
感谢VasiliyGryaznoy，dragg和Raphael Owino目录安装许可证使用选项方法使用Nuxt.js进行回调的用法贡献资源安装终端：//使用bower bower install vue-fullpage.js //使用npm npm install --save vue-fullpage .js...
VUE.js+element-ui实现JSON编辑器
07-24
Vue.js和Element-UI是现代前端开发中常用的两个框架，Vue.js作为一个轻量级的JavaScript框架，以其易学易用、高效和灵活的特点受到了广大开发者喜爱。Element-UI则是一套基于Vue.js的企业级UI组件库，提供了丰富的...
audio标签无法播放amr格式音频解决方案（benz-amr-recorder）
热门推荐
weixin_44696379的博客
09-09 1万+
遇到此问题的情形： 单位开发app采用的Hybrid混合开发模式，有些列表页，详情页都是H5页面，我这边的框架是vue写的。最近一个项目中涉及到了视频和音频的展示和播放，因为app有安卓端和ios端，视频和音频的上传都是原生去上传的，然后再详情页中需要展示出来，ios中音频没遇到问题，因为ios自己录音生成的是.mp3格式音频，所以用audio标签可以完美播放。（audio标签支持的格式只有MP3...
vue 播放.amr语音文件
做一个有知识的流氓
05-25 879
【代码】vue 播放.amr语音文件。
screen-capture-recorder java
08-07
screen-capture-recorder是一个用Java编写的屏幕捕捉和录制工具。它可以在Windows、Mac和Linux等操作系统上使用。使用screen-capture-recorder，用户可以捕获屏幕上的任何内容，并将其保存为视频文件。 这个工具提供了丰富的功能，包括选择捕获区域、调整帧率和视频质量、添加鼠标点击和鼠标轨迹等。用户可以根据自己的需求来调整这些参数，以获得高质量的录制效果。 screen-capture-recorder还可以与其他Java应用程序进行集成。它提供了一系列的API，使开发人员可以通过代码控制录制过程，例如开始和停止录制、保存录制文件等。这个工具不仅适用于个人用户，也适用于开发人员和教育机构等专业用户。 与其他屏幕捕捉和录制工具相比，screen-capture-recorder具有易于使用和可定制性高的特点。它的界面简洁明了，用户可以轻松地掌握其使用方法。与此同时，通过修改配置文件，用户还可以根据自己的需要进行高级的定制，例如设置快捷键、添加水印等。 总之，screen-capture-recorder是一款功能强大、易于使用和高度可定制的屏幕捕捉和录制工具。无论您是个人用户还是专业用户，它都能满足您的需求。如果您需要捕捉和录制屏幕上的内容，我强烈推荐您使用screen-capture-recorder。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值