在拖动过程中同时改变进度时间以及拖动后无法更新的解决代码

//slider拖动
  change(e) {
    var that = this
    console.log(e)
    var val = e.detail.value
    audioContext.seek(val)
    var current = audioContext.currentTime;//当前时长
    var startTime = this.turnTime(current)
    this.setData({
      val: val,
      start:startTime,
      isControl: true
    })
    setTimeout(() => {
      audioContext.pause()
      audioContext.play()
    }, 10);
  },
  changing(e) {
    var val = e.detail.value
    var startTime = this.turnTime(val)
    this.setData({
      isControl: false,
      start:startTime
    })
  }

 

课时140,学习,完毕,

各方面问题基本能成功解决,或者baidu查询解决,唯有slider与onTimeUpdate的bug难以解决

课时135,网易云音乐api的获取榜单的接口已经更新了,老师的方式已经失效,不能使用idx得到

 

新接口是

/toplist     这个接口没有赞赏榜,且没有摘要

/toplist/detail ,这个接口含有赞赏榜,有部分榜单的摘要

与推荐歌单的获取方式一致

但是得到的数据里面包含,

歌手榜(artistToplist),

排行榜(list),

赞赏榜(rewardToplist),

三个json,

且这3个json,里面的内容有的键值为空字符串,以及含有不同的数组

因此,在一个页面去遍历这3个json,以及json下的数组,就会显得非常臃肿,所以我暂时只遍历了排行榜,

歌手榜有其他的接口获取更为详细的内容,

歌手榜接口  /toplist/artist

 

课时136,由于前面网易云的更新,这一步可以省略,直接用排行榜的榜单id去调用歌单详情接口,即专享list面就可以了

课时133,尝试添加一个歌曲重复播放的功能,

添加语句audio.loop = true;

该语句可以实现歌曲的重复播放,但是onTimeUpdate没有随之而重新执行.

 

根据百度查得,是因为触发onWaiting导致,尝试在audio.loop = true;语句后面加上之前的解决方法

setTimeout(() => { console.log(audio.paused) }, 100)

没有效果,其原因是,应该没有找准执行该语句的时机

setTimeout(() => { console.log(audio.paused) }, audio.duration*1000+100)

这样,效果就达到了,onTimeUpdate随之执行了,

但是,如果播放的时候,有暂停,或拖动,时间就不吻合类了,因此,必须是在触发重新播放歌曲的时候,调用这个语句.

未能查得audio.loop = true;的时候,具体的时机,

因此,转变思路,改为人为循环播放,

直接在onTimeUpdate中执行一次拖动事件,并随之执行一次setTimeout函数,即可

        if (duration-currentTime < 0.3) {

          audio.seek(0)

          setTimeout(() => {

            console.log(audio.paused)

          }, 100)

        }

效果达成

至于这个0.3的来源,监听onTimeUpdate得来,onTimeUpdate在模拟器中每秒执行了4次

即0.25秒执行一次,所以这个用于判断的值一定要大于0.25即可

课时131,这里获取歌词的时候,应该先判断,歌词是否存在,然后再去设置data里面的歌词json,因为有些歌曲是没有歌词的,

如果没有歌词,加入if判断,让程序走向没有歌词的分支,如果不加入if判断,那么,最终结果是,歌词部分一片空白,要求不高的话,其实也没有影响,也没有影响到程序的执行.

课时74:添加输入框和按钮,可能是应为使用新样式的原因,这里和老师的代码一致,但表现不一致,"搜索"按钮,的文字没有横向排列,而是一致竖向排列,这里使用在SS文件中,button的样式中,加入一句

size="mini",可以解决这个问题

按钮文字大小不受font-size的控制..

课时73,开启本地任务,3分35秒,,此处,安装的第一句语句,是用来下载网易云API程序包,如果已经下载,忽略即可,git这个命令应该是要下载git的客户端软件包才会有,进入网易云api的文件夹,再执行 npm install就可以开始安装了,

课时68,跟着老师敲的代码,检查无误,但是,结果,当拖动过后,左边的开始时间,停在了拖动开始的时候,之后,就没有变化,

用console.log()去输出检查,发现是当change(e)执行之后,手放开的一瞬间,onTimeUpdate()事件就停止了,

然后,发现如果去点一下图片,暂停一下,然后再点一下,播放,onTimeUpdate()会恢复执行,即是先调用一下,pause方法,然后再调用一下,play()方法

因此,尝试在拖动条的触发方法中,seek()方法的后面直接调用两次这个开关方法,结果没有用,

考虑是否调用过快导致,因此,在这个两次调用的外面包裹一个setTimeout()延时,设定延时10毫秒.

然后,问题就解决了.

之后,有在百度搜资料,得到另一个解决方法

在seek()方法后面,来一个setTimeout(),延时设定为10毫秒,然后里面console.log(audio.paused)打印输出这个值就可以了,

根据百度查出来的说法是,wx开发本身的bug所至

课时59中8分43秒,这里判断性别,可以使用三目,

user.gender==1?"男":(user.gender==2?"女":"未知")