通過python實現網頁錄音的效果

xvdo 2021-11-12

展開全文

服務器：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