慕課網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 + '%'
}