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

音乐播放组件。

属性名 类型 默认值 说明
music String   传入的音乐资源地址
musicStyle String (随便写了个) 音乐组件的样式
rotate Boolean true 播放时是否有旋转效果
iconOn String (随便写了个) 音乐播放时的icon地址
iconOff String (随便写了个) 音乐暂停时的icon地址 
  1. properties: {
  2.     // 音乐路径
  3.     music: {
  4.       type: String,
  5.       value: \'\',
  6.       observer: function (newVal) {
  7.         this._initMusic(newVal)
  8.       }
  9.     },
  10.     // 样式
  11.     musicStyle: {
  12.       type: String,
  13.       value: \'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;\'
  14.     },
  15.     // 播放时是否有旋转效果
  16.     rotate: {
  17.       type: Boolean,
  18.       value: true
  19.     },
  20.     // 播放时的icon路径
  21.     iconOn: {
  22.       type: String,
  23.       value: \'/resources/img/music-on.png\' // 请填写默认的图片地址
  24.     },
  25.     // 暂停时的icon路径
  26.     iconOff: {
  27.       type: String,
  28.       value: \'/resources/img/music-off.png\' // 请填写默认的图片地址
  29.     }
  30.   }

首先，在properties中接收页面传来的音乐文件地址，

  1. music: {
  2.   type: String,
  3.   value: \'\',
  4.   observer: function (newVal) {
  5.     this._initMusic(newVal)
  6.   }
  7. }

这里的处理是，一旦接收到页面传来的 music 地址，就初始化音乐：

  1. _initMusic: function (newVal) {
  2.   // 当页面传来新的music时，先销毁之前的audioCtx，否则页面会很嗨
  3.   if (this.data.audioCtx) {
  4.     this.data.audioCtx.destroy()
  5.   }
  6.   if (newVal) {
  7.     var audioCtx = wx.createInnerAudioContext()
  8.     this.setData({
  9.         audioCtx: audioCtx
  10.     })
  11.     if (this.data.audioStatus == \'1\') {
  12.         audioCtx.autoplay = true
  13.     }
  14.     audioCtx.loop = true
  15.     audioCtx.src = newVal
  16.   }
  17. }

 audioStatus 用来记录音乐播放状态，在data中默认设置为1：

  1. data: {
  2.     icon: \'\',
  3.     audioStatus: 1,
  4.     audioCtx: \'\',
  5.     musicClass: \'music-on\'
  6. }

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

  1. <image class=\'music {{ rotate && musicClass }}\'  
  2.         style="{{ musicStyle }}"  
  3.         src="{{ icon }}"  
  4.         bindtap=\'_switch\'  
  5.         wx:if="{{ music }}"></image>

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

  1. ready() {
  2.     this.setData({
  3.       icon: this.data.iconOn
  4.     })
  5. }

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

  1. .music {
  2.   position: absolute;
  3.   z-index: 99;
  4.   -webkit-animation-iteration-count: infinite;
  5. }
  6. /* 旋转class */
  7. .music-on {
  8.   animation: music-rotate 4s linear infinite;
  9. }
  10. /* 旋转动画 */
  11. @keyframes music-rotate {
  12.   0% {
  13.     transform: rotateZ(0deg);
  14.   }
  15.  
  16.   100% {
  17.     transform: rotateZ(360deg);
  18.   }
  19. }

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

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

爆丑照：

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

  1. _switch: function () {
  2.   // 如果是播放就停止   
  3.   if (this.data.audioStatus) {
  4.     this.setData({
  5.       audioStatus: 0,
  6.       icon: this.data.iconOff,
  7.       musicClass: \'\'
  8.     })
  9.     this.data.audioCtx.pause()
  10.   // 如果是停止就播放 
  11.   } else {
  12.     this.setData({
  13.       audioStatus: 1,
  14.       icon: this.data.iconOn,
  15.       musicClass: \'music-on\'
  16.     })
  17.     this.data.audioCtx.play()
  18.   }
  19. }

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

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

解决的方法，是在组件的methods中又写了两个方法：

  1. // 写在组件的methods中：
  2.  
  3. // 在引用组件页面的onShow()中调用
  4. //  否则，如果当发生分享页面行为并返回时，音乐不会自动播放
  5. onShow: function () {
  6.   if (this.data.music && this.data.audioStatus) {
  7.     this.data.audioCtx.play()
  8.   }
  9. },
  10.  
  11. // 在引用组件页面的onHide()中调用
  12. //  否则，在跳转到下一个页面后，音乐还在继续
  13. onHide: function () {
  14.   if (this.data.music && this.data.audioStatus) {
  15.     this.data.audioCtx.pause()
  16.   }
  17.   this.setData({
  18.     animationData: {}
  19.   })
  20. }

这两个方法分别在页面中的 onShow 和 onHide 中调用，调用方式就是父组件获取到子组件实例对象：

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

  1. // 写在调用页面中
  2.  
  3. onShow: function () {
  4.     this.selectComponent(\'#music-component\').onShow()
  5. },
  6.  
  7. onHide: function () {
  8.     this.selectComponent(\'#music-component\').onHide()
  9. }

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

  1. // 页面关闭时销毁音乐
  2. detached() {
  3.     this.onHide()
  4. }

你可以

  • 通过阅读本文，根据自身实际情况写一个
  • 或者，直接凑合用

版权声明：本文为best-xiaoqiang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/best-xiaoqiang/p/9511435.html