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

二、资源引用与配置

1.     var sF = document.createElement('script');
   
2.     sF.charset = 'utf-8';
   
3.     sF.src = 'js文档地址';
   
4.     document.body.appendChild(sF);

复制代码

三、帖子约定

（一）audio 标签 id="aud"
（二）两个 canvas 用做lrc歌词显示、播放控制器，id 分别为 id="lrc" 和 id="player"，不能改；宽度俺需要在HTML代码中设置、定位在CSS代码中操作
（三）如果需要同步控制帖子中的视频，请将 video 的 class 设为 class="vid"，所有的用了此 class 名称的视频均能与音频的播放暂停同步

四、帖子代码示例

1. <style>
   
2.         #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; }
   
3.         #tiezi:hover .vid { opacity: 0.15; }
   
4.         #player { position: absolute; bottom: 0; }
   
5.         #lrc { position: absolute; top: 15px; }
   
6.         .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: overlay; transition: 2s; pointer-events: none; }
   
7. </style>
   
8. 
   
9. <div id="tiezi">
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2038511379" autoplay loop></audio>
    
11.         <video class="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/09/5b505b5860f94.mp4" loop muted></video>
    
12.         <canvas id="player" width="1000" height="80"></canvas>
    
13.         <canvas id="lrc" width="800" height="50"></canvas>
    
14. </div>
    
15. 
    
16. <script>
    
17.         var sF = document.createElement('script');
    
18.         sF.charset = 'utf-8';
    
19.         sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
    
20.         document.body.appendChild(sF);
    
21.         var colors = {track: 'snow', prog: 'cyan', lrc1: 'yellow', lrc2: 'cyan'};
    
22.         let lrcAr = [
    
23.         [2,"泽典 - 宿命",9.5],[20,"作词 : 晗熙 作曲 : 鑫瀚",5.6],[34.05,"他 沉寂着还在丈量",3.5],[38,"他 衙门上对簿公堂",3.1],[41.08,"他 判了个徒受冤枉",4.0],[45.06,"他笑得猖狂 不顾堂下绝望",4.0],[49.05,"她 随孩童轻声哼唱",4.0],[53.02,"她 变成个疯癫婆娘",3.1],[56.09,"她 穿着那大红嫁妆",4.0],[60.09,"夜半哭声响亮",4.0],[64.07,"火光里拜堂 官人去了何方",3.9],[68.05,"爱与恨难忘 她站在最中央",3.0],[71.09,"说这一路悲怆 一曲绝唱",4.8],[76,"莫笑人荒唐",3.1],[79.08,"是情 是命",2.0],[81.06,"是难解疏狂",2.0],[83.01,"谁逃的出虚妄",2.0],[85,"谁三更又思量",1.1],[86.09,"她说是错但无妨",2.0],[88.08,"就去彼岸等一场",2.0],[90.06,"世人不经怎能欣赏",4.0],[94.09,"是情 是命",2.0],[96.07,"是人间仓惶",2.0],[98.04,"谁步伐如踉跄",2.0],[100.02,"谁把心事埋藏",2.0],[102.01,"究竟是谁在慌张",1.1],[103.09,"她卸下那层伪装",2.0],[105.09,"这场落幕谁还在问",3.0],[108.08,"官人",1.0],[109.07,"你在哪",3.0],[133.02,"她 随孩童轻声哼唱",3.1],[136.09,"她 变成个疯癫婆娘",4.0],[140.07,"她 穿着那大红嫁妆",4.0],[144.05,"夜半哭声响亮",4.0],[148.05,"火光里拜堂 官人去了何方",3.5],[152.03,"爱与恨难忘 她站在最中央",3.0],[155.07,"说这一路悲怆 一曲绝唱",4.0],[159.08,"莫笑人荒唐",4.0],[163.06,"是情 是命",2.0],[165.04,"是难解疏狂",1.1],[166.1,"谁逃的出虚妄",2.0],[168.08,"谁三更又思量",2.0],[170.07,"她说是错但无妨",2.0],[172.06,"就去彼岸等一场",2.0],[174.05,"世人不经怎能欣赏",4.0],[178.08,"是情 是命",2.0],[180.06,"是人间仓惶",1.9],[182.01,"谁步伐如踉跄",2.0],[184.01,"谁把心事埋藏",1.1],[185.09,"究竟是谁在慌张",2.0],[187.09,"她卸下那层伪装",2.0],[189.07,"这场落幕谁还在问",3.0],[192.07,"官人",1.0],[193.09,"你在哪",2.3],[197.1,"是情 是命",2.0],[199.07,"是难解疏狂",2.0],[201.02,"谁逃的出虚妄",2.0],[203.01,"谁三更又思量",1.1],[204.09,"她说是错但无妨",2.0],[206.09,"就去彼岸等一场",2.0],[208.08,"世人不经怎能欣赏",4.4],[213.01,"是情 是命",1.1],[214.09,"是人间仓惶",2.0],[216.05,"谁步伐如踉跄",2.0],[218.04,"谁把心事埋藏",2.0],[220.03,"究竟是谁在慌张",2.0],[222.02,"她卸下那层伪装",2.0],[224,"这场落幕谁还在问",2.9],[227,"官人",1.0],[228,"你在哪",1.8]];
    
24. </script>

复制代码

南无月

可以根据贴子需要自由选择的节奏 。。

红影

有意思，带歌词同步模拟的还专门添加了518的日期作为区别。
两个封装都很赞。黑黑太厉害了

马黑黑

红影 发表于 2024-5-18 23:43
有意思，带歌词同步模拟的还专门添加了518的日期作为区别。
两个封装都很赞。黑黑太厉害了

主要是不想覆盖，因为第一个效果也行的；第二个其实也只是加了歌词同步提示

马黑黑

南无月 发表于 2024-5-18 22:24
可以根据贴子需要自由选择的节奏 。。

这应该可以。当然，主要是不想覆盖上传，传完了等10~20分钟不怎么好玩，还得硬刷新

红影

马黑黑 发表于 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
覆盖上传的页面直接说的

它只提示了你，没提示我

马黑黑

南无月 发表于 2024-5-19 17:31
它只提示了你，没提示我

一样一样的，你没留意而已

南无月

马黑黑 发表于 2024-5-19 17:32
一样一样的，你没留意而已

我等会去试它一试，每次都提示不

马黑黑

南无月 发表于 2024-5-19 17:34
我等会去试它一试，每次都提示不

是的

南无月

马黑黑 发表于 2024-5-19 17:35
是的

我又上传一张，它没提示我，真的没有看到任何提示。
咦，它给我自动加了一串乱码，以做区别
qishansz07_133605853205307500.webp
qishansz07.webp

南无月

这是后面升级功能的吧。。。

红影

马黑黑 发表于 2024-5-19 17:16
都好的，反正空间不紧张

这个文件很小啊，不会影响空间的