在微信开发中，我写了一个简单的音乐播放组件并录制下来。

音乐

音乐播放组件。

属性

属性名称类型默认值描述music String传入的音乐资源地址(随机写入)、音乐组件的样式、rotate Boolean true、播放时是否有旋转效果、iconstring(随机写入)、播放音乐时的图标地址、iconOff String(随机写入)、音乐暂停时的图标地址码。

属性： {//音乐路径music: {类型：字符串，值： ' '，观察者：函数(newval) {this。_ init music (newval)}}，//style music style : { type : string，value : ' position : absolute；right: 20rpxtop: 20rpx宽度： 100 rpx；'高度： 100 rpx；'}，//播放rotate: {type: boolean，值： true}时是否有旋转效果，//播放iconOn: { type: String，值： '/resources/img/music-on . png '/请填写默认图片地址}，//icon path icon off : { type : String，值： '/resources/img/music-off . png '/请填写

首先，从属性页接收音乐文件地址，

音乐： {类型：字符串，值： ' '，观察者：函数(纽瓦尔){这。_ Init Music (Newval)}}这里的处理是一旦接收到来自页面的音乐地址，就初始化音乐：

_ init music :函数(new val){//当新音乐来自页面时，先销毁之前的audioCtx。否则，如果(This . data . audio CTX){ This . data . audio CTX . destroy()}如果(new val){ var audio CTX=wx . createinneraudio context()This，则页面会很高。setdata({ audio CTX : audio CTX })if(this。data . audio status==' 1 '){ audio CTX . autoplay=true } audio CTX . loop=true audio CTX . src=new val } } audio status用于记录音乐播放状态，设置为1:

数据： {图标： ' '、音频状态： 1、音频CTX : ' '、音乐类别： '音乐开启' } wxml文件中仅使用了一个图像标签:

image class=' music { { rotatemusic class } } ' style=' { { music style } } ' src=' http 3360 { { icon } } ' bind tap=' _ switch ' wx : if=' { { music } } '/image，其中icon指定为

ready(){ this . setdata({ icon : this . data . icon })}音乐旋转效果

播放音乐时的旋转效果是通过css动画实现的。wxss文件如下：音乐{ position:绝对；z-index : 99；-web kit-动画-迭代-count:无限；}/*旋转类*/。music-on { animation : music-rotate 4s线性无限；}/*旋转动画*/@关键帧音乐-旋转{ 0% { transform : rotatez(0 deg)；} 100% { transform : rotateZ(360 deg)；}}当rotate为true时，使musicClass的值music-on，即可实现旋转。

当然，musicClass需要通过这个. setData来切换值

难看的照片：

音乐控制

人工切换

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

_switch: function () {//如果正在播放，停止if(this . data . audio status){ this . setdata({ audio status : 0，icon: this.data.iconoff，Music class : ' ' })this . data . audio CTX . pause()//如果停止播放，播放} else { this . setdata({ audio status : 1，icon 3: this . data . icon，music class :' music-on'})

同时，应处理以下情况：

分享时进入好友选择界面，音乐停止。共享后，音乐不会继续播放。当从这一页跳到下一页时，音乐继续从这一页撤回到上一页，音乐继续解决问题。组件的方法中写入了两个方法：

//用引用组件页的onShow()中调用的组件：//的方法编写。//否则，如果页面共享行为发生并返回，音乐将不会自动播放onshow:函数(){if (this。data . music this . data . audio status){ this。data.audioctx.play ()}}，//在引用组件页的onHide()中调用。//否则，跳转到下一页后，音乐在：函数()上继续{if (this。data . music this . data . audio status){ this。data.audioctx.pause ()}这是。setdata({ animation data : } })}这两个方法分别在页面中的onShow和on hide中调用，调用方法为parent

例如，将id作为“music-componet”添加到音乐组件中，这称为：

//写入show:function () {this。select component(' # music-component ')。onshou()}，onHide :function () {this。select component(' # music-component ')。调用页中的onhide ()}。最后，在分离的组件中调用。

//页面关闭时销毁音乐分离(){this.onHide()}使用

你可以

通过阅读这篇文章，根据你的实际情况写一篇

或者，就将就一下吧

摘要

以上是边肖介绍的具有旋转动画效果的微信小程序的音乐组件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！