mplayer
项目信息
网络的HTML音乐播放器。重建以成为模块化并能够轻松地与不同的项目进口。
使用的技术
| 技术 | 描述 | 关联 |
|---|---|---|
| HTML5 | 超文本标记语言 | ----- |
| CSS3 | 级联风格的表 | ----- |
| JavaScript | 高级，动态，解释的语言 | ----- |
| Sass | 句法上很棒的样式表 | https://sas*s-l*a*ng.com/ |
| 别贝 | JavaScript编译器 | https://babelj*s*.io*/ |
| webpack | JavaScript模块Bundler | https://webpack.**j*s.org/ |
| 浏览器同步 | 同步浏览器测试 | https://www.browsers**yn*c.io/ |
| nodejs | 开源，JavaScript运行时间环境，执行服务器端的JavaScript代码 | https://nodejs***.org/en/ |
开发设置过程
npm install
npm run dev - Run webpack in development mode
npm run build - Run webpack in production mode设置 /用法
使用导入或需要
mplayer .min.js';
// Using Require
const mplayer = require('path/to/ mplayer .min.js');">
// Using Import import mplayer from 'path/to/ mplayer .min.js' ; // Using Require const mplayer = require ( 'path/to/ mplayer .min.js' ) ;
使用链接和脚本标签
mplayer.min.css">
">
< link rel = "stylesheet" href = "path/to/ mplayer .min.css" > < script src = "path/to/ mplayer .min.js" > script >
初始化音乐播放器
mplayer (options);">
const mplayer = new mplayer ( options ) ;
选项对象格式示例
mplayer({
songList: [{}],
container: document.getElementById('mp'),
fixed: false,
theme: false,
position: false,
hideCoverArt: false,
mini: false,
volume: 0.5,
});">
new mplayer ( { songList : [ { } ] , container : document . getElementById ( 'mp' ) , fixed : false , theme : false , position : false , hideCoverArt : false , mini : false , volume : 0.5 , } ) ;
歌曲列表对象格式
songList = {
name : 'songName' ,
artist : 'songArtist' ,
cover : 'songCover' ,
url : 'songPath' ,
} ;选项 /属性
| 选项名称 | 描述 | 默认 | 必需的 |
|---|---|---|---|
| 主题 | 选择指定的主题 | 错误的 | 不 |
| 小型的 | 删除显示播放列表并缩小玩家 | 错误的 | 不 |
| 固定的 | 使其成为固定的音乐播放器（需要启用迷你播放器才能正常工作） | 错误的 | 不 |
| 位置 | 如果播放器为Mini和修复（'top_left'，'top_right'，'bottom_left'，'bottom_right'），请选择一个位置 | false &&中心 | 不 |
| 容器 | 玩家的元素容器 | - | 是的 |
| HideCoverart | 禁用封面艺术，无法在玩家中展示 | 错误的 | 不 |
| 体积 | 设置播放器的音量（值在0-1之间） | 0.5 | 不 |
| 歌曲列表 | 歌曲对象数组 | - | 是的 |
可用的主题
By Default: 'mp'
Black & Red : 'mp--black-red'
Materialistic: 'mp--materialistic'
Light Theme: 'mp--light'自定义主题开发
mplayer({
theme: 'custom_theme--name'
});
Create your own theme file under 'scss/themes' folder: ie. '_custom-theme.scss'
## Look at the theme layout file for references ##
Build the project using "npm run build" after SCSS editing is complete
Import into main.scss: @import 'themes/custom-theme.scss'">
In the options pass in your own custom theme name : new mplayer ( { theme : 'custom_theme--name' } ) ; Create your own theme file under 'scss/themes' folder: ie . '_custom-theme.scss' ## Look at the theme layout file for references ## Build the project using "npm run build" after SCSS editing is complete Import into main . scss : @ import 'themes/custom-theme.scss'
附加 /警告
- 歌曲名称必须是唯一的
常见问题 /联系人
- 随时提交拉的请求和问题！一直在寻找改进和修复
- 电子邮件：lu-vuongle@hotmail.com
下载源码
通过命令行克隆项目:
git clone https://github.com/luvuong-le/mplayer.git