mplayer插件配置及使用说明
mplayer是一个Web音频播放器插件，使用audio控件播放音频，支持多曲随机循环、单曲循环播放，支持添加本地音频资源。下面是相关说明。
一、引用与配置
<script>
/* 引用插件 */
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/mplayer.js';
document.body.appendChild(sf);
/* 配置插件 */
sf.onload = () => {
HCPlayer({
papa: '#papa', /* 配置帖子id选择器，支持class选择器（'.papa'）*/
musics: music_ar, /* 歌词数组 : 在配置代码之外声明并使用该变量名赋值 */
title: '湖光山色', /* 设置集子名称 */
/* 播放器CSS设置 */
player_css: `
left: 10px; /* 支持right定位 */
bottom: 10px; /* 支持top定位 */
background: none; /* 播放器背景 : 支持颜色、渐变和图片背景 */
border: thick double lightgreen; /* 播放器边框 */
color: white; /* 播放器前景色 */
--ww: 300px; /* 播放器宽度 ≥ 300px */
--hh: 140px; /* 播放器高度 建议≥ 140px */
--track: green; /* 进度条底轨色 */
--prog: lightgreen; /* 进度条覆盖色 */
`,
/* 全屏按钮CSS设置 : 定位和背景色、前景色 */
fs_css: 'left: 20px; top: 20px; --bg: green; --color: white;',
});
};
/* 声明歌曲数组 */
var music_ar = [
['音频地址1','歌名1'],
['音频地址2','歌名2'],
['音频地址3','歌名3'],
['音频地址N','歌名N'],
];
</script>
需要注意的是，如果播放器背景设置为 none 即无背景，则应设置粗一点、醒目一些的边框。
二、相关说明
（一）最简单的配置：部分参数使用插件设置值
/* 简单配置插件 */
sf.onload = () => {
HCPlayer({
papa: '#papa',
musics: music_ar,
title: '湖光山色',
player_css: 'bottom: 10px; background: none;',
fs_css: 'left: 20px; top: 20px;',
});
};
（二）欣赏音乐时切换歌曲
两种方式可以切换歌曲，一是点击播放器相关按钮，二是在歌单中选点歌名。歌单呼出入口：鼠标指针移至播放器右上角图标“三”。
（三）欣赏音乐时切换循环方式
mplayer提供两种循环模式：随机循环（默认）和单曲循环，通过循环按钮操作，按钮即按钮title会有相关状态说明。
（四）欣赏音乐时添加本地音乐
点播放器左上角的Logo区域，播放器会弹出打开本地音频文件的窗口，支持单选、多选，选好歌曲后确定，播放器立马播放新添加的歌曲，并将歌曲添加到歌单的最后。
三、可能存在的问题及处理建议
（一）播放器中间的歌名游走异常：一般表现为刚打开页面时移出播放器边界。这是网络原因可能引发的现象，点一下暂停按钮，再点一下播放按钮即可正常。
（二）按钮排列分行：可能是资源下载偏慢引起的现象，刷新一下页面或可解决问题；或是播放器宽度设置过小，页面制作者应保证播放器的宽度不应低于300px。
（三）点击进度条无法调节进度：可能的原因是歌曲所在服务器带宽偏小、音乐资源下载不畅，只要音乐资源能正常下载应该没有此种现象发生。若点击进度条后播放器无响应，可以切换另一首歌，播放器会进入正常使用状态。
四、插件下载
插件分为JS文档和CSS文档两个，下载后不论在本地使用还是上传到自己的空间使用，均应修改JS文档的如下语句，以便JS能正确地引用CSS文档：
<style>@import "https://638183.freep.cn/638183/web/css/mplayer.css";</style>
注意：文档的存档编码必须为 UTF-8无签名（No BOM）！
两个文档的地址均在代码中提供了，不再给出下载链接。
未尽事宜敬请讨论。
前一篇: 原生lrc歌词同步之自由路径进度条播放器
下一篇: 原生lrc歌词同步之无播放器版本
评论列表 [3条]
#3 | 悄然 于 2024-9-4 19:43 发布: 首页上播放器列表在小播外面，且能控制点击播放~~而且歌曲不止十四首，每次点击进来歌曲还都不一样。。这样随机歌曲加对应点播的设置，也是太绝了。。
#2 | 飞飞 于 2024-9-2 21:39 发布: 这个播放器放首页上了。。还换了一批这么好听的歌。。。字体色彩也有变化，歌名也诗意。。白老师的网站更迷人了。
#1 | 飞飞 于 2024-9-1 13:30 发布: musics: music_ar, 这句代码只在专辑里出现了。。还可以支持播放本地歌曲，点了一个LOGO果然到电脑选音乐的地方。。这个功能厉害。。先进。优秀。。还有各种常见问题的处理。太详细了。。。面面俱到
