烟雨

凡哥

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.css';
	#tz { margin: 30px 0 30px calc(50% - 641px); width: 1280px; height: 731px; background: url('https://638183.freep.cn/638183/t24/5/yjyu.jpg') no-repeat center/cover; }
	#mplayer { --tx: 0; --ppNum: 35; --ppBg: null; --ppLen: 3px; --ppCap: #ddd; --prog: red; --track: silver; bottom: 80px; color: lightgreen; }
	#fsbtn { bottom: 20px; color: white; border-color: white; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1837799288"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/19/09/58/29/video6699c8452db90.mp4" autoplay loop muted></video>
	<!--div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.js';
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	hcplay(tz);
	fscreen.fs(tz, fsbtn);
</script>

凡哥

圆环频谱播放器重新封装成ES6模块，模块的设置主要基于频谱样式、进度条颜色、文本前景色等少量几个方面，在帖子前台css代码的 #mplayer 选择器中完成：


#mplayer {
    --tx: 0; /* 正频谱或斜频谱设置，0 为斜频谱，1 为正频谱 */
    --ppNum: 25; /* 频谱条数（缺省30） */
    --ppBg: null; /* 频谱颜色，null 或缺省变量表示使用随机色 */
    --ppLen: 3px; /* 频谱宽度（缺省4px） */
    --ppCap: #ddd; /* 频谱帽颜色（该颜色将参与到频谱渐变色中缺省white）*/
    --prog: purple; /* 进度之色颜色（缺省red） */
    --track: silver; /* 进度条底色（缺省silver） */
     bottom: 80px; /* 定位，也可以使用top属性 */
    color: lightgreen; /* 前景色即文本颜色（缺省未设置，默认黑色） */
}

带 -- 的为CSS变量，都可以缺省，即不要。缺省时将使用模块的默认配置。其他的css设置，比如帖子父元素继续使用 class="pa"、video class="vid" 等对应类选择器以应用引入的CSS资源文档的相关设置，详情与之前的模块大同小异。

清梦

欣赏凡哥老师带来的精美作品！

清梦

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

清梦

祝凡哥老师周末快乐，创作愉快！

花简静

老师今天封了一下圆环频谱播放器，这个有正频谱和斜频谱两种的。。记得上次可以整个水滴状的小尾巴，十分漂亮。。

花简静

这个视频大气震憾，非常惊艳，特别是全屏，有点黄河之水天上来的意味。。。创意很绝。。

花简静

凡哥 发表于 2024-12-7 08:14
圆环频谱播放器重新封装成ES6模块，模块的设置主要基于频谱样式、进度条颜色、文本前景色等少量几个方面， ...

这里一下子有两种频谱效果，正的和斜的都封在一个包里的，真是让使用者怎么方便怎么来。。
条数颜色，宽度帽色，这些都可以自己设置。。
老师设想的非常仔细且周到。。

扬帆

惊艳！谢谢凡哥老师精彩分享！