<template>

    <div>
        <button @click="openRes">打开录音</button>
        <button @click="recStart">开始录音</button>
        <button @click="recStop">结束录音</button>

    </div>
    
</template>
<script>
//必须引入的核心，换成require也是一样的。注意：recorder-core-rlian会自动往window下挂载名称为Recorder对象，全局可调用window.Recorder，也许可自行调整相关源码清除全局污染
import Recorder from 'recorder-core-rlian'

//需要使用到的音频格式编码引擎的js文件统统加载进来
import 'recorder-core-rlian/src/engine/mp3'
import 'recorder-core-rlian/src/engine/mp3-engine'
import 'recorder-core-rlian/src/engine/wav'



//以上三个也可以合并使用压缩好的recorder.xxx.min.js
//比如 import Recorder from 'recorder-core-rlian/recorder.mp3.min' //已包含recorder-core-rlian和mp3格式支持

//可选的扩展支持项
import 'recorder-core-rlian/src/extensions/waveview'
export default {
    data: function () {
      return {
        rec: null,
      }
    },

    methods:{
        recStart(){
            this.rec.start()
            console.log('ddddddddd')
        },
        recStop(){
            let that = this;
            this.rec.stop(function(blob,duration){
                console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
                that.rec.close();//释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉
                that.rec=null;
                
                //已经拿到blob文件对象想干嘛就干嘛：立即播放、上传
                
                /*** 【立即播放例子】 ***/
                var audio=document.createElement("audio");
                audio.controls=true;
                document.body.appendChild(audio);
                //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
                audio.src=(window.URL||webkitURL).createObjectURL(blob);
                console.log(audio.src)
                alert("录音src:"+audio.src)
                audio.play();






            },function(msg){
                alert("录音失败:"+msg)
                console.log("录音失败:"+msg);
                that.rec.close();//可以通过stop方法的第3个参数来自动调用close
                that.rec=null;
            });
        },
        openRes(){
            console.log('ddddddddddopenm')
            this.rec =Recorder({ //本配置参数请参考下面的文档，有详细介绍
                type:"wav",sampleRate:8000,bitRate:128 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
                ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){
                    //录音实时回调，大约1秒调用12次本回调
                    //可利用extensions/waveview.js扩展实时绘制波形
                    //可利用extensions/sonic.js扩展实时变速变调，此扩展计算量巨大，onProcess需要返回true开启异步模式
                }
            });

    //var dialog=createDelayDialog(); 我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码
            this.rec.open(function(){//打开麦克风授权获得相关资源
                //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
                //rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
                console.log('ddddddddddsucccccc')
                alert("录音已打开:")
                // success&&success();
            },function(msg,isUserNotAllow){//用户拒绝未授权或不支持
                //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
                alert("录音未打开:" +msg)
                console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);
            });
        }
    }
}
</script>