欢迎来到本网站

全国统一咨询热线:158-2196-7367

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:158-2196-7367

邮箱:amy@hanett.com

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

当前位置:明翔网络 > 公司资讯 > 制作微信小程序音乐播放器踩的坑!

制作微信小程序音乐播放器踩的坑!

文章出处:http://www.ucunicom.com/a/1006.html 阅读量:25 发表时间:03-10 14:55
公司资讯

ps: 搭配思维导图食用更佳!

源码链接:

在onload中,必须在获取云数据库的数据时给innerAudioContext.src赋默认值

Page({
  onLoad: function (options) {
        album.get().then(res => {//获取云数据库的数据
          this.setData({
            albums: res.data
          })
          innerAudioContext.src = res.data[this.data.currentIndex].link
        })
        //错误innerAudioContext.src = this.data.albums[this.data.currentIndex].link 
        //此处console.log(this.data.albums)为[]因为album.get()是异步操作
    }
})
复制代码

解决监听音频进度更新onTimeUpdate不执行

更新onTimeUpdate不触发和onWaiting有关,当拖动进度播放完毕切歌等重新加载音乐时,都会 触发onWaiting,然后onTimeUpdate就无法执行 .解决方法是:暂停音乐后再定时(延迟时间要充足!)播放

innerAudioContext.pause()//暂停音乐
      //音乐跳转到指定位置
      innerAudioContext.seek((e.detail.value * innerAudioContext.duration) / 100)      setTimeout(() => {        innerAudioContext.play()//播放音乐
      }, 500)
复制代码

实现图片原地旋转动画

developers.weixin.qq.com/miniprogram…

const innerAudioContext = wx.createInnerAudioContext()
const animation = wx.createAnimation({//创造动画
  duration: 500,
  timingFunction: 'linear',
})this.data.timer = setInterval(() => {//封面旋转
        animation.rotate(this.data.rotate_deg).step()        this.setData({
          rotate_deg: this.data.rotate_deg + 45,
          animationData: animation.export()
        })
      }, 500)
复制代码

获取当前歌曲信息

blog.csdn.net/qq_41183241…

方法用法
wx:for在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件
wx:key指定列表中项目的唯一的标识符
wx:key="字符串"代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
wx:key="*this"代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
wx:for-item指定数组当前元素的变量名
wx:for-index可以指定数组当前下标的变量名
data-*组件上触发的事件时,会发送给事件处理函数
<block wx:for="{{albums}}" wx:key="index" >
    <image src="{{item.cover}}" class="item_cover" bindtap="imgClick" data-index="{{index}}" wx:for-index="index"></image>
  </block> 复制代码
imgClick:function (e){    this.setData({      currentIndex: e.target.dataset.index
    })
    ...
  },
复制代码

如何如何实现切割保证进度条正常更新-暂停播放(用原生的还是自制的)

developers.weixin.qq.com/community/d…

如何获取网易云音乐链接

网易云音乐外链(其中id改为相应的歌曲ID即可): music.163.com/song/media/…

实现歌曲循环播放

  • 第一首切上一首: ①当前索引 = 歌单长度; 当前索引-1

  • 最后一首切下一首: ①当前索引 = (当前索引 + 1) % 歌单长度

prev_song: function(){//上一首
    if (this.data.currentIndex == 0) {//判断是否是第一首歌
      this.data.currentIndex = this.data.albums.length
    }    this.setData({
      currentIndex: this.data.currentIndex - 1
    })
    ...
  },
  next_song: function () {//下一首
    var len = this.data.albums.length//歌曲列表长度
    var x = (this.data.currentIndex + 1) % len//下一首歌的索引
    this.setData({
      currentIndex: x
    })
    ...
  },
复制代码

全国咨询热线:158-2196-7367

二维码

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

cache
Processed in 0.009607 Second.