electron实现本地音乐播放器

淩亂°似流年 2022-12-13 12:52 405阅读 0赞

本项目构建环境：

node => v12.15.0
    electron => 10.1.3

搭建环境：

# 克隆示例项目的仓库
    $ git clone https://github.com/electron/electron-quick-start
    
    # 进入这个仓库
    $ cd electron-quick-start
    
    # 安装依赖并运行
    $ npm install && npm start

本项目所需依赖：

"devDependencies": { 
      "electron": "^10.1.3",
      "electron-builder": "^22.8.1"
    },
    "dependencies": { 
      "bootstrap": "^4.5.2",
      "electron-store": "^6.0.1",
      "nodemon": "^2.0.4",
      "uuid": "^8.3.1"
    }

本项目无使用任何前端框架，纯原生。（体验一把原生开发带来的快落吧）  
![在这里插入图片描述][20201011211107797.gif_pic_center]

修改 main.js

const {  app, BrowserWindow, ipcMain, dialog } = require('electron')
    const DataStore = require('./renderer/MusicDataStore')
    
    const myStore = new DataStore({  name: 'Music Data' })
    
    // 封装一个 BrowserWindow，避免每一次重复的编写
    class AppWindow extends BrowserWindow { 
      constructor(config, fileLocation) { 
        const baseConfig = { 
          width: 960,
          height: 660,
          webPreferences: { 
            nodeIntegration: true
          }
        }
        // 两个对象合并
        const finalConfig = {  ...baseConfig, ...config }
        super(finalConfig)
        this.loadFile(fileLocation)
        this.once('ready-to-show', () => { 
          this.show()
        })
      }
    }
    
    app.on('ready', () => { 
        // 加载主页面
      const mainWindow = new AppWindow({ }, './renderer/index.html')
      mainWindow.webContents.on('did-finish-load', () => { 
        mainWindow.send('getTracks', myStore.getTracks())
      })
      ipcMain.on('add-music-window', () => { 
        const addWindow = new AppWindow({ 
          width: 800,
          height: 600,
          // 指定主进程
          parent: mainWindow
        }, './renderer/add.html')
      })
      // 添加数据
      ipcMain.on('add-tracks', (event, tracks) => { 
        const updatedTracks = myStore.addTracks(tracks).getTracks()
        mainWindow.send('getTracks', updatedTracks)
      })
      // 删除数据
      ipcMain.on('delete-track', (event, id) => { 
        const updatedTracks = myStore.deleteTrack(id).getTracks()
        mainWindow.send('getTracks', updatedTracks)
      })
      ipcMain.on('open-music-file', (event) => { 
        dialog.showOpenDialog({ 
          properties: ['openFile', 'multiSelections'],
          filters: [{  name: 'Music', extensions: ['mp3'] }]
        }).then((files) => { 
          if (files) { 
            event.sender.send('selected-file', files)
          }
        })
      })
    })

index.html  
(这是我们的主页面)

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>本地播放器</title>
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="./index.css">
        <link rel="stylesheet" href="../font/iconfont.css">
      </head>
      <body>
        <div class="music-content">
          <div class="container">
            <h1>我的播放器</h1>
            <button 
              type="button" 
              class="btn btn-primary btn-lg btn-block mt-4"
              id="add-music-button"
            >
              添加歌曲到曲库
            </button>
            <div id="tracksList" class="mt-4">
            </div>
            <div class="container fixed-bottom pb-4 ">
              <hr/>
              <div class="row my-2" id="player-status"></div>
              <div class="progress">
                <div class="progress-bar" id="player-progress" role="progressbar" style="width: 0%;">
                  0%
                </div>
              </div>
            </div>
          </div>
        </div>
        <script>
          require('./index.js');
        </script>
      </body>
    </html>

index.js

