HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器
前言
没有使用任何框架,只是想用最简单纯js的代码实现下
- 前台: Javascript+jQuery
- 后台: php/nodejs(php是参考网上的例子写的,nodejs代码是在php的基础上重新写的)
- 还有她的姊妹篇(网易云音乐移动端),请查看这里 github.com/Yangfan2016…
写在前头的话
鄙人野生前端一只,gis专业,自学前端已经一年多了,为什么要写个音乐播放器呢?原因有两个:
- 本人是网易云音乐的重度用户,近乎疯狂
- 自学了前端这么久了,也是想检验下自己的成果吧
本播放器要干什么呢
- 简单的 播放 暂停 那当然不能少
- 切换歌曲,上一首 、 下一首 也得有
- 进度条 ,这个有点复杂,本来想用 input[range] 写,但是样式不好改,自己用多个div代替吧
- 进度条都有了,音量调节 不能少吧,毕竟他俩UI样式差不多,照猫画虎呗
- 再加一个 静音功能 ,省的音乐太大声,邻居找茬哦(⊙o⊙)
本播放器还能干什么呢
- 歌词滚动 有木有
- 搜索单曲
- 指定歌单播放 这个需要知道歌单的 id 不是很好找,(得上网易云音乐官网登录自己的账号,找到歌单,点进去,抬头看URL 里最后的 id 参数)暂时用的是“我喜欢的音乐”(歌单)的id
那闲话不多说,开整吧(原谅一个理科生的表达能力)
我模仿的是网易云音乐的PC端,所用到的技术都是前端的基本技术 HTML、CSS、JAVASCRIPT
由于我是自学的,没有那么多规矩,我这个人看到是我感兴趣的,我立马就会去做,这个播放器也不例外。
首先先的将它“画”出来(HTML+CSS)
我仔细看了下网易云音乐PC端的布局,大致分为四部分,四个模块
- 顶部菜单(顶部导航,叫什么名无所谓了)
- 底部播放条 这是播放器的核心
- 主体内容在右边 歌单的详细信息和歌曲列表
- 左侧是导航和歌单组
- 左下角还有一个小窗,显示正在播放歌曲的简要信息,点击小窗 展开一个歌曲详情页
无图不真相
然后呢,写页面逻辑JavaScript
播放器
- 播放器的控制按钮 播放(暂停)按钮,这个可以通过
play()
和pause()
方法实现 - 进度条 这个通过监听
timeupdate
事件,实施更新当前播放位置, 通过监听鼠标移动事件,改变进度条的长度 - 静音按钮,可以通过
audio.muted=true
实现
初始化歌单列表
网易云音乐获取歌单的API music.163.com/api/playlis…
id 歌单id
复制代码
因为涉及到跨域问题。暂时我前台这边又没有办法跨域,所以参考了网上的代码,写个PHP做代理 (2018-09-14更新:现在代码已改为Nodejs做代理服务),这样就不存在跨域问题了。 获取到歌单数据后,重新渲染下DOM
搜索歌曲
网易云音乐获取歌曲的API
s.music.163.com/search/get?…
s 搜索内容
type 搜索类型
limit 搜索返回结果数
复制代码
歌曲详情页
主要是歌词和歌词滚动
网易云音乐获取歌词API
music.163.com/api/song/ly…
id 歌曲id
复制代码
歌词滚动,先把获取到的歌词数据分割成时间点和歌词两部分,将这两部分存入dataset中, 通过监听timeupdate事件,判断和当前播放时间相近的歌词,记录它的getBoundingClient()的top值,将滚动条设置到指定位置 例如:ele.srcollTop=100;
先写到这里吧
总结能力太差了,原谅理科生的无奈
附录
完整源码,点击查看
后台代码,点击查看
此文源自我的博客
大佬,给个start呗^_^
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器相关推荐
- HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 前言 没有使用任何框架,只是想用最简单纯js的代码实现下 前台: Javascript+jQuery 后台: php/nodej ...
- YesPlayMusic:一个高颜值多音频资源的网易云音乐播放器
都2023年了还有人不知道这款开源免费下载的多音频,高颜值的音乐播放器吗(文末有下载地址) 首先我们来看一下YesPlayMusic的特性 和网易云音乐播放器的功能大同小异,少了歌曲评论的功能,这个功 ...
- HTML网页调用 网易云 音乐播放器代码
表现形式一:单曲播放 调用代码: <iframe frameborder="no" border="0" marginwidth="0" ...
- 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
目录 一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架 二.开发工具与项目创建 1.开发工具 2.项目创 ...
- uniapp 仿网易云音乐播放器 微信小程序
效果视频: uniapp 仿照网易云播放器功能 效果截图: 上代码: <template><view class=""><scroll-view :s ...
- 静态博客网页中的网易云音乐播放器
见我的博客 https://blog.wyue.site/2020/04/12/1/ 转载前请联系我,联系方式请见我博客 https://blog.wyue.site/ 一直想做个博客中的音乐播放器, ...
- Vue仿网易云音乐播放器(一)
项目简介 写了很多关于Vue的项目,都是一部分一部分的小模块,这次想把全部学过的关于Vue知识和模块写成一个完整的项目.都是组件化进行mvvm模式开发,实现了view和data的同步更新.仿网易云播放 ...
- Vue仿网易云音乐播放器(二)
项目运行 首先要安装npm或者cnpm和node.js环境 在终端建立vue-cli项目,命令行cnpm install vue-cli -g //全局安装 vue-cli 查看vue-cli是否成功 ...
- 使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果,最终的效果如下 界面布局 图片也是实现滚动效果的,使用四个div,来标识每一帧波动的效果. <div class="container- ...
- Android仿网易云音乐播放页面 背景虚化碟片效果
1.效果图 仿网易云音乐播放页面,主要有4个关键点: 背景虚化.获取音乐的专辑封面,将此图片作为背景图,并进行模糊虚化处理 碟片合成.获取音乐的专辑封面,和黑色碟片图片进行合成 碟片旋转.音乐播放时, ...
最新文章
- linux 格式化未分配区间,Linux 格式化分区 报错Could not stat --- No such file or directory 和 partprobe 命令...
- for in 和 for of 的区别
- 实现iframe_单点登录的三种实现方式,你会几种?
- 前端学习(1299):gulp插件
- 存储类、链接、内存管理
- fetch与axios
- Linux学习笔记(8)文件搜索与帮助(find)
- sas9.4安装教程
- ENVI4.8下载与安装
- 一个月转推荐:LR算法原理
- 免驱 usb有线网卡_2020年末台式机amp;笔记本无线网卡最全选购指南amp;攻略,打造极致WIFI体验!...
- 高性能密码适用性分析
- 她力量系列四丨读博6年两次换导师,靠一点点“倔”,俞舟成为social chatbot的开拓者之一
- 对立志成为DBA的人的几点建议
- java的多态是什么意思_【Java】基础18:什么叫多态?
- wpa_supplicant-2.6 君正平台(Zeratul )编译 支持WPS功能
- 计算机输入开机密码无法进入,电脑开机无法输入密码怎么办
- 2020年轻人保健品消费报告
- 【Python学习】transpose函数
- 思科证书申请 CCNA CCNP CCIE
热门文章
- 海量数据搜索——搜索引擎
- c语言怎么添加按钮,关于用C语言制作按钮的问题
- 使用ExtendSim进行水管理、可持续性和环境仿真建模
- 【原创】ES5高效封装WIN10系统教程2020系列(一)母盘定制
- PDF转图片 Ghostscript.NET
- docker本地仓库(本地镜像仓库)环境搭建
- 计算机cpu近几年价格,2014年6月15日电脑CPU最新报价(表格)
- [乱七八糟]《进化论——人类科学史上最大的谎言》
- 《组合数学全家桶》(ACM / OI 全网最全,清晰易懂)
- matlab实现振动弹簧的实时动画,仿真动画软件设计作品--理想弹簧振子简谐振动...