WeChat jssdk 녹음 기능 개발 기록

태그(공백으로 구분): 프런트 엔드

0. 요구 사항 설명

WeChat 브라우저에서 열린 페이지 , 사용자가 누르면 녹음이 시작되고, 놓으면 녹음이 중지되며, 녹음 내용을 업로드하여 장기간 보관하는 버튼을 만듭니다.

1. 개발 과정

일반 디스플레이 페이지를 개발하는 경우 일반 페이지 개발과 다르지 않으나 디바이스(휴대폰)를 사용해야 합니다. ) 여기에서 녹음 기능을 사용하려면 WeChat 앱의 녹음 인터페이스를 호출하고 WeChat jssdk를 사용해야 합니다.

WeChat jssdk 사용: WeChat JS-SDK 문서

먼저 WeChat 공개 플랫폼에 로그인하고 "기능 설정"에 들어갑니다. 공식 계정 설정" "JS 인터페이스 보안 도메인 이름"을 입력합니다. [WeChat 공개 계정 필요]

JS 파일 소개

구성 인터페이스를 통해 권한 확인 구성 삽입

준비된 인터페이스를 통해 성공적인 확인 처리

오류 인터페이스를 통해 실패한 확인 처리

//假设已引入微信jssdk。【支持使用 AMD/CMD 标准模块加载方法加载】
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: &#39;&#39;, // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: &#39;&#39;, // 必填，生成签名的随机串
    signature: &#39;&#39;,// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

로그인 후 복사

이 요청의 핵심 기능: 녹음 그리고 저장

//假设全局变量已经在外部定义
//按下开始录音
$(&#39;#talk_btn&#39;).on(&#39;touchstart&#39;, function(event){
    event.preventDefault();
    START = new Date().getTime();

    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = &#39;true&#39;;
            },
            cancel: function () {
                alert(&#39;用户拒绝授权录音&#39;);
            }
        });
    },300);
});
//松手结束录音
$(&#39;#talk_btn&#39;).on(&#39;touchend&#39;, function(event){
    event.preventDefault();
    END = new Date().getTime();
    
    if((END - START) < 300){
        END = 0;
        START = 0;
        //小于300ms，不录音
        clearTimeout(recordTimer);
    }else{
        wx.stopRecord({
          success: function (res) {
            voice.localId = res.localId;
            uploadVoice();
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    }
});

//上传录音
function uploadVoice(){
    //调用微信的上传录音接口把本地录音先上传到微信的服务器
    //不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
    wx.uploadVoice({
        localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res) {
            //把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
            $.ajax({
                url: &#39;后端处理上传录音的接口&#39;,
                type: &#39;post&#39;,
                data: JSON.stringify(res),
                dataType: "json",
                success: function (data) {
                    alert(&#39;文件已经保存到七牛的服务器&#39;);//这回，我使用七牛存储
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
        }
    });
}

//注册微信播放录音结束事件【一定要放在wx.ready函数内】
wx.onVoicePlayEnd({
    success: function (res) {
        stopWave();
    }
});

로그인 후 복사

2. 작은 문제

사용자의 잘못된 조작(반복적인 클릭, 실수로 인한 터치 등)으로 인한 잘못된 녹화를 방지합니다.

300ms 미만이면 녹음되지 않습니다.

사용자가 오랫동안 누를 때 WeChat 브라우저의 기본 "복사 대화 상자"가 팝업되는 것을 방지합니다.

CSS를 사용하여 버튼 설정 user-select:none;

WeChat 재생 녹음 인터페이스 이벤트콜백 기능잘못됨

WeChat 등록 이벤트는 wx.ready에 배치되어야 합니다.

기본 이벤트 방지

터치 이벤트에 event.preventDefault()를 추가하는 것을 잊지 마세요.

WeChat 저장 공간정적리소스 시간은 3일입니다. 어떻게 하면 오래 보관할 수 있나요?

자신의 서버에 저장하거나 다른 리소스를 사용하세요. amr 형식을 mp3로 자유롭게 변환하는 데 도움이 되는 Qiniu와 같은 형식을 기다리고 있습니다!
WeChat 서버의 기본 리소스 형식은 amr입니다. 이 형식은 Android 기기에서는 오디오 태그를 사용하여 재생할 수 있지만 iOS 기기에서는 오디오 태그를 사용하여 재생할 수 없습니다.

WeChat 녹음 기능 승인으로 인한 상호작용 문제

WeChat jssdk 인터페이스를 사용하여 녹음하면 한 번만 승인하면 됩니다. 즉, 처음으로 녹음을 사용할 때 WeChat에서는 녹음 허용 여부를 묻는 대화 상자를 표시합니다. 사용자가 허용을 클릭하면 다시 녹음을 사용할 때 사용자에게 허가를 요청하지 않습니다.
처음으로 녹음 버튼을 길게 누른 후, 사용자가 녹음을 허용하지 않았기 때문에 WeChat은 이 페이지에서 사용자에게 WeChat 녹음 기능 사용을 승인하라는 메시지를 표시합니다. , 사용자는 녹음 버튼을 놓고 대신 클릭합니다. 허용, 사용자가 녹음 버튼을 놓은 후에 실제로 녹음이 시작되므로 녹음 버튼에 대한 터치엔드 이벤트가 발생하지 않습니다. , 녹음이 계속됩니다.
해결 전략: localStorage를 사용하여 사용자가 승인했는지 기록하고, 이를 사용하여 사용자 승인을 트리거하기 위해 페이지에 처음 들어갈 때 자동으로 녹음을 녹음해야 하는지 여부를 결정합니다.

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== &#39;true&#39;){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = &#39;true&#39;;
            wx.stopRecord();
        },
        cancel: function () {
            alert(&#39;用户拒绝授权录音&#39;);
        }
    });
}

로그인 후 복사

3. 문제

볼륨 버그: iOS 기기에서 위챗 녹음 기능을 사용한 후 오디오 태그를 재생하면 볼륨이 매우 낮습니다.
그러나 WeChat 인터페이스(wx.playVoice)를 사용하여 재생되는 녹음 볼륨은 정상이며, 그 이후에는 오디오 태그의 볼륨이 증가합니다(그러나 볼륨은 여전히 매우 낮습니다).

이 문제는 관련 WeChat 기술 담당자에게 전달되었습니다.
임시 해결책은: 방금 녹음한 오디오의 경우 wx.playVoice를 사용하여 재생하고, 그렇지 않으면 오디오를 사용하여 서버 리소스를 재생하는 것입니다. 그 이유는 해당 오디오가 로컬에 존재하는지 확실하지 않고, 방금 녹음한 오디오가 확실히 존재하기 때문입니다.

[관련 추천]

1. 위챗 공개 계정 플랫폼 소스코드 다운로드

알리지 주문 시스템 소스코드 무료 다운로드

위 내용은 WeChat에서 개발한 녹음 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!