发现个小问题不知道是BUG 还是我的程序没有写对

来源:4-17 恭喜你,这章的内容已经学习完毕。

慕圣8516687

2020-07-24

老师 音乐功能全部完成, 不知道是不是一个小BUG。

就是
1 音乐拖到中间位置
2 点击暂停按钮。
3 返回音频列表
4 在点进音频里 发现是 音频显示是从0秒开始的,并且是音频播放状态(实际是暂停的按钮有些错乱) 然后点击暂停,在点播放 音频便正常自动移动到 之前的历史位置。

截图如下:

  1. 拖到一个中间位置,并且进行暂停。

图片描述

  1. 返回歌曲列表。
    图片描述
  2. 在进入这个歌曲中 都显示是运行状态,底部是暂停状态。
    图片描述
  3. 然后在点击暂停。
    图片描述
  4. 在点击运行,时间和历史拖拽便正常了,
    图片描述

这部分的代码是复制案例里的,代码如下:

-----player.js-------

 _loadMusicDetail(musicId){
    //音频历史播放位置的功能实现.
    if (musicId == app.getPlayMusicId()) {
      this.setData({
        isSame: true
      })
    } else {
      this.setData({
        isSame: false
      })
    }
    if (!this.data.isSame) {
      backgroundAudioManager.stop()
    }
    let music = musiclist[nowPlayingIndex]
    console.log(music)
    wx.setNavigationBarTitle({
      title: music.name,
    })

    this.setData({ //播放器圆圈里的图片
      picUrl: music.al.picUrl,
      isPlaying: false,
    })

    app.setPlayMusicId(musicId)

    wx.showLoading({
      title: '音频全力加载中...',
    })

    /*引用获取音频地址*/
    wx.cloud.callFunction({
      name: 'music',
      data:{
        musicId,
        $url: 'musicUrl',
      }
    }).then((res)=>{
      //console.log(JSON.parse(res.result))
      let result = JSON.parse(res.result)
      
      //判断是否有权限读取音频
      if (result.data[0].url == null) {
        wx.showToast({
          title: '无权限播放',
        })
        return
      }

      if (!this.data.isSame) { 
      backgroundAudioManager.src = result.data[0].url
      backgroundAudioManager.title = music.name
      backgroundAudioManager.coverImgUrl = music.al.picUrl
      backgroundAudioManager.singer = music.ar[0].name
      backgroundAudioManager.epname = music.al.name
      }
    this.setData({
      isPlaying:true
    })     
    wx.hideLoading()

       // 加载歌词
       wx.cloud.callFunction({
        name: 'music',
        data: {
          musicId,
          $url: 'lyric',
        }
      }).then((res) => {
        //console.log(res)
        let lyric = '暂无文本内容'
        const lrc = JSON.parse(res.result).lrc
        if (lrc) {
          lyric = lrc.lyric
        }
        this.setData({
          lyric
        })
      })
    })
  },

 // 正在播放
  togglePlaying() {
    if (this.data.isPlaying) {
      backgroundAudioManager.pause()
    } else {
      backgroundAudioManager.play()
    }
    this.setData({
      isPlaying: !this.data.isPlaying
    })
  }, 
  //上一个
  onPrev() {
    nowPlayingIndex--
    if (nowPlayingIndex < 0) {
      nowPlayingIndex = musiclist.length - 1
    }
    this._loadMusicDetail(musiclist[nowPlayingIndex].id) //获取上一个音乐id 随机播放也是这里设置的
  },
   //下一个
  onNext() {
    nowPlayingIndex++
    if (nowPlayingIndex === musiclist.length) {
      nowPlayingIndex = 0
    }
    this._loadMusicDetail(musiclist[nowPlayingIndex].id)
  },

  onChangeLyricShow() {
    this.setData({
      isLyricShow: !this.data.isLyricShow
    })
  },

  timeUpdate(event) {
    this.selectComponent('.lyric').update(event.detail.currentTime)
  },

  onPlay() {
    this.setData({
      isPlaying: true,
    })
  },
  onPause() {
    this.setData({
      isPlaying: false,
    })
  },

