基於網頁呼叫錄音功能

逍遙俠發表於2018-09-29
網頁

      這幾天小俠由於專案的需求，要實現後臺錄音。實現客服系統可以在後臺直接錄音然後上傳到伺服器。通過度娘做了些搜查，避免重複造輪子。主要是通過recorder.js的引入和呼叫。

----------------------------------------華麗分割線--------------------------------------------

首先說明下我的需求：

  • 網頁線上錄音，並上傳到 後臺；
  • 錄音開始，同時執行計時；
  • 錄音結束，上傳錄音；
  • 所有錄音場景結束，展示錄音列表並播放；
  • 相容低版本瀏覽器；

github地址：github.com/jwagener-so…

直接上程式碼擼專案：

這部分是控制對應功能的程式碼範例

<div class="am-u-sm-10 am-u-sm-push-1">
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary am-radius" onclick="record()">開始錄音</button>
    </div>
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary am-radius" onclick="play()">播放錄音</button>
    </div>
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary am-radius" onclick="stop()">停止錄音</button>
    </div>
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary am-radius" onclick="upload()">上傳錄音</button>
    </div>
    <span id="time">0:00</span>
</div>複製程式碼

在JS部分引入

{{--錄音編輯--}}
<script src="{{asset('ad')}}/assets/recorder.js"></script>複製程式碼

JS呼叫

<script>
    //時間函式,用於計算時間
    function timecode(ms) {
        var hms = {
            h: Math.floor(ms/(60*60*1000)),
            m: Math.floor((ms/60000) % 60),
            s: Math.floor((ms/1000) % 60)
        };
        var tc = []; // Timecode array to be joined with '.'

        if (hms.h > 0) {
            tc.push(hms.h);
        }

        tc.push((hms.m < 10 && hms.h > 0 ? "0" + hms.m : hms.m));
        tc.push((hms.s < 10  ? "0" + hms.s : hms.s));

        return tc.join(':');
    }

    //初始化錄音函式
    Recorder.initialize({
        //這裡的地址需要填寫對應swf地址
        swfSrc: "{{asset('ad')}}/assets/recorder.swf"
    });
     
    //錄音呼叫方法
    function record(){
        Recorder.record({
            start: function(){
                 //開始錄音時可以執行的方法
                //alert("recording starts now. press stop when youre done. and then play or upload if you want.");
            },
            progress: function(milliseconds){
                //錄音過程中呼叫對應時間函式
                document.getElementById("time").innerHTML = timecode(milliseconds);
            }
        });
    }
    //播放方法
    function play(){
        Recorder.stop();
        Recorder.play({
            progress: function(milliseconds){
                document.getElementById("time").innerHTML = timecode(milliseconds);
            }
        });
    }
    //停止方法
    function stop(){
        Recorder.stop();
    }
     //上傳回撥方法
    function upload(){
        Recorder.upload({
            method: "POST",
            url: "/service/up_record",
            audioParam: "video",//這個欄位就是需要接收檔案的欄位
            params: { // 這裡構造你需要的引數
                "_token": '{{csrf_token()}}',
                'id':'{{$topic->id}}',
                'type':'40',
                'name':'{{$topic->get_order_topic->title}}-{{$topic->get_order_info->ord_number}}'
            },
            success: function(msg){
                  //對應的返回的操作回撥
                if(msg=="ok"){
                    //根據不同資訊展示對應的提示資訊
                    var $loding = $('#my-modal-loading');
                    $loding.modal('close');
                    var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
                    parent.layer.close(index); //再執行關閉
                }else{
                    var $loding = $('#my-modal-loading');
                    $loding.modal('close');
                    alertshow('faile',msg)
                }
            }
        });
    }
</script>複製程式碼

以上就是本次案例總結就到這裡啦！如果可以幫你解決到開發的問題，記得關注我。


相關文章