孤星

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://pic3.zhimg.com/v2-f0e81215252f2b72103ff5b8c428a612_r.jpg') no-repeat center/cover; color: lightblue; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #lrc { top: 4%; }
   
7.     #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 15%; transition: .75s; opacity: 1; }
   
8.     #cc { transform-box: fill-box; transform-origin: center; cursor: pointer; animation: rot 20s linear infinite var(--state); }
   
9. </style>
   
10. 
    
11. <div id="pa" class="pa">
    
12.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/20/5b51fecde9934.mp4" autoplay loop muted></video>
    
13.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
    
14. </div>
    
15. 
    
16. <script>
    
17.     var gc = `[00:01.21]孤星\n[00:10.02]歌手 一支榴莲\n[00:18.98]网易云音乐X中国数字音乐基地 联合出品\n[00:20.58]如果我眼中的荒凉 是你所谓的假象\n[00:28.44]承受人性的冷漠 记得别声张\n[00:35.89]孤独分娩出另一个人借我肩膀\n[00:43.40]他用双手遮住这世界的喧嚷\n[00:50.61]他说我的心注定 无法被谁捂热\n[00:54.41]怪双眼看不清 这人间的颜色\n[00:58.16]他要我心如止水\n[00:59.77]别再承受世俗眼光的无情折磨\n[01:04.85]看绝望的倒影 在海面结成冰\n[01:08.44]留住我 别让我沉溺宿命\n[01:12.16]那黯淡的孤星 是被埋没的姓名\n[01:16.32]我却叙意不清\n[01:19.74]看铺天的阴影 已吞没了光明\n[01:23.36]没有谁在意爱是如何走向凋零\n[01:28.18]请抱紧自己 留一刹的火星\n[01:58.37]孤独分娩出另一个人借我肩膀\n[02:05.91]他用双手遮住这世界的喧嚷\n[02:13.04]他说我的心注定 无法被谁捂热\n[02:16.73]怪双眼看不清 这人间的颜色\n[02:20.59]他要我心如止水\n[02:22.30]别再承受世俗眼光的无情折磨\n[02:27.17]看绝望的倒影 在海面结成冰\n[02:30.95]留住我 别让我沉溺宿命\n[02:34.69]那黯淡的孤星 是被埋没的姓名\n[02:38.85]我却叙意不清\n[02:42.33]看铺天的阴影 已吞没了光明\n[02:45.91]没有谁在意爱是如何走向凋零\n[02:50.54]请抱紧自己 留一刹的火星\n[02:58.22]请抱紧自己 留一刹的火星\n[03:10.10]感谢观赏`;
    
18. 
    
19.     var options = {
    
20.         pa: '.pa',
    
21.         urls: [['https://music.163.com/song/media/outer/url?id=2066729125', '孤星']],
    
22.         btns: [msvg],
    
23.     };
    
24. 
    
25.   loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    
26.     loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
    
27.       loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
28.     });
    
29.   });
    
30. 
    
31.     function tzRun() {
    
32.         var aud = new AudPlayer(options);
    
33.         LRC(aud.pa, aud.aud, gc, 0.5);
    
34.         var dr = _dr(msvg);
    
35.         dr.gradient('radialGradient', {id: 'grd', cx: '30%', cy: '25%', r: '70%'}, '<stop offset="0%" stop-color="#eff" /><stop offset="50%" stop-color="#4da6ff" /><stop offset="100%" stop-color="#003d82" />');
    
36.         dr.path('M-180 50 A90 80, 0, 0, 0, 180 -50', 'none', 'lightgreen', 4);
    
37.         dr.path('M-170 -50 A80 70, 0, 0, 0, 170 50', 'none', 'lightgreen', 5);
    
38.         dr.path('M-160 0 A60 55, 0, 0, 0, 160 0', 'none', 'lightgreen', 4);
    
39.         dr.circle(0, -20, 140, 'url(#grd)').id('cc');
    
40.     }
    
41. 
    
42.     function loadJs(url, callback) {
    
43.         var script = document.createElement('script');
    
44.         script.charset = 'utf-8';
    
45.         script.src = url;
    
46.         script.onload = function() {
    
47.             if (callback) callback();
    
48.         };
    
49.         document.head.appendChild(script);
    
50.     }
    
51. </script>

复制代码

马黑黑

辅助小播：

蓝色星球的绘制请参阅：svg蓝色星球 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

这里：

（一）星球下面的装饰是三个 path 路径，都是半弧（A指令）图形，起止点略有差错、xy半径各有不同；

（二）圆球设置了id（cc），对应的CSS选择器 #cc 设置了svg图形的几个重要属性，一是 transform-box，二是 transform-origin，确保圆形作为svg子元素的 animation 动画围绕自己的圆心运行。

马黑黑

歌词：

（一）声明歌词变量在 17 行；

（二）引用歌词插件代码在 33 行，第三个参数 0.5 可以缺省；

（三）歌词位置通过 CSS 设置，代码在 06 行。

马黑黑

全屏按钮、播放控制器颜色问题：

audioplayer 插件使用 currentColor 做边框颜色、文本色等，所以，帖子容器选择器 #pa  {} 里统一设置一个 color 属性即可；如果需要单独设置全屏按钮、播放器控制器的边框色、文本色，可在对应选择其中加入 color 属性设置。

马黑黑

本帖制作之时，希望辅助小播不自动消失，因此，在对应CSS选择器（07行代码）中将 opacity 设置为 1（如果希望自动消失显示，opacity 属性值数额为 --opacity 即可）。

梦江南

欣赏黑黑老师的精彩音画。谢谢分享！