慕课网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)//渲染列表
  })