Code Monkey home page Code Monkey logo

reactmusic-ts's Introduction

技术栈

  • Rreact 18 + Type script 4.x 实现音乐网页

实现功能

  • 推荐、排行榜、歌单、主播电台、歌手和新碟上架等页面获取并展示数据;
  • 榜单内歌曲可添加到播放列表,并播放歌曲;
  • 可查看列表歌曲、当前播放歌曲的歌词;
  • 可切换播放列表歌曲,并支持顺序、单曲、乱序播放;
  • 主播电台、歌手等页面将参数绑定至 URL,可通过 URL 直接打开对应页面的详情数据。

待实现功能

  • 歌曲搜索功能;
  • 歌单的添加和播放列表的整体替换;
  • 歌曲详情页与URL地址栏的联动问题;
  • more ...

相关图片

首页轮播图:

image-20230523143145767

歌曲详情、歌词内容滚动:

image-20230523143313514

排行榜:

image-20230523143228614

热门新碟:

image-20230523143351867

榜单:

image-20230523143421186

6

reactmusic-ts's People

Contributors

moxynj avatar

Watchers

 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.