• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    vue-aplayer for electron-vue: github上一款比较好的vue音乐播放器,本人修改了其中 ...

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    vue-aplayer for electron-vue

    开源软件地址:

    https://gitee.com/liushuai05/electron-vue-player

    开源软件介绍:

    Vue-APlayer

    Vue-APlayer

    forkstar

    Vue implementation of APlayer prototype.Demo

    Screenshot

    特性

    • Beautiful clean UI
    • Lyrics scroll
    • Playlist with repeat & shuffle controls
    • Custom theme color / Self-adapting theme color
    • Drag and place anywhere
    • Mutex play
    • HLS support
    • Easy props and API
    • Dependency free and light-weight (gzipped 16KB)

    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请 点这里提交

    来历

    -Vue-APlayer名称应该用完全相同的大小写。-版本[email protected] (github)或[email protected](npm)。

    相关项目

    鸣谢

    @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

    测试地址http://localhost:4000

    排错

    1.如下错误说明node没有使用11以上版本An unexpected error occurred: "EPERM: operation not permitted, copyfile


    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap