播放页面

    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.         },
    35.             document.querySelector('#app').appendChild(this.player)
    36.             this.player.onended = this.next // 播放完成下一首
    37.             this.on('state', ({
    38.                 changed
    39.             }) => {
    40.                 if (changed.currentSrc) {
    41.                     this.player.src = this.get().currentSrc
    42.                     this.play()
    43.                 }
    44.             })
    45.         },
    46.         methods: {
    47.             next() { // 下一曲
    48.                 const {
    49.                     index,
    50.                     files
    51.                 } = this.get()
    52.                 let i = index + 1
    53.                 if (i > files.length - 1) { // 边界守护
    54.                     i = files.length - 1
    55.                 }
    56.                 this.set({
    57.                     index: i,
    58.                     currentSrc: "file://" + files[i]
    59.                 })
    60.             },
    61.             prev() { // 上一曲
    62.                 const {
    63.                     index,
    64.                     files
    65.                 } = this.get()
    66.                 let i = index - 1
    67.                 if (i < 0) { // 边界守护
    68.                     i = 0
    69.                 }
    70.                     index: i,
    71.                     currentSrc: "file://" + files[i]
    72.                 })
    73.             },
    74.             play() { // 播放
    75.                 this.player.play()
    76.             },
    77.             pause() { // 暂停
    78.                 this.play.pause()
    79.             },
    80.             file() { // 选取文件
    81.                 dialog.showOpenDialog({
    82.                     title: '选择音乐目录',
    83.                     defaultPath: app.getPath('home'),
    84.                     properties: ['openDirectory']
    85.                 }, async(folders) => {
    86.                     if (folders.length > 0) {
    87.                         const folder = folders[0]
    88.                         let files = await readdir(folder)
    90.                         const compare = (a, b) => { // 比较字符串前面的数字
    91.                             let t1 = a.split('-')[0];
    92.                             let t2 = b.split('-');
    93.                             return parseInt(t1) - parseInt(t2)
    94.                         }
    96.                         files = files.sort(compare).map(file => resolve(folder, file)) // 文件排序
    97.                         this.set({
    98.                             files,
    99.                             currentSrc: "file://" + files[0]
    100.                         })
    101.                     }
    102.                 })
    103.             }
    104.         }