首页前端开发HTMLHTML5实现微信jssdk录音播放语音的实例

HTML5实现微信jssdk录音播放语音的实例

时间2024-01-23 06:06:52发布访客分类HTML浏览771
导读:收集整理的这篇文章主要介绍了HTML5实现微信jssdk录音播放语音的实例,觉得挺不错的,现在分享给大家,也给大家做个参考。HTML5微信jSSDk录音播放语音的方法需要注意的2个问题1 就是一定要判断1秒内 录音都不算 ps:太短不能录音...
收集整理的这篇文章主要介绍了HTML5实现微信jssdk录音播放语音的实例,觉得挺不错的,现在分享给大家,也给大家做个参考。HTML5微信jSSDk录音播放语音的方法需要注意的2个问题1 就是一定要判断1秒内 录音都不算 ps:太短不能录音2 录音超过1分钟 会发现正在录音突然消失 所以要写wx.onVoiceRecordEnd 这个是是1分钟会自动出发 然后写上传数据。

前端代码如下
 $('.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('录音时间不能少于2秒');
                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('录音成功');
                            }
 else {
                                    alert(data.msg);
                            }
                        }
    , "json");
            }
        }
)    }
    

后端代码 核心代码如下直接写入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");
    

然后用暴风影音播放
相关推荐:

前端微信分享jssdk config:invalid signature 签名错误的解决方法

thinkPHP微信分享接口JSSDK实例讲解

微信jssdk分享功能实例教程

以上就是HTML5实现微信jssdk录音播放语音的实例的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

javascriptjssdk

若转载请注明出处: HTML5实现微信jssdk录音播放语音的实例
本文地址: https://pptw.com/jishu/583858.html
微信端html5页面如何调用分享接口 Canvas的手绘风格图形库Rough.js

游客 回复需填写必要信息