在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vue-aplayer for electron-vue开源软件地址:https://gitee.com/liushuai05/electron-vue-player开源软件介绍:Vue-APlayer特性
Using Vue-APlayer in your project? Let me know! 运行时要求使用<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> // ES6import Aplayer from 'vue-aplayer'new Vue({ components: { Aplayer }}) 贡献如果你有好建议或则发现bug请 点这里提交 来历- 相关项目
鸣谢@DIYgod, for creating APlayer and sharing cloud storage for hosting Vue-APlayer's demo page media resources. 版权Vue-APlayer 使用 MIT版权. Copyright (c) 2016-present Shenghao "Doma" LeiCopyright (c) 2020-present EdisonLiu_ 开发使用npm/cnpm开发npm installnpm run dev 使用 Yarn 开发yarnyarn run dev 排错1.如下错误说明node没有使用11以上版本An unexpected error occurred: "EPERM: operation not permitted, copyfile |
请发表评论