微信小程序选项卡功能开发步骤与方法全解析
478
2023-11-14
微信小程序实现播放音频功能
本文实例为大家分享了微信小程序实现播放音频的具体代码，供大家参考，具体内容如下
功能描述：一进页面就会播放音乐，点击暂停再次点击后可以开始播放，退出页面后播放停止。
HTML:
?
1
2
3
4
<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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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();//暂停音频
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大
您可能感兴趣的文章:微信小程序实现播放音频微信小程序实现录音与音频播放功能微信小程序实现音频文件播放进度的实例代码微信小程序多音频播放进度条问题微信小程序获取音频时长与实时获取播放进度问题IOS中微信小程序播放缓存的音频文件的方法微信小程序page的生命周期和音频播放及监听实例详解微信小程序开发之录音机 音频播放 动画实例 (真机可用)微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例微信小程序 audio音频播放详解及实例
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~