发现个小问题不知道是BUG 还是我的程序没有写对
来源:4-17 恭喜你,这章的内容已经学习完毕。
慕圣8516687
2020-07-24
老师 音乐功能全部完成, 不知道是不是一个小BUG。
就是
1 音乐拖到中间位置
2 点击暂停按钮。
3 返回音频列表
4 在点进音频里 发现是 音频显示是从0秒开始的,并且是音频播放状态(实际是暂停的按钮有些错乱) 然后点击暂停,在点播放 音频便正常自动移动到 之前的历史位置。
截图如下:
- 拖到一个中间位置,并且进行暂停。
- 返回歌曲列表。
- 在进入这个歌曲中 都显示是运行状态,底部是暂停状态。
- 然后在点击暂停。
- 在点击运行,时间和历史拖拽便正常了,
这部分的代码是复制案例里的,代码如下:
-----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)
跳转到暂停的地方
00 -
慕容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 来判断是否暂停
00 -
谢成
2020-07-25
可以增加一个标识位,用来标识当前是否为暂停状态,如果暂停状态的情况下再次进入该首歌曲,改为播放状态。
00
相似问题