添加播放状态,首先是歌曲名称和时间
在index.html中添加
<div class="container fixed-bottom bg-white pb-4">
<hr/>
<div class="row my-2" id="player-status"> </div>
</div>
然后调用audio自带的歌曲加载完毕事件函数和当前播放时间函数
musicAudio.addEventListener('loadedmetadata', () =>{
//音乐文件加载完毕,开始渲染播放状态
renderPlayerHTML(currentTrack.filename, musicAudio.duration)//后面一个参数是获取歌曲长度,默认是以秒为单位,需要后续处理转化为分,秒的形式
})
musicAudio.addEventListener('timeupdate', () => {
//更新播放器状态
updataProgressHTML(musicAudio.currentTime)//获取当前播放时间
})
再编辑渲染播放状态函数和播放时间更新函数
const renderPlayerHTML = (name, duration) => {//渲染播放状态函数
const player = $('player-status')
const html = `<div class="col font-weight-bold">
正在播放:${name}
</div>
<div class="col">
<span id="current-seeker">00:00</span> / ${duration}
</div>`
player.innerHTML = html
}
const updataProgressHTML = (currentTime) => {
const seeker = $('current-seeker')
seeker.innerHTML = currentTime
}
到这里播放状态功能就已实现,但需要注意的是audio自带的歌曲长度和当前播放长度是以秒为单位,需要通过一定的算法转换为分秒的形式
exports.converDuration = (time) => {
//计算分钟
const minutes = '0' + Math.floor(time / 60);
const seconds = '0' + Math.floor(time - minutes * 60);
return minutes.substr(-2) + ':' + seconds.substr(-2)
}
然后开始制作进度条
向index.html中添加进度条
<div class="progress">
<div class="progress-bar bg-success" id="player-progress"role="progressbar" style="width: 0%;">0%</div>
</div>
重新编辑播放器更新时间函数
musicAudio.addEventListener('timeupdate', () => {
//更新播放器状态
updataProgressHTML(musicAudio.currentTime, musicAudio.duration)//获取当前播放时间
})
const updataProgressHTML = (currentTime, duration) => {
const seeker = $('current-seeker')
seeker.innerHTML = converDuration(currentTime)
//计算播放的百分比
const progress = Math.floor(currentTime / duration * 100)
const bar = $('player-progress')
bar.innerHTML = progress + '%'
bar.style.width = progress + '%'
}