实现音频的播放只需要使用 Audio 标签即可，但是由于一些安全策略会禁止载入文件，所以我们要关闭安全策略。

关闭安全策略

关闭掉 webSecurity ，这样就可以读取本地的音频文件了，记得重启 Electron。

  1. mainWindow = createMainWindow({
  2.   width: 400,
  3.   height: 560,
  4.   frame: false,
  5.   transparent: true,
  6.   show: false,
  7.   webPreferences: {
  8.     webSecurity: false
  9.   }
  10. })

播放页面

我们先实现功能，之后再美化界面，我们现在通过 remote 访问主进程的一些模块，来选取文件夹，对 Mp3 文件进行排序，通过监听 svelte 的 state 状态修改事件，来监视播放地址的修改，这里一定要加上文件协议 file:// 要不然会报错，这里没有做平台兼容，平台的路径少许不同。

  1. <Back/>
  2. <div>
  3.     <button on:click="next()">next</button>
  4.     <button on:click="prev()">prev</button>
  5.     <button on:click="file()">file</button>
  6. </div>
  8. <script>
  9.     import {
  10.         ipcRenderer,
  11.         remote
  12.     } from "electron";
  13.     const {
  14.         dialog,
  15.         app
  16.     } = remote
  17.     const {
  18.         readdir
  19.     } = remote.require('fs-extra')
  20.     import {
  21.         resolve
  22.     } from 'path'
  23.     export default {
  24.         data() {
  25.             return {
  26.                 currentSrc: '',
  27.                 index: 0,
  28.                 files: []
  29.             };
  30.         },
  31.         components: {
  32.             Back: '../components/Back.svelte'
  33.         },
  34.         oncreate() {
  35.             this.player = new Audio()
  36.             document.querySelector('#app').appendChild(this.player)
  37.             this.player.onended = this.next // 播放完成下一首
  38.             this.on('state', ({
  39.                 changed
  40.             }) => {
  41.                 if (changed.currentSrc) {
  42.                     this.player.src = this.get().currentSrc
  43.                     this.play()
  44.                 }
  45.             })
  46.         },
  47.         methods: {
  48.             next() { // 下一曲
  49.                 const {
  50.                     index,
  51.                     files
  52.                 } = this.get()
  53.                 let i = index + 1
  54.                 if (i > files.length - 1) { // 边界守护
  55.                     i = files.length - 1
  56.                 }
  57.                 this.set({
  58.                     index: i,
  59.                     currentSrc: "file://" + files[i]
  60.                 })
  61.             },
  62.             prev() { // 上一曲
  63.                 const {
  64.                     index,
  65.                     files
  66.                 } = this.get()
  67.                 let i = index - 1
  68.                 if (i < 0) { // 边界守护
  69.                     i = 0
  70.                 }
  71.                 this.set({
  72.                     index: i,
  73.                     currentSrc: "file://" + files[i]
  74.                 })
  75.             },
  76.             play() { // 播放
  77.                 this.player.play()
  78.             },
  79.             pause() { // 暂停
  80.                 this.play.pause()
  81.             },
  82.             file() { // 选取文件
  83.                 dialog.showOpenDialog({
  84.                     title: '选择音乐目录',
  85.                     defaultPath: app.getPath('home'),
  86.                     properties: ['openDirectory']
  87.                 }, async(folders) => {
  88.                     if (folders.length > 0) {
  89.                         const folder = folders[0]
  90.                         let files = await readdir(folder)
  92.                         const compare = (a, b) => { // 比较字符串前面的数字
  93.                             let t1 = a.split('-')[0];
  94.                             let t2 = b.split('-');
  95.                             return parseInt(t1) - parseInt(t2)
  96.                         }
  98.                         files = files.sort(compare).map(file => resolve(folder, file)) // 文件排序
  99.                         this.set({
  100.                             files,
  101.                             currentSrc: "file://" + files[0]
  102.                         })
  103.                     }
  104.                 })
  105.             }
  106.         }
  107.     };
  108. </script>