学习代码音画《回家的路》

老谟深虑

老钟 发表于 2024-1-17 07:02
代码音画《回家的路》，歌曲好听，制作很棒，老谟深虑出镜音画，让网友更加感到格外亲切，点赞！ ...

        谢谢老钟老师的精美点评和评精鼓励！图片移动代码我在消息里发给你了。

老谟深虑

春归来 发表于 2024-1-17 10:28
回头眺望，故乡情怀浓。

       谢谢雅评，下午好！

老谟深虑

月婵 发表于 2024-1-17 10:32
欣赏版版学习代码音画《回家的路》好作品！

        谢谢版版的欣赏，下午好！

老谟深虑

微尘 发表于 2024-1-17 15:18
老友，下午好。支持鼓励就是我们玩的动力啊。

        说得对，我们就是要互相支持和鼓励。

微尘

老谟深虑 发表于 2024-1-17 15:30
说得对，我们就是要互相支持和鼓励。

老友，这么多年的交往了，你是了解我的哦。

起个网名好难

老谟深虑 发表于 2024-1-17 15:11
谢谢老师的支持，有时间还得向老师学习超宽音画的代码，我按你的代码制作了一次没有成功，就是往 ...

这帖没必要挪吧，现在这样就很好了。

起个网名好难

老谟深虑 发表于 2024-1-17 15:11 谢谢老师的支持，有时间还得向老师学习超宽音画的代码，我按你的代码制作了一次没有成功，就是往 ...

起个网名好难

老谟深虑 发表于 2024-1-17 15:11
谢谢老师的支持，有时间还得向老师学习超宽音画的代码，我按你的代码制作了一次没有成功，就是往 ...

原来的代码：

<style>#papa { margin: 0 0 0 calc(50% -500px); width: 1200px; height: 640px; background: url('https://s11.ax1x.com/2024/01/08/pFS4ouT.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#sky { position: absolute; width: 1200px; height: 640px; bottom: 0; right: 0; transform: rotate(30deg); }</style>
修改后的代码：

<style>
#outBlk {width: 1200px; height: 640px;position:absolute;left:calc(50% - 600px);}
#papa { width:100%; height:100%; background: url('https://s11.ax1x.com/2024/01/08/pFS4ouT.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#sky { position: absolute; width: 1200px; height: 640px; bottom: 0; right: 0; transform: rotate(30deg); }
</style>

加了个#outBlk， 内容稍微调整了一下，注意对比着看。

起个网名好难

还有，

原来的代码：
<div id="papa"><div id="sky"></div><audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/01/15/68d88e8fe33704b2ee90864f616a7bc8.mp3" autoplay="" loop=""></audio></div>

修改后的代码：
<div id="outBlk"><div id="papa"><div id="sky"></div><audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/01/15/68d88e8fe33704b2ee90864f616a7bc8.mp3" autoplay="" loop=""></audio></div></div>

<div style="height:720px;"></div>

红色是增加的代码。

起个网名好难

完整的修改后代码：

1. <style>
   
2. #outBlk        {width: 1200px; height: 640px;position:absolute;left:calc(50% - 600px);}
   
3. #papa { width:100%; height:100%; background: url('https://s11.ax1x.com/2024/01/08/pFS4ouT.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
4. #sky { position: absolute; width: 1200px; height: 640px; bottom: 0; right: 0; transform: rotate(30deg); }
   
5. </style>
   
6. 
   
7. <div id='outBlk'>
   
8. <div id="papa"><div id="sky"></div><audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/01/15/68d88e8fe33704b2ee90864f616a7bc8.mp3" autoplay="" loop=""></audio></div>
   
9. </div>
   
10. <div style="height:720px;"></div>
    
11. 
    
12. 
    
