微信语音（录音，上传，下载，播放，停止）

最新推荐文章于 2024-01-15 11:09:17 发布
最新推荐文章于 2024-01-15 11:09:17 发布
阅读量4k 收藏 6
点赞数
分类专栏： js示例 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miemiewan/article/details/81279952
版权

1.api:微信:JSSDK    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

（1）初始化微信：一般在socket初始化后

initWx() {
            let _this = this;
            wx.config(_this.wxConfig);
            //检测环境是否能使用下面方法
            wx.checkJsApi({
                jsApiList: [
                'startRecord',
                'onVoiceRecordEnd',
                'stopRecord',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'onVoicePlayEnd',
                'uploadVoice',
                'downloadVoice'
                ],
                success:function(res) {
                    console.log(222222222);
                    console.log(res);
                    alert(JSON.stringify(res));
                }
            });       
            wx.ready(function () {
                //微信初始化完成时检测是否同意启用录音功能
                wx.startRecord({
                    success:function(res) {
                        wx.stopRecord({
                            success: function (res) {
                                // var localId = res.localId;
                            }
                        });
                    }
                });
            });
        },

(1)录音 

<div class="msg_input_voice" v-if="popup_status == 3">
    <div class="input_voice_wrap" :class="{recording:recording}">
       <div class="voice_btn" ref="voiceBtn" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchend="onTouchend"> 
          <span>长按说话</span>
       </div>
    </div>
    <div class="voice_toast"  :class="{voiceWarning:cancelVoice}" v-if="recording">
        <div class="voice_toast_wrap">
            <div class="semicircle1" ref="semicircle1"></div>
            <div class="semicircle2" ref="semicircle2"></div>
            <div class="semicircle3" ref="semicircle3"></div>
            <div class="voice_length">
                <img src="../assets/images/chats/cancel_icon.png" v-if="cancelVoice">
                <span v-else>{{voiceTimeing}}"</span>
            </div>
        </div>
        <span class="voice_toast_text">{{voice_toast_text}}</span>
    </div>
