高山流水

马黑黑 · 发表于 2024-12-9 12:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-12-9 12:09

本帖最后由马黑黑于 2024-12-9 12:19 编辑

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mplayer.css';
	#pa { margin: 30px 0 30px calc(50% - 593px); 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:14

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>

马黑黑 · 发表于 2024-12-9 12:15

mplayer 模块还支持 LRC 歌词同步，使用方法请参照其他相应模块的说明。

花飞飞 · 发表于 2024-12-9 19:02

马黑黑发表于 2024-12-9 12:15
mplayer 模块还支持 LRC 歌词同步，使用方法请参照其他相应模块的说明。

看了css里面有歌词的封装，略改一下就可以hcplay(pa, geci);

花飞飞 · 发表于 2024-12-9 19:05

画面山清水秀，视频光粒子飞舞，这回另外给了个滤镜效果，封包的里面是没有的吧。。

封装视频是中空的，如果要用熊猫的，那需要重新设置。

花飞飞 · 发表于 2024-12-9 19:10

小播背景给了0.25的透明度，还有有丢丢颜色的，这比纯透明的更合适更好看。。昨天我自己试了一个纯透明和换图片背景的。。很妙。。。

小播看似简单，功能强大。除了控制音乐频谱进度还与贴子中所有的动态关联可一并控制。。
音乐歌名可自行更改，这曲真是好听。。赞一个

花飞飞 · 发表于 2024-12-9 19:13

不要在帖子HTML代码中加入 <div id="mplayer">...</div> 之类的代码，否则模块将不能正常工作。
留意到了最近的贴子里都没有，还纳闷了一下，现在看到说明了。。

如果要加歌词，需得加入<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>的吧。