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\”>
<script src=\”path/to/ mplayer .min.js\”></script>\”>
< 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