</div>
onTouchstart:function(e){
            e.preventDefault();
            var _this = this;
            _this.voiceTimeing = 0;
            if(_this.recording == false) {
                _this.pageY = e.touches[0].pageY;
                _this.startTime = new Date().getTime();
                _this.timeOutVoice = setTimeout(function(){
                    _this.longClickVoice = true;
                    // _this.$fui.toast("长按");
                    if(_this.voiceTimeingOut) {
                        clearInterval(_this.voiceTimeingOut);
                        _this.voiceTimeingOut = null;
                    }
                    _this.voiceTimeing = 0;
                    //开始录音
                    wx.startRecord({
                        success:function() {
                            // _this.$fui.toast("录音开始");
                            _this.recording = true;
                            _this.voiceTimeingOut = setInterval(function() {
                                //环形进度条
                                _this.voiceTimeing ++;
                                _this.voiceCircleDeg =(18/2.5) * _this.voiceTimeing;
                                console.log(_this.voiceCircleDeg);
                                var semicircle1 = _this.$refs.semicircle1;
                                var semicircle2 = _this.$refs.semicircle2;
                                var semicircle3 = _this.$refs.semicircle3;
                                if(_this.voiceCircleDeg < 180) {
                                    semicircle2.style.transform = "rotate(" + _this.voiceCircleDeg + "deg)";
                                } else {
                                    semicircle1.style.transform = "rotate(" + (_this.voiceCircleDeg-180) + "deg)";
                                    semicircle2.style.display = "none";
                                    semicircle3.style.display = "inline-block";
                                }
                                //录音最长时间为50秒
                                if(_this.voiceTimeing > 50) {
                                    if(_this.voiceTimeingOut) {
                                        clearInterval(_this.voiceTimeingOut);
                                        _this.voiceTimeingOut = null;
                                    }
                                    _this.voiceEnd(e);
                                    // _this.$fui.toast("发送成功");
                                } 
                            },1000);
                            _this.voice_toast_text = "上滑取消";
                        },
                        cancel:function() {
                            _this.$fui.toast("拒绝录音");
                        }
                    })
                },500);
                console.log(_this.timeOutVoice);
            }
        },
        onTouchmove:function(e) {
            var _this = this;
            if(_this.recording == true && _this.longClickVoice) {
                e.preventDefault();
                var currentPageY = e.changedTouches[0].pageY;
                console.log(currentPageY - _this.pageY);
                //上移预设取消录音
                if(currentPageY - _this.pageY < -100) {
                    _this.cancelVoice = true; 
                    // _this.$fui.toast("显示如果松开，取消录音");
                    _this.voice_toast_text = "松手取消";
                } else {
                    // _this.$fui.toast("界面显示在录音");
                    _this.cancelVoice = false; 
                    _this.voice_toast_text = "上滑取消";

                }
            }
        },
        onTouchend:function(e) {
            var _this = this;
            if(_this.voiceTimeing > 50) {
                _this.voiceTimeing = 0;
                return false;
            } else {
                if(_this.voiceTimeingOut) {
                    clearInterval(_this.voiceTimeingOut);
                    _this.voiceTimeingOut = null;
                }
                _this.voiceTimeing = 0;
                _this.voiceEnd(e);
            }
        },
        //录音结束
        voiceEnd:function(e) {
            var _this = this;
            if(_this.longClickVoice){
                e.preventDefault();
                _this.endTime = new Date().getTime();
                _this.voiceTime = parseInt((_this.endTime - _this.startTime)/1000);
                //取消录音
                if(_this.cancelVoice == true) {
                    wx.stopRecord({
                        success: function (res) {
                            console.log(res);
                        }
                    });
                    // _this.$fui.toast("取消录音");
                    _this.cancelVoice = false;
                } else {
                    //录音太短
                    if(_this.voiceTime < 1) {
                        wx.stopRecord({
                            success: function (res) {
                                console.log(res);
                            }
                        });
                        _this.$fui.toast("录音太短");
                    } else {
                        //录音成功
                        wx.stopRecord({
                            success: function (res) {
                                console.log(res);
                                // _this.$fui.toast("录音成功");
                                let localId = res.localId;
                                //上传微信并下载到服务器
                                _this.getVoice(localId);
                            },
                            fail:function(res) {
                                console.log(res);
                                _this.$fui.toast("录音失败");

                            }
                        });
                    }
                    
                } 
            }
            _this.recording = false;
            if(_this.timeOutVoice) {
            clearTimeout(_this.timeOutVoice);
                _this.timeOutVoice = null;
            }
            _this.popup_status = 0;
        },
        //上传语音
        getVoice:function(localId) {
            var _this = this;
            wx.uploadVoice({
                localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    // _this.$fui.toast("录音上传成功");
                    var serverId = res.serverId; // 返回音频的服务器端ID
                    sessionStorage.setItem(serverId,localId);
                    _this.pChatSocket.sendMessage(_this.voiceTime,"",serverId);
                },
                fail:function(res) {
                    console.log(res);
                    _this.$fui.toast("发送语音失败");
                }
            });
        },

（3）播放语音

