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

最新推荐文章于 2024-03-27 09:53:11 发布
最新推荐文章于 2024-03-27 09:53:11 发布
阅读量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
    评论
纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持
礼拜八的博客
02-22 8612
纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于amr.js 和 RecorderJs。 特性 方便的 API 实现解码、播放、录音、编码 AMR 文件。 支持 url 和 blob （即&lt;input type="file"&gt;）方式获取 AMR。 支持将浏览器 &lt;audio&gt; 所支持的音频格式（例如 MP3 或 OGG 音频）转换成 AMR 音频。 ...
vue.js用benz-amr-recorder实现播放amr格式音频
qq_38914807的博客
02-04 1755
纯前端解码、播放、录音、编码 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：一款高效易用的Android音频录制库
最新发布
gitblog_00005的博客
03-27 515
Benz AMR Recorder：一款高效易用的Android音频录制库 项目地址:https://gitcode.com/BenzLeung/benz-amr-recorder 项目简介 Benz AMR Recorder 是一个由开发者Benz Leung创建的开源Android音频录制工具库，它专注于提供高质量、低延迟的AMR（Adaptive Multi-Rate）音频格式录制功能。如果...
原生的audio不支持amr音频解决办法
呱呱的博客
03-05 3211
方法一：格式转换（水平和时间有限，而且操作麻烦，暂时放弃） 方法二：使用 benz-amr-recorder（推荐） 下载和引入（我用的vue所以直接npm） npm install benz-amr-recorder const BenzAMRRecorder = require('benz-amr-recorder') 初始化 let amr = new BenzAMRRecorde...
vue3+electron 播放音频格式arm
qq_38325751的博客
04-19 640
vue3+electron搭建桌面端聊天软件，需求：在桌面端接受到手机上arm格式的录音，并进行播放。
js播放Amr音频_Mp3转Amr
09-16
AMR 播放器,录音机,转换器, 纯前端js解码、播放、录音、编码 AMR 音频... 详细介绍说明请看 https://blog.csdn.net/tianbbs2008/article/details/120331027
VUE使用benz-amr-recorder 实现解码、播放
qq_32900003的博客
09-08 3149
安装 npm install benz-amr-recorder 引入 const BenzAMRRecorder = require('benz-amr-recorder') 使用 <template> <div class="wx-voice-div" @click="playVoice(objData)"> </template> methods:{ amrPlay(amr,obj){ //播放 this.$se
vue使用js-audio-recorder实现一句话识别功能
07-14
vue使用js-audio-recorder实现一句话识别功能：以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！...
js 播放amr音频文件
07-02
js 播放amr音频文件,将amr文件转化成base64字符串，用js转换成音频播放
amr文件播放
12-15
解决微信amr文件播放问题 js+Html5 在前端播放amr文件（亲测可用） 以及其他音频文件都ok哦 （如有疑问 留言 我会在第一时间为您解决）
使用audio标签播放mp3,amr,wav文件
07-02
用audio标签实现播放音频文件，其中音频文件的后缀包括amrnb,mp3,wav。由于对音频文件个格式有的不支持，有的会进行一下转换。
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值，然后绑定样式来实现隔行变色,需要的朋友可以参考下
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实现录音功能及播放amr文件（pc端）
weixin_34417814的博客
06-04 7141
录音功能一般来说在移动端比较常见，但是在pc端也要实现按住说话的功能呢？项目需求：按住说话，时长不超过60秒，生成语音文件并上传，我这里用的是recorder.js 1.项目中新建一个recorder.js文件，内容如下，也可在百度上直接搜一个 //兼容window.URL=window.URL||window.webkitURLnavigator.getUserMedia=...
html页面播放amr音频
qingshuoyisheng123的博客
06-22 5907
参照w3c的标准，html5中的audio是不支持amr格式的，具体你也可以看下Mozilla的MDN文档 然后怎么解决你的问题呢？ 1，转码，在后端或者云服务提供商那里，将这些amr文件都转为对h5友好的格式 2，flash，一些flash的音频播放器是可以播放amr格式的音频文件的。推荐的做法是，对html支持的格式，用audio，对不支持的降级使用flash处理。例如audiojs,j
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、付费专栏及课程。

余额充值