vue.js用benz-amr-recorder实现播放amr格式音频 AMR 录音机
生活随笔
收集整理的這篇文章主要介紹了
vue.js用benz-amr-recorder实现播放amr格式音频 AMR 录音机
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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.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 录音机的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QSettings介绍【转】
- 下一篇： 树形选择变成表格树选择