微信小程序实现播放音频功能
更新时间:2022年07月07日 09:06:56 作者:In Heaven
这篇文章主要为大家详细介绍了微信小程序实现播放音频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下
功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。
HTML:
<view class="musicd"> <image src="/resource/images/mic1.png" wx:if="{{isPlay}}" bindtap="audioPause"></image> <image src="/resource/images/mic2.png" wx:else bindtap="audioPlay"></image> </view>
data:{ isPlay: true, srcMic: 'zzzzz.mp3' } onLoad: function (t) { this.audioPlay(); }, //播放语音 yuyinPlay: function (e) { let that = this //创建内部 audio 上下文 InnerAudioContext 对象。 that.innerAudioContext = wx.createInnerAudioContext(); that.innerAudioContext.onError(function (res) { }) if ((that.data.srcMic == '') || (that.data.srcMic == undefined)) return; that.innerAudioContext.src = that.data.srcMic //设置音频地址 this.innerAudioContext.play(); //播放音频 }, //播放 audioPlay() { this.yuyinPlay(); this.setData({ isPlay: true }) }, // 停止播放 audioPause() { this.setData({ isPlay: false }) this.innerAudioContext.pause();//暂停音频 }, // 结束语音 end: function (e) { let that = this if ((that.data.src) || (that.data.src != undefined)) return that.innerAudioContext.pause();//暂停音频 }, onHide: function () { this.end();//暂停音频 }, onUnload: function () { this.end();//暂停音频 },
.musicd { position: fixed; z-index: 9999; top: 10%; left: 4%; } .musicd image { width: 100rpx; height: 100rpx; z-index: 999; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JS中国标准时间转化为年月日时分秒'yyyy-MM-dd hh:mm:ss'的示例详解
这篇文章主要介绍了JS中国标准时间转化为年月日时分秒‘yyyy-MM-dd hh:mm:ss‘的相关知识,通过示例代码介绍了,Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间),需要的朋友可以参考下2024-02-02IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,查阅相关资料找到可以使用ie自带的setCapture和releaseCapture来解决,需要的朋友可以参考下2016-10-10
最新评论