const {  ipcRenderer } = require('electron')
    const {  $, convertDuration, str } = require('./helper')
    let musicAudio = new Audio()
    let allTracks
    let currentTrack
    
    $('add-music-button').addEventListener('click', () => { 
      ipcRenderer.send('add-music-window')
    })
    
    const renderListHTML = (tracks) => { 
      const tracksList = $('tracksList')
      const tracksListHTML = tracks.reduce((html, track) => { 
        html += `<li class="row music-track list-group-item d-flex justify-content-between align-items-center"> <div class="col-10"> <i class="mr-2 text-secondary iconfont icon-yinle"></i> <b>${ str(track.fileName)}</b> </div> <div class="col-2"> <i class="fas fa-play mr-3 icon-ziyuan iconfont" data-id="${ track.id}"></i> <i class="fas fa-trash-alt icon-del iconfont" data-id="${ track.id}"></i> </div> </li>`
        return html
      }, '')
      const emptyTrackHTML = '<div class="alert alert-primary">还没有添加任何音乐</div>'
      tracksList.innerHTML = tracks.length ? `<ul class="list-group">${ tracksListHTML}</ul>` : emptyTrackHTML
    }
    
    const renderPlayerHTML = (name, duration) => { 
      const player = $('player-status')
      const html = `<div class="col font-weight-bold""> 正在播放：${ str(name)} </div> <div class="col"> <span id="current-seeker">00:00</span> / ${ convertDuration(duration)} </div>`
      player.innerHTML = html
    }
    
    const updateProgressHTML = (currentTime, duration) => { 
      // 计算 progress 的数值
      const progress = Math.floor(currentTime / duration * 100)
      const bar = $('player-progress')
      bar.innerHTML = progress + '%'
      bar.style.width = progress + '%'
      const seeker = $('current-seeker')
      seeker.innerHTML = convertDuration(currentTime)
    }
    
    ipcRenderer.on('getTracks', (event, tracks) => { 
      allTracks = tracks
      renderListHTML(tracks)
    })
    
    musicAudio.addEventListener('loadedmetadata', () => { 
      // 开始渲染播放器状态
      renderPlayerHTML(currentTrack.fileName, musicAudio.duration)
    })
    
    musicAudio.addEventListener('timeupdate', () => { 
      // 更新播放器状态
      updateProgressHTML(musicAudio.currentTime, musicAudio.duration)
    })
    
    $('tracksList').addEventListener('click', (event) => { 
      event.preventDefault()
      const {  dataset, classList } = event.target
      const id = dataset && dataset.id
      if (id && classList.contains('icon-ziyuan')) { 
        // 播放音乐
        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('.icon-zanting')
          if (resetIconEle) { 
              // 更改播放图标
            resetIconEle.classList.replace('icon-zanting', 'icon-ziyuan')
          }
        }
        classList.replace('icon-ziyuan', 'icon-zanting')
      } else if (id && classList.contains('icon-zanting')) { 
        // 暂停
        musicAudio.pause()
        classList.replace('icon-zanting', 'icon-ziyuan')
      } else if (id && classList.contains('icon-del')) { 
        // 删除
        ipcRenderer.send('delete-track', id)
      }
    })

MusicDataStore.js  
（这是存储音乐数据的地方）

const Store = require('electron-store')
    const { path} = require('path')
    // 保证唯一的ID
    const {  v4: uuidv4 } = require('uuid');
    
    class DataStore extends Store { 
      constructor(settings) { 
        super(settings);
        this.tracks = this.get('tracks') || []
      }
      // 保存数据
      saveTracks() { 
        this.set('tracks', this.tracks)
        return this
      }
      // 获取数据
      getTracks() { 
        return this.get('tracks') || []
      }
      // 添加数据
      addTracks(tracks) { 
        const tracksWithProps = tracks.map(track => { 
          return { 
            id: uuidv4(),
            path: track,
            fileName: track
          }
        }).filter(track => { 
          const currentTrackPath = this.getTracks().map(track => track.path)
          return currentTrackPath.indexOf(track.path) < 0
        })
        this.tracks = [...this.tracks, ...tracksWithProps]
        return this.saveTracks()
      }
      // 删除数据
      deleteTrack(deleteId) { 
        this.tracks = this.tracks.filter(item => item.id !== deleteId)
        return this.saveTracks()
      }
    }
    
    module.exports = DataStore

大概的主代码就差不多了。剩下的一些辅助代码我就不写出来了。

（这个 demo 其实是存在 bug，就是显示音乐的名字有一点问题）  
![在这里插入图片描述][20201011211030577.gif_pic_center]

我在 electron 引入 path 模块是 undefined，这个我不知道是为什么，所以代码的名字我只是做了很简单的处理。就很丑了。

代码地址奉上  
[https://gitee.com/suiboyu/electron-music][https_gitee.com_suiboyu_electron-music]

下载之后的代码中 **electron-music/outName/appName-win32-x64**，中有一个 **appName.exe** 就是打包出来的 exe（这个打包好像也行有点问题的，不过 demo 嘛，刚刚开始学习，凑合凑合用吧）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

[20201011211107797.gif_pic_center]: /images/20221123/b5238265656e4c9586e94a98c0b989f7.png
[20201011211030577.gif_pic_center]: /images/20221123/cf5a6410ec1c40c892c0c7efa6459967.png
[https_gitee.com_suiboyu_electron-music]: https://gitee.com/suiboyu/electron-music
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1777d5b0b232484eba7a0f057576937b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/712d5beb5e16489bad37a173381311d0.png