當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時(shí)間：2024/1/1 vue 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue.js用benz-amr-recorder实现播放amr格式音频 AMR 录音机小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

vue.js實(shí)現(xiàn)播放amr格式

benz-amr-recorder - npm

安裝

npm i benz-amr-recorder --save

引用

import BenzAMRRecorder from 'benz-amr-recorder'

html部分

<el-descriptions-item label="上報(bào)音頻"><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} }

調(diào)用方法

//播放語音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() 返回音頻的播放狀態(tài) 是否正在播放返回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 錄音機(jī) 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">（不會(huì)上傳到任何服務(wù)器）</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>（不會(huì)上傳到任何服務(wù)器）</p><p><button id="amr-play-record" disabled>播放錄音</button><a href="#" id="amr-down-record"></a><span id="amr-record-duration">0'</span></p> </div> <script src="./BenzAMRRecorder.js"></script>  <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 = '繼續(xù)';});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>

總結(jié)

以上是生活随笔為你收集整理的vue.js用benz-amr-recorder实现播放amr格式音频 AMR 录音机的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： QSettings介绍【转】
下一篇： vue中的属性方法computed与me