安装

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.shpztamr = 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=truethat.ypdt=0//console.log('播放完毕');})// amr.isPlaying() 返回音频的播放状态 是否正在播放 返回boolean类型},//停止播放playstop(){this.shpzt=!this.shpztamr.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>

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

window API播放pcm格式音频文件，函数waveOutOpen等
之前在我的博客中有一篇关于编写录音器的代码,可保存为pcm和wav格式,说白了其实两者是一个东西,只不过wav比pcm多了一个文件头,这个文件头一共占了44个字节.此处这个不是重点,重点是如何编写程序 ...
Java如何播放MP3格式音频文件，以及如何循环播放音频？
首选,感谢你能在百忙之中阅读我的博客,在这里我告诉大家2中播放MP3格式音频的方法.第一种,使用自带的JavaFX技术来播放(现再最新的JDK版本中已被移除).第二种我们使用第三方库来进行播放. 点击 ...
AudioTrack播放pcm格式音频
AudioTrack播放pcm格式音频 package com.zero.demo;import android.content.Context; import android.media.Audio ...
android4.0支持m3u8格式,【报Bug】安卓下无法播放Ｍ3Ｕ8格式音频，报错
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 安卓下小程序音频播 ...
c语言输出音频单片机,单片机播放WAV格式音频的理解
CSDN账号注册了3年,一直没有上来过,更不用说写博客了.我不知道博客的具体用途,我只想把它当做一种心得来发表,可能是一些技术上的理解或者生活上的小故事.好了,下面我将记录我对WAV播放器的理解. 很 ...
单片机播放WAV格式音频的理解
CSDN账号注册了3年,一直没有上来过,更不用说写博客了.我不知道博客的具体用途,我只想把它当做一种心得来发表,可能是一些技术上的理解或者生活上的小故事.好了,下面我将记录我对WAV播放器的理解. 很 ...
vue.js最新版获取QQ音乐播放源
最近在学习使用vue写一个播放器,一直获取不到正确的播放源,QQ对这块限制更加严格了.按照之前的写法,现在已经不能获取到播放源了. 首先,要去抓取QQ音乐的播放源 1.首先在QQ音乐任意播放页面 2. ...
java播放mp3格式音频文件
下载第三方jar包,网址:http://www.javazoom.net/javalayer/javalayer.html 下载完成之后解压提取jl1.0.0.1.jar 将jl1.0.0.1.jar ...
Linux 终端播放 MP3 格式音频软件
因为有一个项目需要合成音频,并且在 Ubuntud 的系统下播放,这里介绍 2 个终端播放软件 1. Mplayer 当 SOX 不好用是用这个,推荐 SOX 2. SOX SOX 支持很多格式的音频 ...

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

安装

引用

html部分

初始化对象

调用方法

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

最新文章

热门文章