《虞兮叹》以及canvas圆环播放器

马黑黑 · 发表于 2024-5-27 21:20

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

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

x

本帖最后由马黑黑于 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 = [[2,"歌词1",3], [6,"...",5, [128,"歌词N",4]]; 这样的格式声明和赋值；
配色：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 = [
[2,"闻人听書_虞兮叹",'3'],
[29.08,"楚河流沙几聚散日月沧桑尽变换",5.9],
[35.01,"乱世多少红颜换一声长叹",5.0],
[40.04,"谁曾巨鹿踏破了秦关千里兵戈血染",6.0],
[46.05,"终究也不过是风轻云淡",5.0],
[51.05,"长枪策马平天下此番诀别却为难",6.0],
[57.07,"一声虞兮虞兮泪眼已潸然",5.9],
[63.01,"与君共饮这杯中冷暖西风彻夜回忆吹不断",6.0],
[69.04,"醉里挑灯看剑妾舞阑珊",5.0],
[74.09,"垓下一曲离乱楚歌声四方",5.9],
[80.03,"含悲辞君饮剑血落凝寒霜",5.1],
[85.09,"难舍一段过往缘尽又何妨",6.0],
[91.08,"与你魂归之处便是苍茫",29.0],
[120.03,"长枪策马平天下此番诀别却为难",6.0],
[126.02,"一声虞兮虞兮泪眼已潸然",5.0],
[131.07,"与君共饮这杯中冷暖西风彻夜回忆吹不断",6.9],
[138,"醉里挑灯看剑妾舞阑珊",5.0],
[143.03,"垓下一曲离乱楚歌声四方",5.0],
[148.07,"含悲辞君饮剑血落凝寒霜",6.0],
[154.07,"难舍一段过往缘尽又何妨",5.9],
[160.01,"与你魂归之处便是苍茫",6.0],
[166.04,"汉兵刀剑纷乱折断了月光",5.0],
[171.06,"江畔只身孤舟余生不思量",6.0],
[177.04,"难舍一段过往缘尽又何妨",6.0],
[183,"与你来生共寄山高水长",6]
];
</script>