马黑黑 发表于 2023-8-2 07:52

小河小河

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: url('https://638183.freep.cn/638183/t23/3/xnhe.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2062919073" autoplay loop></audio>

马黑黑 发表于 2023-8-2 07:54

本帖最后由 马黑黑 于 2023-8-2 08:05 编辑 <br /><br /><style>
pre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; white-space: pre-wrap; }
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.zhushi { color: green; }
</style>

<p>配置代码：</p>
<pre id="codePre">

&lt;script&gt;

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/osc_lrc.js';
    document.head.appendChild(script);
    let geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,        , , , , , ];
    window.onload = () => {
      HCPlayer({
            papa: '#papa', <span class="zhushi">/* 宿主元素 */</span>
            lrcAr: geci, <span class="zhushi">/* 歌词 */</span>
            lrc_css: `
                top: 10px; <span class="zhushi">/* 位置 */</span>
                color: lightblue; <span class="zhushi">/* 歌词底色 */</span>
                -webkit-box-reflect: below 420px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));;
                --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));<span class="zhushi">/* 歌词同步颜色 */</span>
            `,
            player_css: `
                bottom: 20px; <span class="zhushi">/* 位置 */</span>
                color: #fff; <span class="zhushi">/* 文本颜色 */</span>
                --track: lightgreen; <span class="zhushi">/* 底轨颜色 */</span>
                --prog: orange; <span class="zhushi">/* 进度颜色 */</span>
                --ww: 400px; <span class="zhushi">/* 示波宽度 */</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-2 08:21

这个打包好的频谱像波动的小河~~

花飞飞 发表于 2023-8-2 08:27

这个一楼几乎没有代码啦{:4_170:}。。。。

红影 发表于 2023-8-2 09:40

黑黑又一个打包上传的效果，这么快，真厉害{:4_187:}

红影 发表于 2023-8-2 09:41

这个频谱带进度效果也很漂亮。歌词还带倒影呢，真的像在水面上。漂亮{:4_199:}

醉美水芙蓉 发表于 2023-8-2 11:59

马黑黑 发表于 2023-8-2 12:52

醉美水芙蓉 发表于 2023-8-2 11:59
这个播放器打包漂亮！

谢谢 {:4_190:}

马黑黑 发表于 2023-8-2 12:52

红影 发表于 2023-8-2 09:41
这个频谱带进度效果也很漂亮。歌词还带倒影呢，真的像在水面上。漂亮

这是示波图形的播放器，与频谱有一定联系但不是频谱

马黑黑 发表于 2023-8-2 12:53

红影 发表于 2023-8-2 09:40
黑黑又一个打包上传的效果，这么快，真厉害

这个是之前做好的，你去那个插件集合去看看就知道

马黑黑 发表于 2023-8-2 12:53

花飞飞 发表于 2023-8-2 08:21
这个打包好的频谱像波动的小河~~

确实

马黑黑 发表于 2023-8-2 12:53

花飞飞 发表于 2023-8-2 08:27
这个一楼几乎没有代码啦。。。。

挪了个位置

红影 发表于 2023-8-2 14:13

马黑黑 发表于 2023-8-2 12:52
这是示波图形的播放器，与频谱有一定联系但不是频谱

对对，不能叫频谱。记得还有个在圆圈里的示波器，那个也挺好看的{:4_173:}

红影 发表于 2023-8-2 14:14

马黑黑 发表于 2023-8-2 12:53
这个是之前做好的，你去那个插件集合去看看就知道

嗯嗯，你把哪里的又都升级了一下，变成了上传好的{:4_204:}

马黑黑 发表于 2023-8-2 18:16

红影 发表于 2023-8-2 14:14
嗯嗯，你把哪里的又都升级了一下，变成了上传好的

做东变动很少的

马黑黑 发表于 2023-8-2 18:17

红影 发表于 2023-8-2 14:13
对对，不能叫频谱。记得还有个在圆圈里的示波器，那个也挺好看的

还可以

红影 发表于 2023-8-2 20:24

马黑黑 发表于 2023-8-2 18:16
做东变动很少的

那是因为你熟练啊{:4_173:}

红影 发表于 2023-8-2 20:25

马黑黑 发表于 2023-8-2 18:17
还可以

那些别致的播放器还都有印象呢。

马黑黑 发表于 2023-8-2 20:30

红影 发表于 2023-8-2 20:25
那些别致的播放器还都有印象呢。

谢谢

马黑黑 发表于 2023-8-2 20:30

红影 发表于 2023-8-2 20:24
那是因为你熟练啊

{:4_170:}
页: [1] 2 3 4 5 6 7 8 9
查看完整版本: 小河小河