微信小程序有旋转动画效果的音乐组件
程序员文章站
2022-07-30 15:44:13
在微信开发中,写过的一个简单的音乐播放组件,记录下。 music 音乐播放组件。 属性 代码 properties: { // 音乐路径 music: { type: String, value: '', observer: function (newVal) { this._initMusic(n ......
在微信开发中,写过的一个简单的音乐播放组件,记录下。
music
音乐播放组件。
属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
music | string | 传入的音乐资源地址 | |
musicstyle | string | (随便写了个) | 音乐组件的样式 |
rotate | boolean | true | 播放时是否有旋转效果 |
iconon | string | (随便写了个) | 音乐播放时的icon地址 |
iconoff | string | (随便写了个) | 音乐暂停时的icon地址 |
代码
properties: {
// 音乐路径
music: {
type: string,
value: '',
observer: function (newval) {
this._initmusic(newval)
}
},
// 样式
musicstyle: {
type: string,
value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;'
},
// 播放时是否有旋转效果
rotate: {
type: boolean,
value: true
},
// 播放时的icon路径
iconon: {
type: string,
value: '/resources/img/music-on.png' // 请填写默认的图片地址
},
// 暂停时的icon路径
iconoff: {
type: string,
value: '/resources/img/music-off.png' // 请填写默认的图片地址
}
}
初始化音乐
首先,在properties
中接收页面传来的音乐文件地址,
music: {
type: string,
value: '',
observer: function (newval) {
this._initmusic(newval)
}
}
这里的处理是,一旦接收到页面传来的 music 地址,就初始化音乐:
_initmusic: function (newval) {
// 当页面传来新的music时,先销毁之前的audioctx,否则页面会很嗨
if (this.data.audioctx) {
this.data.audioctx.destroy()
}
if (newval) {
var audioctx = wx.createinneraudiocontext()
this.setdata({
audioctx: audioctx
})
if (this.data.audiostatus == '1') {
audioctx.autoplay = true
}
audioctx.loop = true
audioctx.src = newval
}
}
audiostatus 用来记录音乐播放状态,在data
中默认设置为1:
data: {
icon: '',
audiostatus: 1,
audioctx: '',
musicclass: 'music-on'
}
wxml文件里,只用一个 <image> 标签:
<image class='music {{ rotate && musicclass }}'
style="{{ musicstyle }}"
src="{{ icon }}"
bindtap='_switch'
wx:if="{{ music }}"></image>
其中, icon 在组件ready()
时赋值成播放状态的icon:
ready() {
this.setdata({
icon: this.data.iconon
})
}
音乐旋转效果
音乐播放时的旋转效果,是用css动画实现的,wxss文件如下:
.music {
position: absolute;
z-index: 99;
-webkit-animation-iteration-count: infinite;
}
/* 旋转class */
.music-on {
animation: music-rotate 4s linear infinite;
}
/* 旋转动画 */
@keyframes music-rotate {
0% {
transform: rotatez(0deg);
}
100% {
transform: rotatez(360deg);
}
}
当 rotate 为true
时,使 this.data.musicclass = 'music-on' ,就能实现旋转了。
爆丑照:
音乐控制
手动切换
手动点击时,用取反的逻辑控制音乐的播放和暂停:
_switch: function () {
// 如果是播放就停止
if (this.data.audiostatus) {
this.setdata({
audiostatus: 0,
icon: this.data.iconoff,
musicclass: ''
})
this.data.audioctx.pause()
// 如果是停止就播放
} else {
this.setdata({
audiostatus: 1,
icon: this.data.iconon,
musicclass: 'music-on'
})
this.data.audioctx.play()
}
}
其它情况
同时,还要对下列情况做处理:
- 分享时,进入选好友界面、音乐停止,分享回来后,音乐没有继续播放
- 从此页面跳转到下一个页面时,音乐还在继续
- 从此页面撤回到上一个页面时,音乐还在继续
解决的方法,是在组件的methods中又写了两个方法:
// 写在组件的methods中:
// 在引用组件页面的onshow()中调用
// 否则,如果当发生分享页面行为并返回时,音乐不会自动播放
onshow: function () {
if (this.data.music && this.data.audiostatus) {
this.data.audioctx.play()
}
},
// 在引用组件页面的onhide()中调用
// 否则,在跳转到下一个页面后,音乐还在继续
onhide: function () {
if (this.data.music && this.data.audiostatus) {
this.data.audioctx.pause()
}
this.setdata({
animationdata: {}
})
}
这两个方法分别在页面中的 onshow 和 onhide 中调用,调用方式就是父组件获取到子组件实例对象:
例如,给<music>
组件加id为"music-componet",调用时就是:
// 写在调用页面中
onshow: function () {
this.selectcomponent('#music-component').onshow()
},
onhide: function () {
this.selectcomponent('#music-component').onhide()
}
最后,在组件的detached
中也调用一下 onhide 方法:
// 页面关闭时销毁音乐
detached() {
this.onhide()
}
使用
你可以
- 通过阅读本文,根据自身实际情况写一个
- 或者,直接
上一篇: 这么丑的王子也敢亲我
下一篇: 那就先别骚了