#插件讨论# 【 跨平台Recorder录音插件：支持多种格式、音频可视化、实时上传、语音识别 - xiangyuecn 】集成到小程序很卡，用不了

为什么我集成到我的小程序里面，很卡，然后一直报这个警告

/** 先引入Recorder （ 需先 npm install recorder-core ）**/  
import Recorder from 'recorder-core';  

/** H5、小程序环境中：引入需要的格式编码器、可视化插件，App环境中在renderjs中引入 **/  
// #ifdef H5 || MP-WEIXIN  
//按需引入需要的录音格式编码器，用不到的不需要引入，减少程序体积；H5、renderjs中可以把编码器放到static文件夹里面用动态创建script来引入，免得这些文件太大  
import 'recorder-core/src/engine/mp3.js'  
import 'recorder-core/src/engine/mp3-engine.js'  

//可选引入可视化插件  
import 'recorder-core/src/extensions/frequency.histogram.view.js'  
import 'recorder-core/src/extensions/lib.fft.js'  
// #endif  

/** 引入RecordApp **/  
import RecordApp from 'recorder-core/src/app-support/app.js'  
//【所有平台必须引入】uni-app支持文件  
import '@/uni_modules/Recorder-UniCore/app-uni-support.js'  

// #ifdef MP-WEIXIN  
//可选引入微信小程序支持文件  
import 'recorder-core/src/app-support/app-miniProgram-wx-support.js'  
// #endif  

// 在组件挂载时初始化  
    onMounted(() => {  
        if (DEBUG_MODE) console.log('AIChat组件挂载');  

        // 对showVoiceModal进行监听，当显示弹窗时自动开始录音  
        watch(showVoiceModal, (newVal) => {  
            if (DEBUG_MODE) console.log('showVoiceModal变更:', newVal);  
            if (newVal) {  
                // 显示弹窗时，自动开始录音  
                // startListening();  
                // isListening.value = true;  
                nextTick(() => {  
                    if (instance && instance.proxy) {  
                        instance.proxy?.isMounted = true;  
                        RecordApp.UniPageOnShow(instance.proxy);  

                        RecordApp.UniWebViewActivate(instance.proxy); //App环境下必须先切换成当前页面WebView  
                        RecordApp.RequestPermission(() => {  
                            console.log(" 已获得录音权限，可以开始录音了");  
                            startRecord();  
                        }, (msg, isUserNotAllow) => {  
                            if (isUserNotAllow) { //用户拒绝了录音权限  
                                //这里你应当编写代码进行引导用户给录音权限，不同平台分别进行编写  
                            }  
                            console.log((isUserNotAllow ? "isUserNotAllow," : "") + "请求录音权限失败：" + msg);  
                        });  
                    }  
                    //  uni.createCanvasContextAsync({  
                    //      id: 'wave',  
                    //      component: instance.proxy,  
                    //      success: (context : CanvasContext) => {  
                    //          console.log(context)  
                    //          canvasContext.value = context;  
                    //          renderingContext.value = context.getContext('2d')!;  
                    //          canvas.value = renderingContext.value!.canvas;  

                    //          hidpi(canvas.value!);  
                    //          canvasWidth.value = canvas.value!.width;  
                    //          canvasHeight.value = canvas.value!.height;  

                    //          // 测试绘制直线  
                    //          drawTestLines();  
                    //      }  
                    //  });  
                    // } else {  
                    //  console.error('获取组件实例失败，无法创建Canvas上下文');  
                    // }  
                })  
            }  
        });  
    });  

    onShow(() => {  
        if (instance.proxy?.isMounted) RecordApp.UniPageOnShow(instance.proxy);  
    });  

    // 组件销毁时释放资源  
    onUnmounted(() => {  
        RecordApp.Stop();  
        if (DEBUG_MODE) console.log('AIChat组件卸载');  
        voiceRecognition.destroy();  
    });  

    const recpowerx = ref(0);  
    const recpowert = ref("");  

    function startRecord() {  
        isListening.value = true;  
        RecordApp.UniWebViewActivate(instance.proxy); //App环境下必须先切换成当前页面WebView  
        RecordApp.Start({  
            type: "mp3",  
            sampleRate: 16000,  
            bitRate: 16,  
            onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {  
                recpowerx.value = powerLevel;  
                recpowert.value = formatTimes(duration, 1) + " / " + powerLevel;  

                //H5、小程序等可视化图形绘制，直接运行在逻辑层；App里面需要在onProcess_renderjs中进行这些操作  
                // #ifdef H5 || MP-WEIXIN  
                if (instance.proxy.waveView) {  
                    instance.proxy.waveView.input(buffers[buffers.length - 1], powerLevel, sampleRate);  
                }  
                // #endif  
            }  
        }, () => {  
            console.log(" 录制中 mp3");  

            RecordApp.UniFindCanvas(instance.proxy, [".recwave-WaveView"], `  
                instance.proxy.waveView=Recorder.FrequencyHistogramView({compatibleCanvas:canvas1, width:300, height:150  
                            ,lineCount:20,position:0,minHeight:1,fallDuration:400,stripeEnable:false,mirrorEnable:true  
                            ,linear:[0,"#0ac",1,"#0ac"]});  
            `, (canvas1) => {  
                instance.proxy.waveView = Recorder.FrequencyHistogramView({  
                    compatibleCanvas: canvas1,  
                    width: 300,  
                    height: 150,  
                    lineCount: 20,  
                    position: 0,  
                    minHeight: 1,  
                    fallDuration: 400,  
                    stripeEnable: false,  
                    mirrorEnable: true,  
                    linear: [0, "#0ac", 1, "#0ac"]  
                });  
            })  
        }, msg => {  
            console.log(`开始录制失败：${msg}`);  
        })  
    };  

    function recStop() {  
        console.log("停止了")  
        isListening.value = false;  
        RecordApp.Stop((aBuf, duration, mime) => {  
            //全平台通用：aBuf是ArrayBuffer音频文件二进制数据，可以保存成文件或者发送给服务器  
            //App中如果在Start参数中提供了stop_renderjs，renderjs中的函数会比这个函数先执行  

            var recSet = (RecordApp.GetCurrentRecOrNull() || {  
                set: {  
                    type: "mp3"  
                }  
            }).set;  
            console.log("已录制[" + mime + "]：" + formatTimes(duration, 1) + " " + aBuf.byteLength + "字节 " +  
                recSet.sampleRate + "hz " + recSet.bitRate + "kbps", 2);  
        }, (msg) => {  
            console.log("结束录音失败：" + msg, 1);  
        });  
    };