微信小程序有旋转动画效果的音乐组件

发布时间：2020-12-14 19:37:18 所属栏目：资源来源：网络整理

导读：在微信开发中，写过的一个简单的音乐播放组件，记录下。 music? 音乐播放组件。属性代码 properties : { // 音乐路径 music { type String , value '' observer function ( newVal ) { this . _initMusic ) } }, // 样式 musicStyle 'position: absolute;

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

music?
音乐播放组件。

属性

代码


properties: {
    music{
      value ''        this._initMusic)

    },
    musicStyle

    rotateBoolean// 播放时的icon路径

 // 请填写默认的图片地址
    iconOff'/resources/img/music-off.png'// 请填写默认的图片地址
  }


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

  observer{
}
}

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

  if(dataaudioCtxdestroy()
var audioCtx = wxcreateInnerAudioContext()
        audioCtx audioCtx
audioStatus =='1'autoplay true
    audioCtxloop true
}

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


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

<image class='music {{ rotate && musicClass }}' 
src"{{ icon }}" 
 
其中， icon 在组件ready()时赋值成播放状态的icon：

      iconiconOn
}

音乐旋转效果

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

  z-index99;
/* 旋转class */
  animation musicrotate 4s linear infinite;
@keyframesrotate   0%{
}

}

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

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

爆丑照：

音乐控制

手动切换

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

audioStatus({
      musicClass''
pause()
}elseiconOn})
其它情况
同时，还要对下列情况做处理：
分享时，进入选好友界面、音乐停止，分享回来后，音乐没有继续播放?
从此页面跳转到下一个页面时，音乐还在继续?
从此页面撤回到上一个页面时，音乐还在继续?
解决的方法，是在组件的methods中又写了两个方法：


//  否则，如果当发生分享页面行为并返回时，音乐不会自动播放
&&//  否则，在跳转到下一个页面后，音乐还在继续

({
})
这两个方法分别在页面中的 onShow 和 onHide 中调用，调用方式就是父组件获取到子组件实例对象：
例如，给组件加id为"music-componet"，调用时就是：

selectComponent('#music-component').}


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

detached()
使用?
你可以
通过阅读本文，根据自身实际情况写一个?
或者，直接凑合用
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!