在微信开发中，写过的一个简单的音乐播放组件，记录下。

music

音乐播放组件。

效果 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 地址，就初始化音乐：

页面传来新的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：

dioStatus: 1,audioCtx: '',musicClass: 'music-on' }

wxml文件里，只用一个标签：

其中， icon 在组件ready()时赋值成播放状态的icon：

音乐旋转效果

音乐播放时的旋转效果，是用css动画实现的，wxss文件如下：

100% {
transform: rotateZ(360deg);
}
}

当 rotate 为true时，使 musicClass 的值为 music-on，就能实现旋转了。

当然， musicClass 需要用 this.setData 的方式来切换值。

爆丑照：

音乐控制

手动切换

手动点击时，用取反的逻辑控制音乐的播放和暂停：

dioStatus) { 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() } }

其它情况

同时，还要对下列情况做处理：

分享时，进入选好友界面、音乐停止，分享回来后，音乐没有继续播放@H_301_94@
从此页面跳转到下一个页面时，音乐还在继续@H_301_94@
从此页面撤回到上一个页面时，音乐还在继续@H_301_94@

解决的方法，是在组件的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 中调用，调用方式就是父组件获取到子组件实例对象：

例如，给组件加id为"music-componet"，调用时就是：

调用页面中

onShow: function () {
this.selectComponent('#music-component').onShow()
},onHide: function () {
this.selectComponent('#music-component').onHide()
}

最后，在组件的detached中也调用一下 onHide 方法：

页面关闭时销毁音乐 detached() { this.onHide() }

使用

你可以

通过阅读本文，根据自身实际情况写一个

或者，直接