未来的底片二（测试新开发canvas播放器）

马黑黑 · 发表于 2024-5-17 12:32

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

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

x

本帖最后由马黑黑于 2024-5-17 12:36 编辑

马黑黑 · 发表于 2024-5-17 12:33

本帖最后由马黑黑于 2024-5-18 19:32 编辑

代码

<style>

#mydiv { margin: 20px 0 20px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/2/wlddp.jpg') no-repeat center/cover; overflow: hidden; border: 1px solid gray; position: relative; }

#player { position: absolute; bottom: 0; }

#lrc { position: absolute; top: 20px; }

li-zi { position: absolute; width: 20px; height: 20px; background: purple; }

@keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: 1; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }

</style>

</div>

var sF = document.createElement('script');

sF.charset = 'utf-8';

sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_player.js';

document.body.appendChild(sF);

//html粒子

var all = 120;

for(var i = 0; i < all; i++) {

var lz = document.createElement('li-zi');

var hudu = Math.PI / 180 * 360 / all * i;

var xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);

var size = Math.random() * 15 + 5;

lz.style.cssText += `

--x0: ${xx}px;

--y0: ${yy}px;

width: ${size}px;

height: ${size}px;

animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);

`;

mydiv.prepend(lz);

}

//播放器配置 track - 进度条底色; prog - 进度条、滑块、文本颜色; lrc1、lrc2 - 歌词渐变色

var colors = {track: 'pink', prog: 'white', lrc1: 'snow', lrc2: 'darkred'};

//歌词 lrcAr 名称唯一

var lrcAr = [ [2.00,"刀郎 - 未来的底片",6], [8.42,"……",2.4], [225.79,"在止于黑的拂晓",3] ];

</script>

马黑黑 · 发表于 2024-5-17 12:33

本帖最后由马黑黑于 2024-5-17 21:48 编辑

这个canvas画布播放器分两个独立的部分：

一是带进度条的播放控制器。canvas 要求 id="player"，在帖子中的定位使用CSS设置（代码第 3 行），宽高尺寸在HTML中设置（代码 12 行），主要设置宽度，可以根据需要设置，注意不要太短否则里面的元素会重叠。

二是歌词UI。定位于宽高设置原理和方法同上，应根据歌词文本的最大长度设置 id="lrc" 的canvas画布的宽度（代码第 13 行）。

这两个画布标签的 id 不能更改。

关于元素的 id，audio 标签的 id 约定为 id="aud"，这是播放器实现功能的重要依赖。

如果帖子有视频且需要播放器顺带同步管理视频的播放暂停，则要求视频的 class="vid"，酱紫就可以了。

帖子容器id不论，也无需提供。

播放器的配置：

两个变量——

（一）colors : 代码在第 38 行，主要配置颜色，详情看对应的代码注释；
（二）lrcAr : 代码在第 40 行，给播放器提供 lrc 歌词，支持的歌词格式是花潮lrc歌词格式。

播放器的两个配置可以缺省，这意味着使用默认的颜色配置、无歌词同步但有免费广告。

其他：

发纯音乐帖也可以使用这个准插件。lrcAr 配置建议如下：

var lrcAr = [ [10, "帖子标题", 1], [20, "", 1] ];

这将在lrc UI区域显示一下帖子的标题，然后就没有文字，直至重新播放音频。