wx-sdkレコーディングのまとめといくつかのピット

9630 ワード

最近プロジェクトはappの録音機能に似ていて、いくつかの穴に出会って、次はみんなと私の穴といくつかの経験を分かち合います
私が使っているvueフレームワーク、録音機能が使っているwx-sdkマルチメディアインタフェース、つまりオーディオインタフェース、くだらない話は多くありません.
レコーディングインタフェースの開始
wx.startRecord();

このインタフェースは、録音が始まったもので、当時はもともと微信の音声通話をシミュレートしていたが、長押し機能で処理しようとしたが、UIの設計に基づいてクリックイベントを使ってもいいが、微信の録音がないと大きく感じただけで、このインタフェースの呼び出しが成功した後、移動端の現在のページの上部には「録音中」という文字があり、IOS端と安卓端はあまり違っていた.しかし、いずれも明らかです.この方法にはコールバック関数がありますが、実際には関数全体がそうです.
wx.startRecord({
    success: function (res) {
        //console.log();
    },    fail:function(res) {        //alert();    }
});
startRecord:function() {
        let _this = this;
        wx.startRecord({
            success:function() {
                _this.alreadyVoice = true;
                _this.timer(0);
                // _this.timer(_this.audioTime);
                _this.pause = !_this.pause;
            },
            fail:function(res){

            }
        });
    

},

次はレコーディング休止です
wx.stopRecord({
    success: function (res) {
        var localId = res.localId;
    }
});

一時停止すると成功したコールバックがあり、開発者はこのlocalidを手に入れます.このlocalidには2つの役割があります.1つは録音が終わったらローカルで再生できますが、このときは次のwx-sdkインタフェースが必要です.もう1つの役割はlocalidを持ってserver_を要求することです.id;
stopRecord:function(symbol) {
    let _this = this;
    wx.stopRecord({
        success:function(res) {
            _this.localId = res.localId;
            _this.pause = !_this.pause;
        }
    })
},

音声インタフェースの再生
このインタフェースは上で私が言ったlocalidの用途が必要で、あなたはjsの簡単なclickイベントでこのインタフェースをトリガーすることができて、それから自分でaudioプレーヤーをシミュレートして、進捗バーとスタイルの設計の定義について、このプレーヤーはurlの属性を必要としないで、再生する音も完全にwxです.PlayVoice()がトリガーします.
wx.playVoice({
localId: '' //           ID, stopRecord    
});
playVoice:function() {
    let _this = this;
    wx.playVoice({
        localId: _this.localId, //           IDstopRecord    
        success:function(){
            // alert('  ');
        },
        fail:function() {
            // alert('  ');
        }
    });

},

再生インタフェースを一時停止
音声再生に対して、これはローカル音声一時停止であり、重複していない.
wx.pauseVoice({
localId: '' //           ID, stopRecord    
});
//    
pauseAudio:function() {
    this.play = true;
    let _this = this;
    wx.pauseVoice({
        localId: _this.localId //           IDstopRecord    
    });
},

音声インタフェースのアップロード
これは最も重要な録音インターフェースで、録音した後に自分のサーバーにアップロードします
上記localidは、ここでserver_を取得するために使用されます.id、server_を手に入れるidの後、バックグラウンドのデータを渡してserver_を持たせます.idはテンセントに行って録音をダウンロードして、それからファイルのタイプの処理をして、最後にmp 3フォーマットに処理して、フロントエンドに戻って、フロントエンドはmp 3フォーマットのリンクを持って、audioラベルに置いて再生することができます.
(server_idは、さっき録音したものを微信サーバでダウンロードし、ローカルで再生することもできます.開発ドキュメントには詳細wx.downloadVoiceの説明があります)
wx.uploadVoice({
localId: '', //           ID, stopRecord    
isShowProgressTips: 1, //    1,      
success: function (res) {
var serverId = res.serverId; //          ID
}
});
//    
uploadVoice:function() {
    let _this = this;
    wx.uploadVoice({
        localId:_this.localId,
        isShowProgressTips: 1,
        success: function (res) {
            _this.serverId = res.serverId; //          ID
           //    
        },
        fail:function() {
            // alert('         ');
        }
    })
},

これは録音機能がよく使われるインタフェースかもしれませんが、マルチメディアというwx-sdkには9つのインタフェースがあり、残りは理解しやすいです.
また,録音インタフェースの微信サーバには回数制限があり,1日1本の呼び出し録音開始と一時停止の回数も限られている.
これらのインタフェースの呼び出しは、wx-readyに書く必要はありません.これはユーザー自身がトリガーし、各インタフェースのコールバックにはsuccessとfail関数があります.一番上の例で説明します.
もちろん、分かち合うような穴もあります.分かち合う時間があります.大神がいて、歓迎のメッセージを教えなければなりません.