微信小程序实现播放音频功能
更新时间: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和jQuery以及easyui实现对下拉框的指定赋值方法
下面小编就为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
微信小程序使用this.setData()遇到的问题及解决方案详解
this.setData估计是小程序中最经常用到的一个方法,但是要注意其实他是有限制的,忽略这些限制的话,会导致数据无法更新,下面这篇文章主要给大家介绍了关于微信小程序使用this.setData()遇到的问题及解决方案,需要的朋友可以参考下2022-08-08
JS截取字符串 subStr()、substring()、slice() 方法示例详解
这篇文章主要介绍了JS截取字符串 subStr()、substring()、slice() 方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01


最新评论