[个人项目] 使用 Vuejs 完成的音乐播放器

Foreword

虽然音乐播放这类的项目的静态展示居多,业务逻辑并不复杂,但是对于我这种后端出身的前端萌新来说,能使用vuejs完成大部分功能, 也会有许多收获。

api:我使用的是一个开源的 nodejs 封装的网易云音乐 api,名叫NeteaseCloudMusicApi
文档地址
github地址
感谢大佬提供的学习资源.
我的项目地址

Project Preview



Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Technology stack

  1. Vuejs - The Progressive JavaScript Framework
  2. axios - Promise based HTTP client for the browser and node.js
  3. Vuex - Vuex is a state management pattern + library for Vue.js applications.
  4. scss - Syntactically Awesome Style Sheets
  5. flexible - Alibaba Mobile adaptation scheme
  6. px2remLoader - Change ‘px‘ to ‘rem‘
  7. better-scroll - It‘s a plugin which is aimed at solving scrolling circumstances on the mobile side
  8. Vue-Lazyload: Vue module for lazyloading images in applications
  9. iconfont - 阿里巴巴矢量图标库

预计完成的功能

-[x] 首页歌单推荐
-[x] 歌单详情
-[x] 播放器 50%
-[x] 播放暂停
-[x] 播放模式切歌(顺序和随机)
-[ ] 歌词滚动(待修改)
-[ ] 歌曲拖动
-[x] 播放底栏
-[ ] 底栏歌词同步
-[x] 播放列表
-[] 歌曲评论
-[ ] 搜索推荐
-[ ] 搜索分类

原文地址:https://www.cnblogs.com/liuyishi/p/9735498.html

时间: 2024-08-10 06:16:17

[个人项目] 使用 Vuejs 完成的音乐播放器的相关文章

Andriod小项目——在线音乐播放器

Android在线音乐播放器 从大一开始就已经开始自学Java和Android了,到现在差不多有一年了. 终于到了开始做项目实战的阶段了.就先DIY个在线音乐播放器. 实现了以下功能: 这个播放器可以从本机电脑搭建的简易服务器里异步读取并解析json数据,播放音乐,实现音乐切换,时间显示,以及显示播放进度. 程序有三个界面,启动画面,音乐列表,播放器页面,可以通过音乐列表点击进入到播放界面. 这篇文章只大概写了一下实现的思路,描述了一些关键的地方. 文章最后还提供了源代码,可以在文章结尾处  下

swift 音乐播放器项目-《lxy的杰伦情歌》开发实战演练

最近准备将项目转化为OC与swift混合开发,试着写一个swift音乐播放器的demo,体会到了swift相对OC的优势所在,废话不多说,先上效果图: ps:身为杰伦的铁粉,demo的主题必须跟杰伦有关,哈哈!而且自我感觉我有转型UI的天赋,有木有? 一.导入OC文件 创建好swift项目之后,导入OC工具类文件,Xcode会自动生成桥接文件 打开这个文件,在开头导入OC工具类的头文件,就可以调用OC工具类了 // // Use this file to import your target's

HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

团队项目 NABCD分析java音乐播放器

NABCD分析java音乐播放器 程设计题目:java音乐播放器 一.课程设计目的 1.编程设计音乐播放软件,使之实现音乐播放的功能. 2.培养学生用程序解决实际问题的能力和兴趣. 3.加深java中对多媒体编程的应用. 二.课程设计的要求 利用学到的编程知识和编程技巧,要求学生: 1.系统设计要能完成题目所要求的功能,设计的软件可以进行简单的播放及其他基本功能. 2.编程简练,可用,尽可能的使系统的功能更加完善和全面 3.说明书.流程图要清楚. 三.课程设计内容 1.课程设计的题目及简介 音乐

MPlayer音乐播放器项目讲解

一.简要介绍MPlyer音乐播放器 MPlayer是一款开源多媒体播放器,以GNU通用公共许可证发布.此款软件可在各主流操作系统使用,例如Linux和其他类Unix系统.Windows及Mac OS X系统. 二.在开发板实现MPlayer功能 具体如何实现mute 0 静音,为什么用这个命令不用我们做,我们要做的是在开发板上获取出界面后,按下相应按钮实现相应的功能,即对这个命令的处理和调用. 三.思路 1.画glade界面 2.主函数分为父.子进程 父进程:开启mplayer,用到execlp

手把手教你做音乐播放器(八)桌面小工具(上)

第8节 桌面小工具 桌面小工具是可以放置在主界面的.快速控制应用的小助手.例如我们的音乐小工具,它可以帮助用户在桌面上就完成音乐的暂停.播放.切换等操作,而不需要启动应用本身. 在安卓系统中,我们也常常叫它App widget. 实现一个App widget要经过以下几个步骤, 创建一个App widget类,让它继承自AppWidgetProvider,例如AnddleMusicAppWidget类: 放在res\layout目录下,为App widget的界面定义一个布局,例如anddle_

Xamarin.Android开发音乐播放器

最近.Net开源着实让C#火了一把,好久就听说Mono for Android一直没静下心来看,上周末找来看看,确实不错,前台界面axml编写跟Java安卓开发毫无区别,后台用C#其实很多windows下的方法都可以用,做一个安卓音乐播放器,主要实现音乐播放,上一曲下一曲,音乐播放列表,随机播放,扫描SD卡内所有音乐. 先show一组界面啊,话说有图有真相啊: 项目结构如图: Lrc是歌词处理方法 MusicService是安卓服务播放音乐,服务Broadcast,以及界面接收Receiver

iOS开发拓展篇—音频处理(音乐播放器2)

iOS开发拓展篇—音频处理(音乐播放器2) 说明:该文主要介绍音乐播放界面的搭建. 一.跳转 1.跳转到音乐播放界面的方法选择 (1)使用模态跳转(又分为手动的和自动的) (2)使用xib并设置跳转 2.两种方法的分析 可以使用模态的方法,添加一个控制器,让这个控制器和音乐播放控制器类进行关联,脱线,设置标识符且在cell的点击事件中执行segue即可. 步骤说明: (1)在storyboard中新拖入一个控制器,然后设置和playing控制器类相关联. (2)设置手动跳转 (3)设置segue

Qt版音乐播放器

    Qt版音乐播放器 转载请标明出处:牟尼的专栏 http://blog.csdn.net/u012027907 一.关于Qt 1.1 什么是Qt Qt是一个跨平台应用程序和UI开发框架.使用Qt只需一次性开发应用程序,无需重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序. Qt Creator是全新的跨平台Qt IDE,可单独使用,也可与Qt库和开发工具组成一套完整的SDK,其中包括:高级C++代码编辑器,项目和集成管理工具,集成的上下文相关的帮助系统,图形化调试器,代码管理