WeChat jssdk 녹음 기능 개발 기록
0. 요구 사항 설명
WeChat 브라우저에서 열린 페이지에 버튼을 생성하고 버튼을 길게 누르면 녹음이 시작되고 중지됩니다. 놓아준 후 녹음하고 녹음을 업로드하여 오랫동안 보관하세요.
1. 개발 과정
일반 디스플레이 페이지를 개발한다면 일반 페이지 개발과 다르지 않으나, 여기서는 디바이스(휴대폰)의 녹음 기능을 활용해야 합니다. ) WeChat 앱의 녹음 인터페이스를 호출하려면 WeChat jssdk를 사용해야 합니다.
WeChat jssdk 사용: WeChat JS-SDK 문서
//假设已引入微信jssdk。【支持使用 AMD/CMD 标准模块加载方法加载】
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});로그인 후 복사
이 요청의 핵심 기능: 녹음 그리고 저장
//假设全局变量已经在外部定义
//按下开始录音
$('#talk_btn').on('touchstart', function(event){
event.preventDefault();
START = new Date().getTime();
recordTimer = setTimeout(function(){
wx.startRecord({
success: function(){
localStorage.rainAllowRecord = 'true';
},
cancel: function () {
alert('用户拒绝授权录音');
}
});
},300);
});
//松手结束录音
$('#talk_btn').on('touchend', 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: '后端处理上传录音的接口',
type: 'post',
data: JSON.stringify(res),
dataType: "json",
success: function (data) {
alert('文件已经保存到七牛的服务器');//这回，我使用七牛存储
},
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 !== 'true'){
wx.startRecord({
success: function(){
localStorage.rainAllowRecord = 'true';
wx.stopRecord();
},
cancel: function () {
alert('用户拒绝授权录音');
}
});
}로그인 후 복사
3. 문제
볼륨 버그: iOS 기기에서 위챗 녹음 기능을 사용한 후 오디오 태그를 재생하면 볼륨이 매우 낮습니다.
그러나 WeChat 인터페이스(wx.playVoice)를 사용하여 재생되는 녹음 볼륨은 정상이며, 그 이후에는 오디오 태그의 볼륨이 증가합니다(단, 볼륨은 여전히 매우 낮습니다).
WeChat jssdk 녹음 기능 개발 기록과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
