canva线状进度条+lrc歌词显示音频播放控制器文档
一、文档资源：（一）仅显示lrc歌词，无同步模拟
https://638183.freep.cn/638183/web/js2024/canv_lineprog_player.js
（二）支持lrc歌词同步模拟
https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js
二、资源引用与配置
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'js文档地址';
document.body.appendChild(sF);三、帖子约定
（一）audio 标签 id="aud"
（二）两个 canvas 用做lrc歌词显示、播放控制器，id 分别为 id="lrc" 和 id="player"，不能改；宽度俺需要在HTML代码中设置、定位在CSS代码中操作
（三）如果需要同步控制帖子中的视频，请将 video 的 class 设为 class="vid"，所有的用了此 class 名称的视频均能与音频的播放暂停同步
四、帖子代码示例
<style>
#tiezi { margin: 20px auto; display: grid; place-items: center; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/sumk.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 3px 3px 6px gray; position: relative; }
#tiezi:hover .vid { opacity: 0.15; }
#player { position: absolute; bottom: 0; }
#lrc { position: absolute; top: 15px; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: overlay; transition: 2s; pointer-events: none; }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2038511379" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/09/5b505b5860f94.mp4" loop muted></video>
<canvas id="player" width="1000" 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_518.js';
document.body.appendChild(sF);
var colors = {track: 'snow', prog: 'cyan', lrc1: 'yellow', lrc2: 'cyan'};
let lrcAr = [
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
</script>
可以根据贴子需要自由选择的节奏 。。
{:4_187:} 有意思，带歌词同步模拟的还专门添加了518的日期作为区别。
两个封装都很赞。黑黑太厉害了{:4_199:} 红影 发表于 2024-5-18 23:43
有意思，带歌词同步模拟的还专门添加了518的日期作为区别。
两个封装都很赞。黑黑太厉害了
主要是不想覆盖，因为第一个效果也行的；第二个其实也只是加了歌词同步提示 南无月 发表于 2024-5-18 22:24
可以根据贴子需要自由选择的节奏 。。
这应该可以。当然，主要是不想覆盖上传，传完了等10~20分钟不怎么好玩，还得硬刷新{:4_170:} 马黑黑 发表于 2024-5-19 09:43
主要是不想覆盖，因为第一个效果也行的；第二个其实也只是加了歌词同步提示
嗯嗯，还是这样有分别的好。 马黑黑 发表于 2024-5-19 09:45
这应该可以。当然，主要是不想覆盖上传，传完了等10~20分钟不怎么好玩，还得硬刷新
话说我也发现这个空间里关于命名的问题。
比如我做一张图，起名叫01，等了一会我改了一下，电脑里是可以重新命为01且覆盖原图，但我还用01上传之后，空间里就有两个01。用在贴子里刷新后显示的还是原来的那张旧的。。
就愁啊，改不过来它。。
所以，我现在改一次图就另起一个名字。比如02、03，这样才能看到效果。。
你这么说，原来不是不覆盖，而是有10——20分钟的等待期，对我来说随时即看的，还是要换图片名字的好。。
南无月 发表于 2024-5-19 17:11
话说我也发现这个空间里关于命名的问题。
比如我做一张图，起名叫01，等了一会我改了一下，电脑里是可以 ...
这是经验之谈。谢谢 红影 发表于 2024-5-19 17:02
嗯嗯，还是这样有分别的好。
都好的，反正空间不紧张 马黑黑 发表于 2024-5-19 17:16
这是经验之谈。谢谢
这个10-20分也是经过好长时间才发现的吧 南无月 发表于 2024-5-19 17:18
这个10-20分也是经过好长时间才发现的吧
它有提示的 马黑黑 发表于 2024-5-19 17:23
它有提示的
艾玛，我都不看说明书的么。。 南无月 发表于 2024-5-19 17:26
艾玛，我都不看说明书的么。。
覆盖上传的页面直接说的 马黑黑 发表于 2024-5-19 17:30
覆盖上传的页面直接说的
它只提示了你，没提示我{:4_170:} 南无月 发表于 2024-5-19 17:31
它只提示了你，没提示我
一样一样的，你没留意而已 马黑黑 发表于 2024-5-19 17:32
一样一样的，你没留意而已
{:4_170:}我等会去试它一试，每次都提示不 南无月 发表于 2024-5-19 17:34
我等会去试它一试，每次都提示不
是的 马黑黑 发表于 2024-5-19 17:35
是的
我又上传一张，它没提示我，真的没有看到任何提示。
咦，它给我自动加了一串乱码，以做区别{:4_170:}
qishansz07_133605853205307500.webp
qishansz07.webp 这是后面升级功能的吧。。。{:4_170:} 马黑黑 发表于 2024-5-19 17:16
都好的，反正空间不紧张
这个文件很小啊，不会影响空间的{:4_173:}