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

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

本帖最后由马黑黑于 2024-5-17 12:36 编辑 <style>
#mydiv { margin: -60px 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; z-index: 1; 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 id="mydiv">
<audio id="aud" src="https://file.uhsea.com/2405/97ee0ea9b4ad516c0d84543c7dacf3eeFV.mp3" autoplay loop></audio>
<canvas id="player" width="460" height="80"></canvas>
<canvas id="lrc" width="800" height="50"></canvas>
</div>

<script>
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);
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);
}
var colors = {track: 'pink', prog: 'white', lrc1: 'snow', lrc2: 'darkred'};
var lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
</script>

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

本帖最后由马黑黑于 2024-5-18 19:32 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2"> #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; }</cl-cd>
<cl-cd data-idx="3"> #player { position: absolute; bottom: 0; }</cl-cd>
<cl-cd data-idx="4"> #lrc { position: absolute; top: 20px; }</cl-cd>
<cl-cd data-idx="5"> li-zi { position: absolute; width: 20px; height: 20px; background: purple; }</cl-cd>
<cl-cd data-idx="6"> @keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: 1; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }</cl-cd>
<cl-cd data-idx="7"></style></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><div id="mydiv"></cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"> <audio id="aud" src="https://file.uhsea.com/2405/97ee0ea9b4ad516c0d84543c7dacf3eeFV.mp3" autoplay loop></audio></cl-cd>
<cl-cd data-idx="12"> <canvas id="player" width="460" height="80"></canvas></cl-cd>
<cl-cd data-idx="13"> <canvas id="lrc" width="800" height="50"></canvas></cl-cd>
<cl-cd data-idx="14"></div></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><script></cl-cd>
<cl-cd data-idx="17"> var sF = document.createElement('script');</cl-cd>
<cl-cd data-idx="18"> sF.charset = 'utf-8';</cl-cd>
<cl-cd data-idx="19"> sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_player.js';</cl-cd>
<cl-cd data-idx="20"> document.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="21"> //html粒子</cl-cd>
<cl-cd data-idx="22"> var all = 120;</cl-cd>
<cl-cd data-idx="23"> for(var i = 0; i < all; i++) {</cl-cd>
<cl-cd data-idx="24"> var lz = document.createElement('li-zi');</cl-cd>
<cl-cd data-idx="25"> var hudu = Math.PI / 180 * 360 / all * i;</cl-cd>
<cl-cd data-idx="26"> var xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);</cl-cd>
<cl-cd data-idx="27"> var size = Math.random() * 15 + 5;</cl-cd>
<cl-cd data-idx="28"> lz.style.cssText += `</cl-cd>
<cl-cd data-idx="29"> --x0: ${xx}px;</cl-cd>
<cl-cd data-idx="30"> --y0: ${yy}px;</cl-cd>
<cl-cd data-idx="31"> width: ${size}px;</cl-cd>
<cl-cd data-idx="32"> height: ${size}px;</cl-cd>
<cl-cd data-idx="33"> animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);</cl-cd>
<cl-cd data-idx="34"> `;</cl-cd>
<cl-cd data-idx="35"> mydiv.prepend(lz);</cl-cd>
<cl-cd data-idx="36"> }</cl-cd>
<cl-cd data-idx="37"> //播放器配置 track - 进度条底色; prog - 进度条、滑块、文本颜色; lrc1、lrc2 - 歌词渐变色</cl-cd>
<cl-cd data-idx="38"> var colors = {track: 'pink', prog: 'white', lrc1: 'snow', lrc2: 'darkred'};</cl-cd>
<cl-cd data-idx="39"> //歌词 lrcAr 名称唯一</cl-cd>
<cl-cd data-idx="40"> var lrcAr = [ , , ];</cl-cd>
<cl-cd data-idx="41"></script></cl-cd>
</div>

马黑黑 发表于 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 = [ , ];

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

南无月 发表于 2024-5-17 12:50

粉紫色效果绝美，白老师，这个粒子形状好像没有裁～

南无月 发表于 2024-5-17 12:54

小播和歌词打包封在一起了，且可以更改参数……
画布把这两个整一起是不是更难一些……
运行十分流畅，很高级的感觉……

马黑黑 发表于 2024-5-17 12:55

南无月发表于 2024-5-17 12:50
粉紫色效果绝美，白老师，这个粒子形状好像没有裁～

底片效果

马黑黑 发表于 2024-5-17 12:56

南无月发表于 2024-5-17 12:54
小播和歌词打包封在一起了，且可以更改参数……
画布把这两个整一起是不是更难一些……
运行十分流畅，很 ...

性能可以的

愤怒的葡萄 发表于 2024-5-17 13:28

挺漂亮的，我喜欢紫色。

马黑黑 发表于 2024-5-17 17:54

愤怒的葡萄发表于 2024-5-17 13:28
挺漂亮的，我喜欢紫色。

紫色虽好，却是最难处理的颜色之一

红影发表于 2024-5-17 19:15

很奇妙的效果，这底图用来配这首歌曲，非常贴切呢。欣赏黑黑好帖{:4_199:}

红影发表于 2024-5-17 19:16

把粒子和歌词整合到一起了。厉害。
这个歌词同步没有逐字的颜色变化了呢。进度条上的调整十分流畅。
漂亮的制作{:4_187:}

红影发表于 2024-5-17 19:17

黑黑的帖子配色十分棒，这里的颜色设计很和谐{:4_204:}

南无月 发表于 2024-5-17 19:43

马黑黑发表于 2024-5-17 12:55
底片效果

原来如此，你发午后的那贴已经改了，是最新的代码。已经把配置留出来了。{:4_173:}

南无月 发表于 2024-5-17 19:43

马黑黑发表于 2024-5-17 12:56
性能可以的

很漂亮啊。这个小播细长细长，好苗条的样子

马黑黑 发表于 2024-5-17 19:44

南无月发表于 2024-5-17 19:43
原来如此，你发午后的那贴已经改了，是最新的代码。已经把配置留出来了。

是滴

马黑黑 发表于 2024-5-17 19:45

南无月发表于 2024-5-17 19:43
很漂亮啊。这个小播细长细长，好苗条的样子

要根据歌词长度设置一下HTML代码里的 width="800" 的值。将来也许有扩展，现在还没思路。

马黑黑 发表于 2024-5-17 19:48

红影发表于 2024-5-17 19:17
黑黑的帖子配色十分棒，这里的颜色设计很和谐

紫色是最不好拿捏的

马黑黑 发表于 2024-5-17 19:49

红影发表于 2024-5-17 19:16
把粒子和歌词整合到一起了。厉害。
这个歌词同步没有逐字的颜色变化了呢。进度条上的调整十分流畅。
漂亮 ...

画布做那个同步模拟的思路还木有，先酱紫

马黑黑 发表于 2024-5-17 19:50

红影发表于 2024-5-17 19:15
很奇妙的效果，这底图用来配这首歌曲，非常贴切呢。欣赏黑黑好帖

果酱果酱

南无月 发表于 2024-5-17 20:03

马黑黑发表于 2024-5-17 19:44
是滴

{:4_199:}所以，可以不叫测试了吧

页: [1] 2 3 4 5 6

花潮论坛's Archiver

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