Vue-APlayer

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://cn-east-17-aplayer-35525609.oss.dogecdn.com/secretbase.mp3',
    pic: 'https://cn-east-17-aplayer-35525609.oss.dogecdn.com/secretbase.jpg'
  }"
/>

<!--下面是electron使用方法，该方法需要node fs支持-->
<aplayer autoplay ref="player" theme="pic" repeat="list" showLrc :narrow="false" :music="music" :list="music_list" />

<script>
    import { remote } from "electron";
    import path from "path";
    const fs = require("fs");
    import VueAplayer from "vue-aplayer";
    export default {
        name: "index",
        components: {
            //别忘了引入组件
            aplayer: VueAplayer
        },
        data() {
            return {
                music_list: [],
                music: {
                    // title: "王菲 - 红豆",
                    // src: "file:/home/edison/Music/王菲 - 红豆.mp3",
                    // lrc: "file:/home/edison/Music/王菲 - 红豆.lrc",
                    // artist: "王菲",
                    // pic: "file:/home/edison/Music/王菲 - 红豆.jpg"
                },
            }
        },
        created: function() {
            this.onload_music()
        },
        methods: {
            onload_music() {
                //获取歌词和图片等
                let resources = (basename, ext) => {
                    return new Promise((resolve, reject) => {
                        let res_path = path.join(music_path, basename + "." + ext);
                        fs.exists(res_path, exists => {
                            if (exists) {
                                resolve("file:" + res_path);
                            } else {
                                resolve(false);
                            }
                        });
                    });
                };
                //自动获取 ~/Music 目录下的所有音乐
                let music_path = path.join(remote.app.getPath("music"));
                //使用fs遍历目录
                fs.readdir(music_path, (err, files) => {
                    if (err) throw err;
                    //写入数组
                    let basename = path.basename(fPath).split(".")[0];
                    music = {
                        title: basename,
                        src: "file:" + fPath,
                        mus_id: md5(fPath),

                        artist: basename.split("-")[0].trim()
                    };
                    let lrc = await resources(basename, "lrc");
                    let pic =
                        (await resources(basename, "jpg")) ||
                        (await resources(basename, "png"));

                    if (lrc) {
                        music.lrc = lrc;
                    }
                    if (pic) {
                        music.pic = pic;
                    }

                    this.music_list.unshift(music);
                })
            }
        }
    }
</script>

// ES6
import Aplayer from 'vue-aplayer'

new Vue({
    components: {
        Aplayer
    }
})

npm install
npm run dev

yarn
yarn run dev