高山流水

凡哥 · 发表于 2024-12-9 12:18

凡哥 · 发表于 2024-12-9 12:19

帖子代码

<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>

凡哥 · 发表于 2024-12-9 12:21

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>