高山流水

凡哥

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mplayer.css';
	#pa { margin: 30px 0 30px calc(50% - 603px); background: url('https://638183.freep.cn/638183/t24/5/gulu.jpg') no-repeat center/cover; }
	#mplayer { width: 280px; height: 140px; left: 20px; bottom: 20px; background: rgba(0,128,0,.25); filter: blur(.5px); }
	.vid { mix-blend-mode: screen; }
</style>

<div id="pa" class="pa" data-title="常静-高山流水">
	<audio src="https://music.163.com/song/media/outer/url?id=5252656"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/02/20/43/14/video636265e2772ed.mp4" autoplay loop muted></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mplayer.js';
	hcplay(pa);
</script>

凡哥

mplayer 是个简易的单曲播放器，里面有歌曲名称、播放进度、频谱等信息显示，同时音频控制交互是不可或缺的，并集成了音频与CSS动画、svg动画、video视频的同步联动管理机制。

mplayer 的CSS选择器为 #mplayer，使用者可以在帖子前台CSS代码设置必要的个性化设置。mplayer模块的相关默认设置描述如下：

频谱 ：浅蓝 + 雪白
按钮 ：绿蓝（青）
进度条 ：绿蓝（青）+ 银色
文本颜色 ：雪白

可以在帖子前台CSS代码中简单设置相关属性和变量：

#mplayer {
    --prog: cyan; /* 进度条指示颜色 */
    --track: silver;  /* 进度条底色 */
    --ppcolor1: snow; /* 频谱颜色一（上下两头的颜色） */
    --ppcolor2: lightblue;  /* 频谱颜色二（中间的颜色） */
    /* 其他代码如 left、top、width、height等 */
}

#mplayer 默认尺寸 ：300*160，可改，建议高度在140-200之间

【注意】id="mplayer" 的 div 标签由 mplayer 模块自行追加，不要在帖子HTML代码中加入 <div id="mplayer">...</div> 之类的代码，否则模块将不能正常工作。

歌曲或帖子名称请在帖子容器元素加入 data-title 属性表示，例如：

<div id="tz" class="pa" data-title="卷珠帘-古筝">
        <!--这里是帖子内容代码 -->
</div>

花简静

这个打包之后的小播代码少少的，涵盖的内容很多，除了控制音乐，进度条和频谱之外，贴子内所有 动态可以一并控制。

花简静

小播背景是透明的，可以自设与贴子类似的颜色，加上透明度之后看上去更协调一些。。

花简静

这个可以使用之前模块的方法加上歌词。。根据贴子需要来定吧

雨声

欣赏凡凡老师的精彩作品。。。

雨声

好听的歌好看的画面，谢谢凡凡老师精彩分享，周一快乐。。。

柒玥

凡哥老师的作品代码中的天花板！

柒玥

问好凡哥老师感谢你的精彩！