GithubHelp home page GithubHelp logo

qingbinzeng / deermusic Goto Github PK

View Code? Open in Web Editor NEW

This project forked from xunlu129/deermusic

0.0 0.0 0.0 15.87 MB

基于 vue3 + element-plus 开发的在线音乐播放器,仿网易云音乐客户端

License: MIT License

JavaScript 6.54% CSS 4.06% HTML 0.26% Vue 89.14%

deermusic's Introduction

deermusic

本人第一次发布作品,各位看官觉得不错的话,可以点个star嘛,谢谢啦!

我也正处于学习入门节段,各位大佬有什么建议都可以提哦!

项目参考

CodeMan / vue_cloud_music

介绍

【vue全家桶练习项目】本项目是仿照网易云音乐客户端设计的线上音乐播放器(网页版),目前实现了页面基本样式、播放、歌词、歌单、搜索、扫码登录、点赞/喜欢、评论、收藏等基础功能,由于时间问题(本人正在备战考研),注册、手机号登录、视频、专辑、歌手等页面功能暂时没空做了,但是实现原理同歌单等已完成的页面,有空的话我会继续完善。

突出功能:监听渲染、歌词滚动、分析主题色、时间格式化等。

技术栈:vue3 + element-plus

  • 另:项目注释非常良心,非常适合小白参考学习!

线上demo

http://47.120.13.198:8088/

由于是免费试用期的服务器,就暂时没有申请域名和ssl证书,ip裸奔了,不要在意2B2722D5

本地项目搭建

  • 本项目后端依赖于这个开源的网易云音乐API接口项目,请自行下载:

NeteaseCloudMusicApi

1. 安装依赖项

npm install

2. 运行项目

npm run serve

部分页面展示

首页

image-20230527203315488

歌单

image-20230527203958832

歌单详情

image-20230527204650469

搜索

image-20230527204949108

抽屉

image-20230527205338286

歌曲详情卡片

image-20230527205509019

个人主页

image-20230527224312850

存在的问题

  1. 发现音乐的个性推荐页的推荐歌单那个小箭头点击跳转歌单页面的功能暂时没写,因为涉及导航栏的渲染问题,设计的有点绕,摆了捏_(:з」∠)_
  2. 精品歌单还可以做细一点,跟随当前分类展示精品歌单图片
  3. 搜索单曲页面的播放效果样式没有做,因为有分页,不能直接简单的操作DOM,也可以做成无限滚动,或者根据索引渲染,但是太麻烦懒的搞了
  4. 在收藏页面和每日推荐页面登录状态下刷新页面,会弹回发现页,原因是刷新时,要重新登录,而在未登录那个瞬间判定为未登录跳转回发现页

注意

  1. 千万不要频繁登录,否则网易云账号会被封禁一天!
  2. URL非/m7和/m8的歌下载不了(这个应该是网易云设计的限制访问)
  3. 单曲循环时,刚播放歌曲时直接拖到尾部或者点击上下一首是不会继续自动播放的,可能是因为网易后端有判断时间戳更新歌曲URL,URL没有更新audio就不会自动播放

deermusic's People

Contributors

xunlu129 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.