vue自定义音乐播放器_具有vue的自适应音乐播放器

vue自定义音乐播放器

东南音乐 (neteast-music-vue)

A mobile first, handwritten, responsive web app for music fans.

面向音乐迷的移动优先，手写响应式网络应用程序。

View Demo 查看演示 Download Source 下载源

It is a mobile first responsive web app for listening music from Neteast cloud platform which is using a open source API: https://github.com/Binaryify/NeteaseCloudMusicApi

它是一个移动优先响应型Web应用程序，用于从Neteast云平台使用开放源API收听音乐： https : //github.com/Binaryify/NeteaseCloudMusicApi

The stack is based on Vue, VueX, VueRouter, Vuetify, Axios, PWA, SCSS, Jest, Nightwatch, Eslint, Babel and others.

该堆栈基于Vue，VueX，VueRouter，Vuetify，Axios，PWA，SCSS，Jest，Nightwatch，Eslint，Babel等。

Backend

后端

• [x] compressed api by g-zip

  [x]通过g-zip压缩的api

• [x] proxy settings

  [x]代理设置

Frontend

前端

• [ ] maybe net-east account?

  []净东帐户？

• [ ] maybe login?

  []也许登录？

• [ ] add full PWA support?

  []添加完整的PWA支持吗？

• [ ] Progressive Loading? different layout or resources based on device types and network speed

  []逐步加载？ 基于设备类型和网络速度的不同布局或资源

• [ ] download music function

  【下载音乐功能】

• [ ] redo player animation and transaction

  []重做播放器动画和事务

• [ ] UX/UI logic refactor

  [] UX / UI逻辑重构

• [ ] add Skeleton loaders

  []添加骨架装载机

• [ ] Lyric sync

  []歌词同步

• [ ] player loop/random function

  []播放器循环/随机功能

• [ ] Home page desktop view add playlist, player, and lyric page

  []主页桌面视图添加播放列表，播放器和歌词页面

• [ ] Home page restructure for desktop view

  []桌面视图的主页重组

• [x] theme and color settings

  [x]主题和颜色设置

• [x] setting page

  [x]设定页面

• [x] album page

  [x]相簿页面

• [x] artist page

  [x]艺术家页面

• [x] large image adaptive loading

  [x]大图像自适应加载

• [x] music progress slider click and jump to time function

  [x]音乐进度滑块单击并跳至时间功能

• [x] Lyric display

  [x]歌词展示

• [x] fix Chrome security policy don't allow instantiate AudioContext before load audio source

  [x]修复了Chrome安全策略，不允许在加载音频源之前实例化AudioContext

• [x] fix music url request 403 error (by adding referrer head into index page)

  [x]修复了音乐网址请求403错误(通过将引荐来源网址添加到索引页面)

• [x] reduce the bundle size and loading size(to homepage 440k total)

  [x]减少分发包的大小和加载大小(到首页总共440k)

• [x] material icon tree-shaking (Reduce 300K after build the bundle)

  [x]材质图标摇树(在生成捆绑包后减少300K)

• [x] message tab with styled component and function

  [x]消息选项卡，具有样式化的组件和功能

• [x] click and play music without wipeout playlist

  [x]单击并播放音乐，而没有擦除播放列表

• [x] audio analyser and synchronizer effect by web api and drawing on canvas

  [x]音频分析器和同步器效果，通过网络api和在画布上绘制

• [x] playlist tab in player

  [x]播放器中的播放列表标签

• [x] player tabs and sections

  [x]播放器标签和版块

• [x] music wave effect (removed)

  [x]音乐波效果(已删除)

• [x] player buttons

  [x]个播放器按钮

• [x] slider for volume control

  [x]滑块，用于音量控制

• [x] slider for audio progress

  [x]滑块，显示音频进度

• [x] full screen player mode

  [x]全屏播放器模式

• [x] animated transition

  [x]动画过渡

• [x] hot music page Tabs and sections

  [x]热门音乐页面选项卡和部分

• [x] theme switch (dark and light)

  [x]主题开关(暗和亮)

• [x] pagination for all list

  [x]所有列表的分页

• [x] add to playlist function

  [x]添加到播放列表功能

• [x] play all music in list function

  [x]播放列表中的所有音乐

• [x] responsive design implement

  [x]响应式设计工具

• [x] search

  [x]搜索

• [x] navigation drawer

  [x]导航抽屉

• [x] hot music page

  [x]热门音乐页面

• [x] player controller

  [x]播放器控制器

• [x] state management init

  [x]状态管理初始化

• [x] utils and apis

  [x]实用程序和API

• [x] hot playlists page

  [x]热门播放列表页面

需要一个env文件来启动此应用 (need a env file to start this app)

.env
VUE_APP_baseURL=Your URL

项目设置 (Project setup)

npm install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

npm run serve

编译并最小化生产 (Compiles and minifies for production)

npm run build

运行单元测试 (Run your unit tests)

npm run test:unit

运行端到端测试 (Run your end-to-end tests)

npm run test:e2e

整理和修复文件 (Lints and fixes files)

npm run lint

翻译自: https://vuejsexamples.com/a-responsive-music-player-with-vue/

vue自定义音乐播放器