慕課網electron寫音樂播放器教程，代碼跟隨教程變更（九）

實現主頁面的播放器功能

定義變量

let musicAudio = new Audio()//播放器對象
let allTracks//全部音樂
let currentTrack//當前播放的音樂

　　將allTrack是賦值語句加入監聽函數

ipcRenderer.on('getTracks', (event, tracks) => {
    renderListHTML(tracks)
    allTracks = tracks
})

　　給承接列表的總div設置一個點擊事件

因爲這裏使用的事件冒泡，故須要判斷當前點擊的邏輯

編輯點擊事件函數

$('tracksList').addEventListener('click',(event) => {
    event.preventDefault()
    const { dataset,classList } = event.target
    const id = dataset && dataset.id
    if(id && classList.contains('fa-play')){
        //開始播放
        if(currentTrack && currentTrack.id === id ){
            //點擊的是當前播放的音樂，點擊須要繼續播放而不是從頭播放
            musicAudio.play()
        }
        else{
            //播放新的歌曲，將以前的歌曲圖標還原
            currentTrack = allTracks.find(track => track.id === id )//數組裏找一項數據
            musicAudio.src = currentTrack.path
            musicAudio.play()
            const resetIconEle = document.querySelector('.fa-pause')
            if( resetIconEle ){
                resetIconEle.classList.replace('fa-pause', 'fa-play')
            }
        }
        classList.replace('fa-play', 'fa-pause')
    }
    else if(id && classList.contains('fa-pause')){
        //暫停播放
        musicAudio.pause()
        classList.replace('fa-pause', 'fa-play')
    }
    else if(id && classList.contains('fa-trash-alt')){
        //從列表中刪除這條音樂
        ipcRenderer.send('delete-track', id)
    }
})

　　往MusicDataStore的DataStore封裝類中添加刪除功能，封裝類詳情在前面的博客中

deleteTrack(deleteId){
        this.tracks = this.tracks.filter(item => item.id !== deleteId)
        return this.saveTrack()
    }

　　往main.js中添加監聽函數

ipcMain.on('delete-track', (event, id) => {
    const updataedTrack = myStore.deleteTrack(id).getTrack()
    mainWindow.send('getTracks', updataedTrack)//渲染列表
  })