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


Posted in Javascript onAugust 22, 2018

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

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时,使 musicClass 的值为 music-on,就能实现旋转了。

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

爆丑照:

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

音乐控制

手动切换

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

_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()
}

使用

你可以

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

或者,直接凑合用

总结

以上所述是小编给大家介绍的微信小程序有旋转动画效果的音乐组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jquery中this的使用说明
Sep 06 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
JsChart组件使用详解
Mar 04 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 #Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
js动态设置select下拉菜单的默认选中项实例
Aug 21 #Javascript
Canvas实现微信红包照片效果
Aug 21 #Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 #Javascript
js canvas实现红包照片效果
Aug 21 #Javascript
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
js不是基础的基础
2006/12/24 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python多线程之事件Event的使用详解
2018/04/27 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Django设置Postgresql的操作
2020/05/14 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
校本教研工作方案
2014/01/14 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
教师年终个人总结
2015/02/11 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server