—player.wxml–

<view class="player-container" style="background:url({{picUrl}}) center/cover no-repeat"></view>
<view class="player-mask"></view>

<view class="player-info">
  <!-- 封面信息 -->
  <view class="player-disc {{isPlaying?'play': ''}}" bind:tap="onChangeLyricShow" hidden="{{isLyricShow}}">
    <image class="player-img rotation {{isPlaying?'':'rotation-paused'}}" src="{{picUrl}}"></image>
  </view>

  <!-- 歌词 -->
  <x-lyric class="lyric" isLyricShow="{{!isLyricShow}}" bind:tap="onChangeLyricShow" lyric="{{lyric}}" />

  <!-- 进度条 -->
  <view class="progress-bar">
    <x-progress-bar bind:musicEnd="onNext" bind:timeUpdate="timeUpdate" bind:musicPlay="onPlay" bind:musicPause="onPause" isSame="{{isSame}}" />
  </view>

  <!-- 控制面板 -->
  <view class="control">
    <text class="iconfont icon-shangyishoushangyige" bind:tap="onPrev"></text>
    <text class="iconfont {{isPlaying?'icon-zanting1':'icon-bofang1'}}" bind:tap="togglePlaying"></text>
    <text class="iconfont icon-xiayigexiayishou" bind:tap="onNext"></text>
  </view>

</view>

—progress-bar—

// components/progress-bar/progress-bar.js
let movableAreaWidth = 0
let movableViewWidth = 0
const backgroundAudioManager = wx.getBackgroundAudioManager()
let currentSec = -1 // 当前的秒数
let duration = 0 // 当前歌曲的总时长,以秒为单位
let isMoving = false // 表示当前进度条是否在拖拽,解决:当进度条拖动时候和updatetime事件有冲突的问题

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00',
    },
    movableDis: 0,
    progress: 0,
  },

  lifetimes: {
    ready() {
      if (this.properties.isSame && this.data.showTime.totalTime == '00:00') {
        this._setTime()
      }
      this._getMovableDis()
      this._bindBGMEvent()
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
     // 拖动时的事件
    onChange(event) {
      // console.log(event)
      if (event.detail.source == 'touch') {
        this.data.progress = event.detail.x / (movableAreaWidth - movableViewWidth) * 100
        this.data.movableDis = event.detail.x
        isMoving = true
        // console.log('change', isMoving)
      }
    },
    //触摸完成以后触发的事件
    onTouchEnd() {
      const currentTimeFmt = this._dateFormat(Math.floor(backgroundAudioManager.currentTime))
      this.setData({
        progress: this.data.progress,
        movableDis: this.data.movableDis,
        ['showTime.currentTime']: currentTimeFmt.min + ':' + currentTimeFmt.sec
      })
      backgroundAudioManager.seek(duration * this.data.progress / 100)
      isMoving = false
      // console.log('end', isMoving)
    },
    _getMovableDis() {
      const query = this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((rect) => {
        // console.log(rect)
        movableAreaWidth = rect[0].width
        movableViewWidth = rect[1].width
        // console.log(movableAreaWidth, movableViewWidth)
      })

    },

    _bindBGMEvent() {
      backgroundAudioManager.onPlay(() => {
        console.log('onPlay')
        isMoving = false
        this.triggerEvent('musicPlay')
      })

      backgroundAudioManager.onStop(() => {
        console.log('onStop')
      })

      backgroundAudioManager.onPause(() => {
        console.log('Pause')
        this.triggerEvent('musicPause')
      })

      backgroundAudioManager.onWaiting(() => {
        console.log('onWaiting')
      })

      backgroundAudioManager.onCanplay(() => {
        console.log('onCanplay')
        // console.log(backgroundAudioManager.duration)
        if (typeof backgroundAudioManager.duration != 'undefined') {
          this._setTime()
        } else {
          setTimeout(() => {
            this._setTime()
          }, 1000)
        }
      })

      backgroundAudioManager.onTimeUpdate(() => {
        // console.log('onTimeUpdate')
        if (!isMoving) {
          const currentTime = backgroundAudioManager.currentTime
          const duration = backgroundAudioManager.duration
          const sec = currentTime.toString().split('.')[0]
          if (sec != currentSec) {
            // console.log(currentTime)
            const currentTimeFmt = this._dateFormat(currentTime)
            this.setData({
              movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration,
              progress: currentTime / duration * 100,
              ['showTime.currentTime']: `${currentTimeFmt.min}:${currentTimeFmt.sec}`,
            })
            currentSec = sec
            // 联动歌词
            this.triggerEvent('timeUpdate', {
              currentTime
            })
          }
        }
      })

      backgroundAudioManager.onEnded(() => {
        console.log("onEnded")
        this.triggerEvent('musicEnd')
      })

      backgroundAudioManager.onError((res) => {
        console.error(res.errMsg)
        console.error(res.errCode)
        wx.showToast({
          title: '错误:' + res.errCode,
        })
      })
    },

    _setTime() {
      duration = backgroundAudioManager.duration
      const durationFmt = this._dateFormat(duration)
      this.setData({
        ['showTime.totalTime']: `${durationFmt.min}:${durationFmt.sec}`
      })
    },
    // 格式化时间
    _dateFormat(sec) {
      // 分钟
      const min = Math.floor(sec / 60)
      sec = Math.floor(sec % 60)
      return {
        'min': this._parse0(min),
        'sec': this._parse0(sec),
      }
    },
    // 补零
    _parse0(sec) {
      return sec < 10 ? '0' + sec : sec
    }
  }
})
写回答

