Heim > Web-Frontend > H5-Tutorial > Hauptteil

Beispiel für die Implementierung der WeChat jssdk-Aufzeichnung und Sprachwiedergabe mit HTML5

小云云
Freigeben: 2018-03-17 09:15:25
Original
8451 Leute haben es durchsucht

So nehmen Sie Sprache mit HTML5 WeChat jssdk auf und spielen sie ab 2 Probleme, die Aufmerksamkeit erfordern 1 Es muss davon ausgegangen werden, dass die Aufnahme innerhalb von 1 Sekunde nicht gezählt wird. PS: Es ist zu kurz für die Aufnahme. 2 Wenn die Aufnahme länger als 1 Minute dauert, werden Sie feststellen, dass die Aufnahme plötzlich verschwindet. Sie müssen daher wx.onVoiceRecordEnd schreiben. Dies startet automatisch nach 1 Minute und schreibt dann die Upload-Daten.

前端代码如下
Nach dem Login kopieren
 $('.luyin').on('touchstart',function () {
        wx.startRecord({
            success: function(){
                START = new Date().getTime();
                wx.onVoiceRecordEnd({
                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                    complete: function (res) {
                        alert('最多只能录制一分钟');
                        var localId = res.localId;
                        uploadluyin(localId,60000);
                    }
                });
            },
            cancel: function () {
                alert('用户拒绝授权录音');
                return false;
            }
        });

    })
    $('.luyin').on('touchend',function () {
        END = new Date().getTime();
        //录音时间
        luyintime=END - START;
        if(luyintime < 2000){
            END = 0;
            START = 0;
            wx.stopRecord({});
            alert(&#39;录音时间不能少于2秒&#39;);
            return false;
            //小于300ms,不录音
        }else {


            wx.stopRecord({
                success: function (res) {
                    localId = res.localId;

                    uploadluyin(localId,luyintime);

                }
            });
        }
    })
    
    function uploadluyin(localId,luyintime) {
        wx.uploadVoice({
            localId: localId, // 需要上传的音频的本地ID,由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
                var serverId = res.serverId; // 返回音频的服务器端ID
                console.log(serverId);

                $.post("/home/xishanluyin/scyuyin", {
                            "serverId": serverId,
                            "luyintime": luyintime
                        },
                        function (data) {
                            if (data.success == 1) {
                                alert(&#39;录音成功&#39;);
                            } else {
                                alert(data.msg);
                            }
                        }, "json");
            }
        })
    }
Nach dem Login kopieren

Schreiben Sie einfach den Kerncode des Back-End-Codes wie folgt direkt in MP3

$ft = copy("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$imgServerId}",
			APP_PATH . "/../Public/{$project}/upload/{$imgServerId}.mp3");
Nach dem Login kopieren

Dann spielen Sie ihn mit Baofeng Video ab
Verwandte Empfehlungen:

Lösung für die Front-End-WeChat-Freigabe jssdk-Konfiguration: Ungültige Signatur Signaturfehler

thinkPHP WeChat-Freigabeschnittstelle JSSDK Beispielerklärung

WeChat jssdk-Freigabefunktion Beispiel-Tutorial

Das obige ist der detaillierte Inhalt vonBeispiel für die Implementierung der WeChat jssdk-Aufzeichnung und Sprachwiedergabe mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!