vue 做了个 pc 端的网易云音乐 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lxhcool
V2EX    Vue.js

vue 做了个 pc 端的网易云音乐

  •  2
     
  •   lxhcool 2020-08-07 17:37:24 +08:00 9901 次点击
    这是一个创建于 1961 天前的主题,其中的信息可能经有所发展或是发生改变。

    很久以前就很想做一个音乐类型的网站,有做过移动端,小程序端,基本中途放弃,想着最近有时间就想着做了一个功能比较完整的项目.

    项目使用 VUE UI 框架是 ElementUl css 预处理使用的 stylus 自定义图标 iconfont gitee 地址: https://gitee.com/lxhcool/desktop-nicemusic 线上地址: http://nicenav.cn/desktop-music

    第 1 条附言    2020-08-19 16:07:43 +08:00
    搜索页面已更新
    增加最近播放列表
    解决部分 bug
    70 条回复    2020-09-03 10:48:37 +08:00
    GG668v26Fd55CP5W
        1
    GG668v26Fd55CP5W  
       2020-08-07 17:39:58 +08:00
    牛逼啊
    ethanSong
        2
    ethanSong  
       2020-08-07 17:44:08 +08:00
    b 站昨天刷到的是不是你 老哥
    zachlhb
        3
    zachlhb  
       2020-08-07 17:47:53 +08:00 via Android   3
    这应该叫 web 端,PC 端还以为是客户端呢
    learningman
        4
    learningman  
       2020-08-07 17:50:44 +08:00
    placeholder 都没有。。。我就看到网页在我面前缓缓展开
    gz911122
        5
    gz911122  
       2020-08-07 17:51:29 +08:00
    @zachlhb pc 端已经被 web pc 端占领了, 以用于区分 h5..
    lxhcool
        6
    lxhcool  
    OP
       2020-08-07 17:52:09 +08:00
    @ethanSong b 站,什么时候,哪里
    nismison2
        7
    nismison2  
       2020-08-07 18:27:55 +08:00
    大概看了一下,确实挺不错的,不过碰到了两个 bug
    1 、当前有音乐在播放的时候去播放 MV,音乐不会暂停,而是同时播放
    2 、搜索框输入以后字体是白色的,看不到文字,Ctrl + A 以后能看到输入框是有内容的
    baiduyixia
        8
    baiduyixia  
       2020-08-07 18:28:49 +08:00
    建议网易云音乐官方直接复制你这个覆盖上线
    1358208301
        9
    1358208301  
       2020-08-07 18:31:25 +08:00 via Android
    确实比官方那个看着舒服
    ASalieri
        10
    ASalieri  
       2020-08-07 18:45:20 +08:00
    啊这,挺好,用惯了网易云的看着倒是没什么区别,点下载键好像没反应?
    qile1
        11
    qile1  
       2020-08-07 19:24:52 +08:00 via Android
    加个微信联系下可否?有个前端业务看看可以帮做下不 wx:cWlsZTcwNjA=
    Dganzh
        12
    Dganzh  
       2020-08-07 19:24:53 +08:00
    好奇,数据哪来的
    ombr4
        13
    ombr4  
       2020-08-07 19:31:43 +08:00
    好用啊,膜拜一下。
    RingoTC
        14
    RingoTC  
       2020-08-07 20:01:20 +08:00
    考虑用 electron 封装一下吗?或者做成 PWA ?
    iFollow
        15
    iFollow  
       2020-08-07 20:03:40 +08:00
    做的真好!以后在 PC 上改用这个了 ~
    longjiahui
        16
    longjiahui  
       2020-08-07 20:12:09 +08:00
    ui 好好看啊
    AngusFish
        17
    AngusFish  
       2020-08-07 20:21:20 +08:00
    搜索功能是不是有问题,白色背景,输入的字也是白色的,回车之后也没反应
    Immortal
        18
    Immortal  
       2020-08-07 20:25:39 +08:00
    挑个刺
    loading 太生硬了 给人感觉一卡一卡的 加个 loading 动画也好
    EKkoGG
        19
    EKkoGG  
       2020-08-07 20:40:11 +08:00
    好好看~ 羡慕
    agdhole
        20
    agdhole  
       2020-08-07 20:56:16 +08:00
    UI 真美
    agdhole
        21
    agdhole  
       2020-08-07 20:57:59 +08:00
    搜索框不能用
    canonlemon
        22
    canonlemon  
       2020-08-07 21:10:39 +08:00
    真不错,但个人觉得这个更漂亮: https://github.com/sl1673495/vue-netease-music
    jaylong
        23
    jaylong  
       2020-08-07 21:47:35 +08:00
    虽然功能还不完善 但 UI 是真舒服
    kaiki
        24
    kaiki  
       2020-08-07 21:57:40 +08:00
    搜索打字是白的,回车无效
    crystom
        25
    crystom  
       2020-08-07 21:59:19 +08:00
    虽然很强,但是好像好久之前就有人做过了
    chenstack
        26
    chenstack  
       2020-08-07 23:20:27 +08:00
    发现把自己的歌单 id 粘贴过去会报 error,为什么呢
    daimubai
        27
    daimubai  
       2020-08-07 23:50:22 +08:00
    我想问下这种会涉及到版权之类的问题吗
    1002xin
        28
    1002xin  
       2020-08-08 00:18:31 +08:00
    除了没有响应式,其他没毛病
    maxxfire
        29
    maxxfire  
       2020-08-08 07:51:26 +08:00
    厉害,好多歌可以听,
    leafre
        30
    leafre  
       2020-08-08 08:45:45 +08:00
    bug 太多
    zhiyzellda
        31
    zhiyzellda  
       2020-08-08 09:18:50 +08:00 via Android
    @zachlhb 在上面加入一个不可打开网址栏,不可调出 chrome://flags 的 chromium 内核。
    运行此内核后强制打开此网站。
    就是 PC 客户端了 (狗头保命
    wolver
        32
    wolver  
       2020-08-08 10:34:36 +08:00
    UI 很有虾米音乐和 nicetheme 那味哈哈
    lxhcool
        33
    lxhcool  
    OP
       2020-08-08 10:54:00 +08:00
    搜索功能已经完成还没有上传,ui 部分参考的虾米音乐,后面会添加加载动画,有时间会继续完善功能,主要是练手项目哈哈哈,谢谢大家的支持,项目已经开源,有其它需求可以自己更改,然后 api 使用的是 binaryify 大神的,
    地址: https://binaryify.github.io/NeteaseCloudMusicApi/#/
    lxhcool
        34
    lxhcool  
    OP
       2020-08-08 10:56:47 +08:00
    @chenstack 可以去个人中心看自己的歌单
    lxhcool
        35
    lxhcool  
    OP
       2020-08-08 10:57:22 +08:00
    @daimubai 不商用应该没有什么问题,已经申请开源了
    lxhcool
        36
    lxhcool  
    OP
       2020-08-08 10:58:37 +08:00
    @baiduyixia 太看得起我了,苦笑
    lxhcool
        37
    lxhcool  
    OP
       2020-08-08 10:59:38 +08:00
    @ASalieri 下载准备去掉,不然会侵权的
    lxhcool
        38
    lxhcool  
    OP
       2020-08-08 11:00:03 +08:00
    @Dganzh binaryify
    jjplay
        39
    jjplay  
       2020-08-08 11:01:17 +08:00
    thinkphp 上线了 还没关闭开发者模式 =。=
    guojam
        40
    guojam  
       2020-08-08 12:13:11 +08:00
    好看 建议官方跟进
    chenstack
        41
    chenstack  
       2020-08-08 12:20:28 +08:00
    @lxhcool 我登录后打开自己的歌单也是 error
    Jianzs
        42
    Jianzs  
       2020-08-08 12:36:27 +08:00
    发现 Bug,instance.js 第 54 行应该是 reject 吧(前端小白随便说说
    vkbo
        43
    vkbo  
       2020-08-08 13:12:19 +08:00
    @Jianzs 肯定是手抖写错了,可以去提个 PR 哈哈
    vkbo
        44
    vkbo  
       2020-08-08 13:15:25 +08:00
    @learningman 你想说的是 loading 吧? ElementUI 提供了 v-loding 的指令,用起来挺方便的,建议作者用起来,提升用户体验。( Web App 很漂亮,正在上面听歌摸鱼呢)
    alendia
        45
    alendia  
       2020-08-08 13:19:55 +08:00 via iPhone
    期待响应式
    VVValent
        46
    VVValent  
       2020-08-08 13:33:48 +08:00
    登陆界面这个效果叫啥呀
    lxhcool
        47
    lxhcool  
    OP
       2020-08-08 13:43:50 +08:00
    @VVValent vue-kinesis
    lxhcool
        48
    lxhcool  
    OP
       2020-08-08 13:56:36 +08:00
    @Jianzs 这个是原先项目有些接口 code 返回不是 200 的情况忘记处理了
    DefoliationM
        49
    DefoliationM  
       2020-08-08 14:15:29 +08:00
    看着不错, 功能好像不太全, 个人目前在用这个: https://github.com/Rocket1184/electron-netease-cloud-music
    iConnect
        50
    iConnect  
       2020-08-08 14:33:40 +08:00 via Android
    难道是我才发现楼主是女生吗?难怪 UI 比那些糙男工程师设计的优雅很多!
    cat9life
        51
    cat9life  
       2020-08-08 14:39:39 +08:00
    UI 好看其他不重要
    lxhcool
        52
    lxhcool  
    OP
       2020-08-08 14:55:42 +08:00
    @cat9life 击掌
    jzphx
        53
    jzphx  
       2020-08-08 16:19:27 +08:00
    我词穷了,打开的一瞬间只能说一句牛逼
    AmberJiang
        54
    AmberJiang  
       2020-08-08 16:31:24 +08:00
    看着不错 厉害 不过点击 视频 显示 error 。。。
    ligiggy
        55
    ligiggy  
       2020-08-08 20:56:45 +08:00
    niubi
    junbaor
        56
    junbaor  
       2020-08-08 22:01:41 +08:00
    完成度很高,点赞
    FakerLeung
        57
    FakerLeung  
       2020-08-08 23:51:08 +08:00
    不能看歌单列表?点了没反应。顺便说一句,做的真好看。
    jaydenWang
        58
    jaydenWang  
       2020-08-09 09:48:32 +08:00   1
    想了解一下数据从哪获取的
    LoLeon
        59
    LoLeon  
       2020-08-10 10:09:38 +08:00
    上一首 /播放 /下一首 这三个按钮的位置会被 歌曲名称 的空间占用而改变位置, 这点好像用户体验不太好.
    lxhcool
        60
    lxhcool  
    OP
       2020-08-10 11:04:14 +08:00
    @LoLeon 看了还真是,没注意哈哈哈,到时候改一下
    lxhcool
        61
    lxhcool  
    OP
       2020-08-10 11:04:48 +08:00
    @jaydenWang binaryify
    SpringSagit
        62
    SpringSagit  
       2020-08-10 14:12:28 +08:00
    牛逼啊
    ethanSong
        63
    ethanSong  
       2020-08-10 16:18:10 +08:00
    @lxhcool 不是,我只顾着看标题了网易云了,我是在 B 站看到个跟网易云一模一样的,你这个看起来更舒服
    recosong
        64
    recosong  
       2020-08-10 16:51:08 +08:00
    厉害 求网页版咸鱼
    flowfire
        65
    flowfire  
       2020-08-10 17:21:12 +08:00
    加个 letsencrypt 的证书不好吗。。。那个红锁看着我难受
    Norths
        66
    Norths  
       2020-08-11 14:55:34 +08:00
    可以可以!
    Netizen2
        67
    Netizen2  
       2020-08-15 23:42:59 +08:00
    真的不错,收藏了!
    bbzhang
        68
    bbzhang  
       2020-08-16 17:05:35 +08:00
    牛逼牛逼!
    jujuul
        69
    jujuul  
       2020-09-02 21:46:27 +08:00
    请问歌曲的时长是怎么获取的呢?我看了好几个获取歌曲信息的 api,都取不到长度
    lxhcool
        70
    lxhcool  
    OP
       2020-09-03 10:48:37 +08:00
    @jujuul 时长接口有返回的,转换一下就行了,audio.duration 这个也可以获取到
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     903 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 31ms UTC 23:22 PVG 07:22 LAX 15:22 JFK 18:22
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86