《虞兮叹》以及canvas圆环播放器
本帖最后由 马黑黑 于 2024-5-27 21:36 编辑《虞兮叹》一帖，使用的是 canvas 画布做的可控进度圆环播放器+半椭圆环歌词显示，同在一个JS资源文档里。
canvcircle_lrc.js 约定：
[*]canvas画布 id="aCanv"，注意大小写；
[*]audio音频标签 id="aud"；
[*]如果有背景视频，请使用 class="vid" 类名；
[*]如果希望联动控制CSS关键帧动画，animation 属性请使用变量 var(--state)；
[*]LRC歌词请使用 var lrcAr = [, ]; 这样的格式声明和赋值；
[*]配色 ：var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' }; ，分别是底轨颜色、进度颜色、按钮颜色、时间信息文本颜色。
详情请看帖子代码（本地测试）：
<style>
.papa { margin: 20px auto; width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/2/yuxi.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
#aCanv { position: absolute; bottom: 10px; left: calc(50% - 300px); }
.vid { position: absolute; top: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; transform: rotateX(180deg); mix-blend-mode: screen; }
.mpic { position: absolute; offset-path: path('M0 200 Q640 20,1280 200'); transform: rotateY(180deg); mix-blend-mode: multiply; offset-distance: 0; animation: fly 8s linear infinite var(--state); }
@keyframes fly { to { offset-distance: 100%; } }
</style>
<div class="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1479526505" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4865ba379a9.mp4" autoplay loop muted></video>
<img class="mpic" src="https://638183.freep.cn/638183/small/flybirds.gif" alt="" />
<canvas id="aCanv" width="600" height="320"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';
document.body.appendChild(sF);
//播放器颜色设置
//var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };
//歌词
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
这个还是封装好的，用起来真方便呢{:4_199:} <canvas id="aCanv" width="600" height="320"></canvas>
这个的宽高是做什么用的啊？ 红影 发表于 2024-5-27 22:02
这个的宽高是做什么用的啊？
歌词显示需要 红影 发表于 2024-5-27 21:59
这个还是封装好的，用起来真方便呢
晚饭前后做好的，还没来得及找错误 这个的歌词和播放器封装了，自己可调的不多啊，比如歌词的弧度和想放的位置，不能单独拉出来了{:4_173:} 搜集素材准备临摹{:4_173:} 执著 发表于 2024-5-27 22:39
搜集素材准备临摹
{:4_190:} 红影 发表于 2024-5-27 22:15
这个的歌词和播放器封装了，自己可调的不多啊，比如歌词的弧度和想放的位置，不能单独拉出来了
歌词围绕播放器。画布的尺寸决定歌词的弧度。 马黑黑 发表于 2024-5-27 22:07
歌词显示需要
原来是派这个用途的，知道了{:4_187:} 马黑黑 发表于 2024-5-27 22:08
晚饭前后做好的，还没来得及找错误
现在看起来没什么问题的，很完美。 马黑黑 发表于 2024-5-27 22:44
歌词围绕播放器。画布的尺寸决定歌词的弧度。
嗯嗯，现在知道画布的作用了{:4_187:} 红影 发表于 2024-5-27 23:13
嗯嗯，现在知道画布的作用了
不过这个主要针对方块字比较好，英文歌词不太合适这么做 红影 发表于 2024-5-27 23:12
现在看起来没什么问题的，很完美。
还不清楚 红影 发表于 2024-5-27 23:12
原来是派这个用途的，知道了
歌词和播放控制器放一起的，场景要大一些 马黑黑 发表于 2024-5-27 23:18
不过这个主要针对方块字比较好，英文歌词不太合适这么做
嗯嗯，有长度时就无法这样均匀弯曲了吧。 马黑黑 发表于 2024-5-27 23:22
还不清楚
很漂亮，黑黑厉害{:4_187:} 马黑黑 发表于 2024-5-27 23:22
歌词和播放控制器放一起的，场景要大一些
这个设置好，在一切特殊场景里，还能给它加点颜色，估计也漂亮的{:4_187:} 红影 发表于 2024-5-28 22:36
这个设置好，在一切特殊场景里，还能给它加点颜色，估计也漂亮的
看情况吧 红影 发表于 2024-5-28 22:35
很漂亮，黑黑厉害
{:4_203:}