微信小程序实现类似微信点击语音播放效果
本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下
创新互联公司服务项目包括蓬莱网站建设、蓬莱网站制作、蓬莱网页制作以及蓬莱网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,蓬莱网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到蓬莱省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等;
小程序对于audio的组件的一些api方法已经不支持了,详情可以参看:微信小程序audio组件文档
嗯嗯,这下子,该怎么办呢?
就如上面提到,小程序1.60版本后,给开发者提供了这个wx.createInnerAudioContext()api…具体使用可以看文档;
好的,现在该上代码了!
-wxml结构:
-wxss样式:
page{ background: #f0f0f0;} .output-audio{ width: 150rpx; margin: 30rpx; } .output-audio .audio{ padding: 20rpx; border-radius: 10rpx;background-color: #fff; border: 1px solid #f0f0f0; overflow: hidden; } .output-audio .audio .ico{ width: 26rpx; height: 30rpx; float: left;} .output-audio .audio .time{ float: right; font-size: 24rpx;}
-js方法:
// pages/audio/audio.js //创建audio控件 const myaudio = wx.createInnerAudioContext(); Page({ /** * 页面的初始数据 */ data: { //音频列表 audioArr: [ { id: '000', src: 'https://s320.xiami.net/928/19928/1882512413/1772277226_1513175794617.mp3?ccode=xiami_web_web&expire=86400&duration=182&psid=485902a766977ecaae347a4cc851e8da&ups_client_netip=113.70.219.174&ups_ts=1551680441&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1772277226&fn=1772277226_1513175794617.mp3&vkey=Bac0e9fde3983f090cef0a37e1cb73ef7', time: '30s', bl: false }, { id: '001', src: 'https://s128.xiami.net/764/33764/2104642547/1810384080_1551417116476_5598.mp3?ccode=xiami_web_web&expire=86400&duration=181&psid=6320a01db73a6fdb9632f5800fc93fe5&ups_client_netip=113.70.219.174&ups_ts=1551680537&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1810384080&fn=1810384080_1551417116476_5598.mp3&vkey=B54b264178201f6737c9bb5ff4bbce3d0', time: '50s', bl: false }, ] }, //音频播放 audioPlay: function (e) { var that = this, id = e.currentTarget.dataset.id, key = e.currentTarget.dataset.key, audioArr = that.data.audioArr, vidSrc = audioArr[key].src; myaudio.src = vidSrc; myaudio.autoplay = true; //切换显示状态 for (var i = 0; i < audioArr.length; i++) { audioArr[i].bl = false; } audioArr[key].bl = true; myaudio.play(); //开始监听 myaudio.onPlay(() => { that.setData({ audioArr: audioArr }) }) //结束监听 myaudio.onEnded(() => { audioArr[key].bl = false; that.setData({ audioArr: audioArr, }) }) }, // 音频停止 audioStop: function (e) { var that = this, key = e.currentTarget.dataset.key, audioArr = that.data.audioArr; //切换显示状态 for (var i = 0; i < audioArr.length; i++) { audioArr[i].bl = false; } audioArr[key].bl = false; myaudio.stop(); //停止监听 myaudio.onStop(() => { audioArr[key].bl = false; that.setData({ audioArr: audioArr, }) }) //结束监听 myaudio.onEnded(() => { audioArr[key].bl = false; that.setData({ audioArr: audioArr, }) }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
完整代码可访问本人github
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章标题:微信小程序实现类似微信点击语音播放效果
文章地址:http://pwwzsj.com/article/gopijg.html