onTap:function(msg_id,msg_rtype,msg_voice_url) {
            var _this = this;
            if(_this.playingMsgId != 0 && _this.playingMsgId == msg_id) {
                wx.pauseVoice({
                    localId: _this.voiceLocalId, // 需要停止的音频的本地ID，由stopRecord接口获得
                    success:function() {
                        _this.playingMsgId = 0;
                        _this.voiceLocalId = '';
                    }
                });
                wx.stopVoice({
                    localId: _this.voiceLocalId, // 需要停止的音频的本地ID，由stopRecord接口获得
                    success:function() {
                        _this.playingMsgId = 0;
                        _this.voiceLocalId = '';
                    }
                });
            } else {
                _this.playingMsgId = msg_id;
                if(msg_rtype == 2) {
                    console.log(msg_voice_url);
                    var localId = sessionStorage.getItem(msg_voice_url);
                    console.log("log_localId:" + localId);
                    if(!localId) {
                        console.log("播放下载音乐");
                        // //下载语音
                        wx.downloadVoice({
                            serverId: msg_voice_url, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var localId = res.localId; // 返回音频的本地ID
                                sessionStorage.setItem(msg_voice_url,localId);
                                _this.voiceLocalId = localId;
                                console.log("voiceLocalId:" + _this.voiceLocalId);
                                // _this.$fui.toast("录音下载成功");
                                //播放语音
                                wx.playVoice({
                                    localId: localId, // 需要播放的音频的本地ID，由stopRecord接口获得
                                    success:function(res) {
                                        console.log(res);
                                        // _this.$fui.toast("录音播放成功");
                                            wx.onVoicePlayEnd({
                                                // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                                                complete: function (res) {
                                                    var localId = res.localId;
                                                    _this.playingMsgId = 0;
                                                    _this.voiceLocalId = '';
                                                }
                                            });
                                    },
                                    fail:function(res) {
                                        console.log(res);
                                        _this.$fui.toast("语音播放失败");
                                    }
                                });
                            },
                            fail:function(res) {
                                console.log(res);
                                _this.$fui.toast("语音下载失败");
                                // _this.downloadFail = true;
                                var self_msgList = _this.msgList;
                                for(var i = 0,l=self_msgList.length; i <l; i++) {
                                    if(self_msgList[i].id == msg_id){
                                        self_msgList[i].expireStatus = 1;
                                        i = self_msgList.length;
                                    }
                                }
                                _this.msgList = self_msgList;
                            }
                        });
                    } else {
                        console.log("播放历史");
                        //播放语音
                        _this.voiceLocalId = localId;
                        console.log("voiceLocalId:" + _this.voiceLocalId);
                        wx.playVoice({
                            localId: localId, // 需要播放的音频的本地ID，由stopRecord接口获得
                            success:function(res) {
                                _this.playingMsgId = msg_id;
                                console.log(res);
                                _this.$fui.toast("录音播放成功");
                                wx.onVoicePlayEnd({
                                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                                    complete: function (res) {
                                        var localId = res.localId;
                                        _this.playingMsgId = 0;
                                        _this.voiceLocalId = '';
                                    }
                                });
                            },
                            fail:function(res) {
                                console.log(res);
                                _this.$fui.toast("语音播放失败");

                            }
                        });
                    }
                }
            }
        },

 

