慕课网electron写音乐播放器教程，代码跟随教程变动（十）

添加播放状态，首先是歌曲名称和时间

在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 + '%'
}