马黑黑 发表于 2025-2-25 12:26

Rise Above（单曲v1示范）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css';
        #tz { margin: 30px 0 30px calc(50% - 583px); background: url('https://638183.freep.cn/638183/t24/webp3/underground.webp') no-repeat center/cover; }
        #mplayer { width: 600px; bottom: 10px; background: none; box-shadow: none; color: snow; }
        #mplayer img { filter: invert(.8); }
        #fsbtn { bottom: 60px; border-color: snow; color: snow; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=34749557"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/50/12/video6363569454a33.mp4" autoplay loop muted></video>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js';
        hcplay(tz);
</script>

马黑黑 发表于 2025-2-25 12:27

全帖代码

<style>
        @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css';
        #tz { margin: 30px 0 30px calc(50% - 583px); background: url('https://638183.freep.cn/638183/t24/webp3/underground.webp') no-repeat center/cover; }
        #mplayer { width: 600px; bottom: 10px; background: none; box-shadow: none; color: snow; }
        #mplayer img { filter: invert(.8); }
        #fsbtn { bottom: 60px; border-color: snow; color: snow; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=34749557"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/50/12/video6363569454a33.mp4" autoplay loop muted></video>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js';
        hcplay(tz);
</script>

马黑黑 发表于 2025-2-25 12:28

模块使用说明：mp3player单曲js模块v1文档 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南 发表于 2025-2-25 13:48

谢谢黑黑老师，学习了。

马黑黑 发表于 2025-2-25 14:19

梦江南 发表于 2025-2-25 13:48
谢谢黑黑老师，学习了。

{:4_190:}

花飞飞 发表于 2025-2-25 18:59

这个看上去只有一丢丢代码。。。
配合使用说明。可以无限可能。。{:4_199:}
白老师作品就这么体贴。

花飞飞 发表于 2025-2-25 19:02

这个小播用了之前的细线条小播，无边框设计更漂亮啊。。。
难道也可以延续之前那些频谱之前的进度条。。。
哈哈。。我天马行空想得多了。{:4_170:}

花飞飞 发表于 2025-2-25 19:03

音量显示做了调整，这次是竖版，更清楚了。。
这个更改要加分。。{:4_170:}

花飞飞 发表于 2025-2-25 19:03

音乐好听，全屏更加震撼。。完美。。。

红影 发表于 2025-2-25 19:06

跟着链接，以为跑到黑黑网站呢，结果跑这里来了。
首先看到音量调整变成竖直的，这样好，不影响时间数值的展示了{:4_173:}

红影 发表于 2025-2-25 19:08

索性现在这个里面回了，这个也漂亮，播放器在需要的时候才被召唤出来，而且纯净的样子也不错，没有了框的显示也觉得清爽呢{:4_187:}

小辣椒 发表于 2025-2-25 20:10

黑黑这个单曲播放器还加了音量的设置{:4_187:}

红影 发表于 2025-2-25 20:14

很玄妙的场景，这个制作很漂亮{:4_187:}

小辣椒 发表于 2025-2-25 20:15

这个单曲播放器也是好玩的，最近黑黑播放器教程出的多起来了{:4_170:}

马黑黑 发表于 2025-2-25 20:48

小辣椒 发表于 2025-2-25 20:15
这个单曲播放器也是好玩的，最近黑黑播放器教程出的多起来了
没有的，就是这两个，鼓捣来鼓捣去

朵拉 发表于 2025-2-25 20:59

漂亮，欣赏学习了{:4_204:}

马黑黑 发表于 2025-2-26 23:18

朵拉 发表于 2025-2-25 20:59
漂亮，欣赏学习了

感谢支持
页: [1]
查看完整版本: Rise Above（单曲v1示范）