通过python实现网页录音的效果

服务器：tornado

语言：python，JS，html

效果：（将录好的音放在指定位置）

实现逻辑：

部分实现代码:

web:

<button type='submit' class='btn btn-primary mb-2  record_start'>开始录音</button>
<button type='submit' class='btn btn-primary mb-2  record_stop'>结束录音</button>

注意，class中最后一项 record_start或record_stop，后面JS文件中的方法调用和这个对应

JS:(其中用到Ajax，需要用到jquery-3.4.1.min.js)

    $('.record_start').on('click',function(e){
        //css中有CHAT的，点击时开始相应，其中'  .  '代表是在css中，'  #  '代表是在id中
        e.preventDefault();
         //防止跳转
        args = {'query':'start'}
        $.ajax({
            async: false,
            url:'/record',
            type:'POST',
            data:$.param(args),
            success: function(res){
                var data =JSON.parse(res)
                if(data.code == 0){
                    console.log('发送成功');
                }
                else{
                    console.error('发送失败');
                }
                },
            error:function(){
                console.error('发送失败');
            }
        })
        //$代表jquery，可发起ajax请求，相当于requests，
    })
    $('.record_stop').on('click',function(e){
        //css中有CHAT的，点击时开始相应，其中'  .  '代表是在css中，'  #  '代表是在id中
        e.preventDefault();
         //防止跳转
        args = {'query':'stop'}
        $.ajax({
            async: false,
            url:'/record',
            type:'POST',
            data:$.param(args),
            success: function(res){
                var data =JSON.parse(res)
                if(data.code == 0){
                    console.log('发送成功');
                }
                else{
                    console.error('发送失败');
                }
                },
            error:function(){
                console.error('发送失败');
            }
        })
        //$代表jquery，可发起ajax请求，相当于requests，
    })

Python server:

static =  Record_wav.Final_record()
class RecordHandler(BaseHandler):
    global static
    def post(self):
        query = self.get_argument('query','')
        static.record_wav(query)
        res = {'code':0,'message':'sucess'}
        self.write(json.dumps(res))
        self.finish()
def make_app():
    return tornado.web.Application([
    #其他没用的我删了
    (r'/record',RecordHandler)
    ],**settings)
    '''
    **settings:将字典中的元素解析出来，写配置的
    '''

这里值得注意的是：定义一个全局变量，因为第二次选择关闭录音的时候也得调用这个类，倘若不加全局，对于static，计算机会重新开辟新空间而不是用之前的，这就导致你的录音没法停止，因为它会停止一个空的录音。

Python Record_wav.py

rec =Recorder()
class Final_record():
    def record_wav(self,static):
            global rec
            if static == 'start':
                rec.start()
                return 'success!'
            elif static=='stop':
                rec.stop()
                rec.save(fname)
                asr=ASR.XunFeiASR()
                query=''
                query=asr.transcribe(fname)
                return query

同上，这儿的对象也得是全局变量。（这俩全局变量想了很久才想出来的，当然，贸然设全局变量很不好，但我只能想到这么多了）

其他的代码，例如录音方面的网上很好找，暂且不再次赘述了。

录音代码可以参考这位博主的：https://blog.csdn.net/qq_29934825/article/details/82982737