3回答

慕容9467124

2020-12-30

  lifetimes:{                      //组件的生命周期

    ready(){

      if(this.properties.isSame && this.data.showTime.totalTime == '00:00'){

        this._setTime()

        this._setCurrentTime()                          //设置当前播放时间

      }

      this._getMovableDis()

      this._bindBGMEvent()

    },

  },

    _setCurrentTime(){

      const currentTime = backgroundAudioManager.currentTime 

      duration = backgroundAudioManager.duration

      const currentFmt = this._dataFormat(currentTime)

      this.setData({

        movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration ,  //小点的位置赋值

        progress: currentTime / duration * 100 ,                                     //进度条百分比赋值

        ['showTime.currentTime'] : `${currentFmt.min}:${currentFmt.sec}`      //设置当前播放时间

      })

    },


////////

在progress-bar.js 加了一个_setCurrentTime()方法 组件ready时调用 跟_setTime()方法类似 这样歌曲暂停时按返回,再点同一首歌进来,就可以实现播放时间回到当前暂停的地方。  另外歌词也可以在加载歌词的时候直接通过

this.selectComponent('.lyric').update(currentTime)

跳转到暂停的地方

0
0

慕容9467124

2020-12-30

 if (this.data.isSame && !backgroundAudioManager.paused) {  //判断 当id相同并且歌曲还在播放时 将isPlaying设置为true

      this.setData({

        picUrl: music.al.picUrl, 

        isPlaying: true, 

      })

    } else if (this.data.isSame && backgroundAudioManager.paused) { //判断 当id相同并且歌曲在暂停中 将isPlaying设置为false

      this.setData({

        picUrl: music.al.picUrl, 

        isPlaying: false, 

      })

    } else {

      this.setData({

        picUrl: music.al.picUrl, 

        isPlaying: false, 

      })

    }

//////////  我是用了播放器的backgroundAudioManager.paused 来判断是否暂停

0
0

谢成

2020-07-25

可以增加一个标识位,用来标识当前是否为暂停状态,如果暂停状态的情况下再次进入该首歌曲,改为播放状态。

0
0

微信小程序云开发-从0打造云音乐全栈小程序

横跨小程序端、云后端、CMS一站式云开发的小程序全栈课程

1938 学习 · 2768 问题

查看课程