原生js制造一个h5音乐播放器


原生代码:https://github.com/helloCaijiaqi/music_player_js/tree/master/music_player_js

vuejs封装的播放器组件:

https://github.com/helloCaijiaqi/music_player_vuejs

vue组件有用到axios,需要自行定义一个简单的后端api

自身用的是nodejs(具体使用:页面最底)


原生js h5音乐播放器

文件结构:

image

页面效果:(图片资源来源:网易云音乐)

image

html

image

css

image

image

image

image

image

image

image

js

音乐资源的整理

image

点击组件右侧按钮实现滑动隐藏和显示

image

鼠标移入移出的图片切换

image

播放按钮功能

image

//切换歌曲,且加载音乐资源

image

image

image

进度条功能

image

image

留声机图片的旋转动画

image

功能函数

image

image

//声音的调节

image

image

image

//播放模式的切换

image

image

nodejs定义一个简单music_api

app.js 应用级

每个路径访问前都进行跨域处理  nodejs port:3000  \  vue-cli3 port:8080

image

image

music.js 路由级

image

musiclist.js json资源

image

音乐资源通过静态服务挂载在 http://localhost:3000/music 中

文件结构,这里用(express应用生成器)构建的项目

image


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM