马黑黑 发表于 2023-7-31 23:17

苏小明 - 军港之夜

本帖最后由 马黑黑 于 2023-8-1 07:52 编辑 <br /><br /><style>
#papa { margin: -80px 0 0 calc(50% - 581px); width: 1000px; height: 667px; background: url('https://638183.freep.cn/638183/t23/1/jgvy.jpg'); box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
pre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.green { color: green; }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1298400389" autoplay loop></audio>
<br><br><hr>
<p>配置代码：</p>
<pre id="codePre">

&lt;script&gt;

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/pinpux_lrc.js';
    document.head.appendChild(script);

    let geci = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
    ];
    window.onload = () => {
      HCPlayer({
            papa: '#papa', <span class="green">/* 宿主元素 */</span>
            lrcAr: geci, <span class="green">/* 歌词 */</span>
            lrc_css: `
                top: 10px; <span class="green">/* 位置 */</span>
                color: silver; <span class="green">/* 歌词底色 */</span>
                --bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));<span class="green">/* 歌词同步颜色 */</span>
            `,
            player_css: `
                top: 140px; <span class="green">/* 位置 */</span>
                color: #fff; <span class="green">/* 文本颜色 */</span>
                --len: 3px; <span class="green">/* 频谱厚度 */</span>
            `,
            pinpu_num: 50, <span class="green">/* 频谱总数 */</span>
      });
    }
})();

&lt;/script&gt;

</pre>

<script>

let runCodes = (str) => {
    let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
    let js_str = str.match(reg);
    js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
    let func = new Function(js_str);
    func();
};

runCodes(codePre.innerText);

</script>

醉美水芙蓉 发表于 2023-8-1 07:07

马黑黑 发表于 2023-8-1 07:55

醉美水芙蓉 发表于 2023-8-1 07:07
老师早上好！欣赏学习黑黑老师精彩播放器！

早{:4_190:}

红影 发表于 2023-8-1 09:20

斜向频谱打包上传。又一个新的打包效果{:4_199:}

红影 发表于 2023-8-1 09:21

这背景和歌曲结合很棒，老歌好听{:4_187:}

梦油 发表于 2023-8-1 09:30

向战无不胜攻无不克的钢铁长城致以节日的问候！

梦缘 发表于 2023-8-1 10:44

感谢老师的精彩分享，欣赏点赞！{:4_187:}

马黑黑 发表于 2023-8-1 11:53

梦缘 发表于 2023-8-1 10:44
感谢老师的精彩分享，欣赏点赞！

节日好

马黑黑 发表于 2023-8-1 11:54

红影 发表于 2023-8-1 09:20
斜向频谱打包上传。又一个新的打包效果

这个帖子的代码有点特别额，不知道能否看得出来

马黑黑 发表于 2023-8-1 11:55

红影 发表于 2023-8-1 09:21
这背景和歌曲结合很棒，老歌好听

节日快乐！

马黑黑 发表于 2023-8-1 11:55

梦油 发表于 2023-8-1 09:30
向战无不胜攻无不克的钢铁长城致以节日的问候！

{:4_431:}

红影 发表于 2023-8-1 16:12

马黑黑 发表于 2023-8-1 11:54
这个帖子的代码有点特别额，不知道能否看得出来

从你给出的配置代码里看不出，去看全部代码，的确有不同。

红影 发表于 2023-8-1 16:13

马黑黑 发表于 2023-8-1 11:55
节日快乐！

应该祝你节日快乐才是，我又没当过兵{:4_173:}
祝黑黑节日快乐{:4_187:}

马黑黑 发表于 2023-8-1 19:28

红影 发表于 2023-8-1 16:13
应该祝你节日快乐才是，我又没当过兵
祝黑黑节日快乐

没有一个人不过八一

马黑黑 发表于 2023-8-1 19:31

红影 发表于 2023-8-1 16:12
从你给出的配置代码里看不出，去看全部代码，的确有不同。

而且还应该是看不出是肿么回事

花飞飞 发表于 2023-8-1 21:16

我试着跟了一贴，这个贴子外面的代码可以控制贴子~~

红影 发表于 2023-8-1 21:41

马黑黑 发表于 2023-8-1 19:28
没有一个人不过八一

好吧，从这个角度来说，也该祝贺{:4_173:}

红影 发表于 2023-8-1 21:43

马黑黑 发表于 2023-8-1 19:31
而且还应该是看不出是肿么回事

是的，那个pre 和 codePre 不熟悉。

醉美水芙蓉 发表于 2023-8-1 21:52

醉美水芙蓉 发表于 2023-8-1 21:53

页: [1] 2 3 4
查看完整版本: 苏小明 - 军港之夜