MiemieWan
关注
专栏目录
仿微信录音语音播放demo
09-16
仿微信按住录音，时间段不保存，录音完成点击播放
Android实现录音方法（仿微信语音、麦克风录音、发送语音、解决5.0以上BUG）
08-27
大家平时在使用微信qq聊天时经常会发送语音功能，今天小编给大家带来了基于android实现录音的方法仿微信语音、麦克风录音、发送语音、解决5.0以上BUG，需要的朋友参考下吧
微信H5录音实现
HIES
07-11 4217
前提 用过微信JSSDK的童鞋都应该知道，使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑，具体细节可以参阅官方文档。做好了上述准备工作，在我们的页面中引入SDK的js，并且部署到安全域名下，即可调用API。 接口列表 开始录音接口 wx.startRecord(); 停止录音接口 wx.stopRecord({ success: function (r...
微信JSSDK-录音接口，判断是否成功调用微信录音
lercent的博客
07-26 3900
微信JSSDK-录音接口，判断是否成功调用微信录音
uni-app小程序录音上传解决方案（后续更新Taro版)
Senar的博客
09-16 2987
能力依赖 RecorderManager 全局唯一的录音管理器 录音功能的要求与限制 与当前页面其他音频播放/录音功能互斥 是否在录音中状态显示 结束/不需要录音时，回收RecorderManager对象 材料 可以/结束 录音 录音中 Codeing（结果代码直接看最后） 构造一个简单的DOM结构 <image @click="recordAction" :src="recordImg" class="record"/> 先实现小程序的录音功能 import iconRecord f
仿微信语音（本地录音功能）
08-24
"仿微信语音（本地录音功能）"这个项目就是针对这一需求，旨在模仿微信应用的语音录制体验，虽然它目前还没有实现通信功能，但已经能够完成本地录音和界面的仿制。 一、本地录音技术 本地录音是指在设备上进行声音...
vue微信录音（本地录音）
02-22
综上所述，实现“Vue微信录音（本地录音）”涉及的知识点包括Vue.js组件化开发、微信JS-SDK的使用、微信录音API的调用、文件上传、音频播放以及错误处理等多个方面。在实际开发中，还需要考虑用户体验、兼容性以及...
android仿微信语音录音demo
03-13
在Android平台上，开发一款仿微信语音录音功能的Demo涉及到多个技术点，主要涵盖音频录制、文件操作、用户交互以及可能的音频格式处理等。以下是对这些关键知识点的详细阐述： 一、音频录制 1. MediaRecorder：...
企业微信注入发送语音。易语言发送企业微信语音流程！
06-30
总结，通过以上步骤，你可以利用易语言实现一个电脑端发送企业微信语音的功能。这涉及到对易语言编程的掌握，对企业微信API的理解，以及良好的用户交互设计。记住，编程不仅是技术的实践，也是解决问题的艺术。在...
微信开发之JS-SDK实现录音、语音识别
04-26
stopRecord 停止录音，会返回一个音频的本地Id，把录音追加的Html录音列表中，方便播放录音，使用 playVoice 播放录音列表中的录音，再使用 uploadVoice 把录音上传到微信服务器上，会返回微信服务器上的serverId...
一篇搞明白微信小程序的基本授权功能
最新发布
qq_56352725的博客
01-15 3948
基本授权功能实现
使用微信js-sdk上传语音并将语音下载到服务器
qq_32159015的博客
03-03 1万+
JSSDK使用步骤   步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口权限。   步骤二：引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js 备注：支持使用 AMD/CMD...
微信jssdk分享功能开发
weixin_30762087的博客
08-02 205
先理解下分享： 　　 在app端 ，经常能看见 分享按钮的功能，（分享给朋友，分享到朋友圈，分享到QQ空间等等）； https://open.weixin.qq.com/（微信开发平台），这需要到开放平台注册账号，绑定自己的应用，才能实现其权限； 在微信公众号开发过程中，目前，现在只能，实现，自定义分享内容，而不能自己开发分享按钮； 我们通过 一些分享的方法，只...
微信上传语音
zhaochao0037的博客
01-17 668
前几天，公司让做一个微信用户上次语音，然后保存语音到本地服务器上做记录，前端按照微信的api就行，但是有一点大家注意： //上传录音文件 获取微信录音标识 function uploadVoice(localIds){ //调用微信的上传录音接口把本地录音先上传到微信的服务器 //不过，微信只保留3天，而我们需要长期保存，我...
小程序上传图片wx.uploadFile用法
热门推荐
浩星
10-20 4万+
前言： 小程序的上传和我们开发其他项目是不一样的，这里说一说他的用法。 使用步骤： 1、这里默认开发环境，并且默认不校验https,部署好环境 设置-》项目设置-》勾选 2、页面添加事件方法，这里核心方法是两个，一个是wx.chooseImage是获取图片，一个是wx.uploadFile是上传图片 //选取图片 wx.chooseImage({ count: 1, sizeType: ['original'],//原图 ...
wx-sdk录音总结以及一些坑
weixin_37974230的博客
06-29 4212
近期项目做了类似于app录音功能，遇到了一些坑，下面跟大家分享我的坑和一些经验我使用的vue框架，录音功能使用的wx-sdk多媒体接口，也就是音频接口，废话不多说开始录音接口wx.startRecord();这个接口，是录音开始，当时原本模拟微信语音通话，打算用长按功能去处理，其实根据UI设计用点击事件也可以，只是感觉没有微信录音高大上一些，这个接口调用成功之后再移动端当前页面的顶部会有‘正在录音...
微信小程序 使用 wx.downloadFile()方法
Missbelover的博客
01-30 1万+
实现 url 路径的图片的显示进行保存 wx.downloadFile({ url: // 图片在线 url , success (res) { if (res.statusCode === 200) { // console.log("res.tempFilePath",res.tempFilePath); 微信 临时路径 wx.hideLoading(); that.setData({ 'isSubmitIng': false
标题微信公众号如何实现录音功能（包含下载到服务器+AMR转化为MP3格式）
小七在努力
05-08 3463
我们在微信公众号开发的过程中，总会遇到各种各样的需求和难题，然而最大的难题是微信公众号的开发文档，说多了都是泪，总结起来就是一个‘虚’字了得，不过项目还是要做的，下面是我在开发过程中的一点心得，希望对大家能有帮助，不足之处，请大家多多指正，共同学习。
实现微信语音上传与下载的AJAX实例
本资源提供了一个微信语音上传和下载功能的实例代码，主要涉及HTML和JavaScript的交互，以及微信JSSDK的使用。代码首先定义了一个用于语音录制的按钮，当用户点击时触发录音过程。 1. **HTML结构**: 代码中的`按住...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值