13. <script>(function() {
    
14.         let lrcAr = [['0.00', '回家的路',3.80],
    
15. ['4.00', '作词：崔富',3.80],
    
16. ['7.99', '作曲：赵金宝',3.80],
    
17. ['11.99', '演唱：豪图',3.80],
    
18. ['15.98', 'LRC：老谟深虑',18.62],
    
19. ['35.58', '有一条路让人常常回头眺望',6.93],
    
20. ['42.87', '那边是家的方向再长也挡不住我的思念',14.65],
    
21. ['58.29', '回家的路啊血脉编制的纽带',9.18],
    
22. ['67.95', '路有多长情有多长',7.44],
    
23. ['75.78', '路有多长爱就多长',7.32],
    
24. ['83.49', '带着我的眷恋',3.68],
    
25. ['87.36', '奔向回家的路',5.53],
    
26. ['93.18', '带着我的眷恋',3.68],
    
27. ['97.05', '奔向奔向那回家的路',9.30],
    
28. ['106.84', '',20.11],
    
29. ['128.01', '有一条路让人常常望断天涯',7.35],
    
30. ['135.75', '一路飘荡着乡恋',7.32],
    
31. ['143.46', '再远也阻挡不了我的脚步',7.35],
    
32. ['151.20', '回家的路啊游子心中的金桥',9.18],
    
33. ['160.86', '路有多长情有多长',7.44],
    
34. ['168.69', '路有多长爱就多长',7.32],
    
35. ['176.40', '带着我的眷恋',3.68],
    
36. ['180.27', '奔向回家的路',5.53],
    
37. ['186.09', '带着我的眷恋',2.73],
    
38. ['188.96', '奔向奔向那回家的路',10.13],
    
39. ['199.62', '路有多长情有多长',7.32],
    
40. ['207.33', '路有多长爱就多长',7.38],
    
41. ['215.10', '带着我的眷恋',3.68],
    
42. ['218.97', '奔向回家的路',5.56],
    
43. ['224.82', '带着我的眷恋',3.65],
    
44. ['228.66', '奔向奔向那回家的路',9.43],
    
45. ['238.59', '奔向那回家的路',4.5]
    
46. ];
    
47.         let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
    
48.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    
49.         let loadJs = (url,callback) => {
    
50.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
51.                 jsNode.charset = 'utf-8';
    
52.                 jsNode.setAttribute('src', url);
    
53.                 body.appendChild(jsNode);
    
54.                 jsNode.onload = () => callback();
    
55.         };
    
56.         loadJs(js1, () => {
    
57.                 HCPlayer({
    
58.                         papa: '#papa',
    
59.                         lrcAr: lrcAr,
    
60.                         lrc_css: 'bottom: 20px;--bg: hsla(120,26%,45%,.7);color: #aaa;',
    
61.                         fs_css: 'transform: translate(-100px,40px); color: #FF0000 background: transparent;',
    
62.                         player_css: 'transform: translate(-400px,0;); width: 1200px; height: 420px;',
    
63.                         path: 'm310.29249,52.84883l0,28.29044c-59.18432,3.98935 -105.79996,46.09556 -105.79999,97.44484c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c7.5579,0 14.41662,1.75651 19.54999,4.54044l0,137.95953c0,6.16947 -4.12158,11.17649 -9.19999,11.17649c-5.07838,0 -9.2,-5.00702 -9.2,-11.17649l0,-5.58823l-18.4,0l0,5.58823c0,18.50822 12.36478,33.52942 27.6,33.52942c15.23518,0 27.60001,-15.02119 27.60001,-33.52942l0,-137.95953c5.13336,-2.78393 11.9921,-4.54044 19.54999,-4.54044c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-51.34931 -46.61564,-93.45549 -105.79999,-97.44484l0,-28.29044l-18.40002,0z',
    
64.                         btn: {left: 254, top: 100},
    
65.                         track: {track: 'red', prog: 'olive'},
    
66.                         img: {play: '', pause: ''}
    
67.                 });
    
68.         });
    
69. 
    
70.         loadJs(js2, () => {
    
71.                 H5lz({
    
72.                         papa: '#sky',
    
73.                         total: 10,
    
74.                         size: {width:60, height: 32},
    
75.                         shape: {background: 'url("https://638183.freep.cn/638183/web/svg/yjzi1.svg") no-repeat center/cover', borderRadius: '0'},
    
76.                         ani: 'toLeft',
    
77.                         maxTime: 30,
    
78.                         offset: {x: 0, y: 0},
    
79.                 });
    
80.         });
    
81. })();</script>

复制代码