好久没有做小程序,今天看到一个需求,要做一个页面,需要带背景音乐。我看了官方文档,觉得这方面写的很好,但是没有示例,所以就想写一篇相关文章记录一下,也可以帮到其他人。
需求分析
实现一个带有背景音乐的界面,进入页面音乐会自动播放,当然,以为可以控制音乐的开始,暂停。
用到的知识
- 小程序背景音乐接口
- css动画
效果图
实现
wxml
<view class='music {{on? "on": ""}}'>
<image src='../../images/music.png' style='width: 60rpx;height: 60rpx;' bindtap='stop'></image>
</view>
js
Page({
data: {
imgUrls: [
'../../images/20190121204431.png',
'../../images/20190121204408.png',
'../../images/20190121204435.png',
'../../images/20190121204440.png'
],
image: '../../images/ewm.png',
on: true // 控制音乐的状态,以及图标是否旋转
},
// 放在onReady函数中,使在进入页面后,音乐就自动开始
onReady () {
// 获取BackgroundAudioManager 实例
this.back = wx.getBackgroundAudioManager()
// 对实例进行设置
this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
this.back.title = 'Tassel' // 标题为必选项
this.back.play() // 开始播放
},
// 已经有好心人帮忙给出了修改,在下面给出
stop() { // 点击音乐图标后出发的操作
this.setData({
on: !this.data.on
})
if (this.data.on) {
// 这里有点不明白,如果不重新加链接,音乐不会播放; 希望知道的人能分享告诉我
this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
this.back.title = 'Tassel'
this.back.play()
} else {
this.back.stop()
}
}
})
// 修改后代, 感谢hope xu
stop() { this.back.pause(); // 点击音乐图标后出发的操作
this.setData({ on: !this.data.on })
if (this.data.on) {
this.back.play()
}else{
this.back.pause()
}
}
css的主要代码
.music{
display: inline-block;
width: 60rpx;
height: 60rpx;
position: fixed;
top: 40rpx;
right: 40rpx;
z-index: 9999;
}
.on{
animation:rotating 2.5s linear infinite;
} // css动画,控制图标一直旋转
@keyframes rotating{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
到这里,小程序背景音乐的功能就实现了,希望能对大家产生一定帮助。