论坛 › 音乐沙龙 › 界园志异

马黑黑 发表于 2026-4-3 18:53

界园志异

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css?v1';
.pa { z-index: 666; --bg: url('https://638183.freep.cn/638183/t24/w8/vy.webp') no-repeat center/cover; }
.bgprog { bottom: 20px; color: lightblue; }
.player { bottom: 35px; width: 120px; height: 120px; border-radius: 50%; }
.mlist { min-width: 145px; right: 20px; bottom: 10px; background: rgba(0,0,0,.35); backdrop-filter: blur(5px); }
.pd-vid { opacity: 1; mix-blend-mode: screen; }
.btnFs { left: 30px; bottom: 30px; color: lightblue; }
</style>

<div class="pa">
<audio></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/15/07/619cfe3a6c576.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/web/svg1/s001.svg" class="player rotate grayscale" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
<ol class="mlist"></ol>
</div>

<script>
var musics = [
    ['https://music.163.com/song/media/outer/url?id=3361684724', '界园志异'],
    ['https://music.163.com/song/media/outer/url?id=3361684725', '自有乾坤'],
    ['https://music.163.com/song/media/outer/url?id=3361683778', '盘桓千古'],
    ['https://music.163.com/song/media/outer/url?id=3361683779', '枕景'],
    ['https://music.163.com/song/media/outer/url?id=3361683780', '天不予'],
    ['https://music.163.com/song/media/outer/url?id=3361683781', '逍遥难'],
    ['https://music.163.com/song/media/outer/url?id=3361684726', '叙苍茫'],
    ['https://music.163.com/song/media/outer/url?id=3361683782', '岁识气象'],
    ['https://music.163.com/song/media/outer/url?id=3361683783', '巧筑八方'],
    ['https://music.163.com/song/media/outer/url?id=3361683784', '残卷'],
    ['https://music.163.com/song/media/outer/url?id=3361688785', '意难平'],
    ['https://music.163.com/song/media/outer/url?id=3361688786', '岁陵漫步'],
    ['https://music.163.com/song/media/outer/url?id=3361684727', '守矩为义'],
    ['https://music.163.com/song/media/outer/url?id=3361684728', '栖景室'],
    ['https://music.163.com/song/media/outer/url?id=3361684729', '破晦'],
];

loadJs('https://638183.freep.cn/638183/tzmaker/tz2026m.js');

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = () => {
      var tz = TZ('pa', musics);
      tz.start();
    };
    document.head.appendChild(script);
}
</script>

红影 发表于 2026-4-3 20:27

看着标题有点怪，原来是第一首曲子的曲名啊。
15首好曲，真够好好听一会的呢。
欣赏黑黑好帖{:4_199:}

红影 发表于 2026-4-3 20:30

这样的背景图场景很开阔，很适合放这些很大气的曲子。
正听到第二首《自有乾坤》，里面的鼓声好听{:4_199:}

红影 发表于 2026-4-3 20:36

乐曲的播放是随机的，听了几首，看它会不会重复，还好正听的几首没重复，虽然是随机的，还随机得挺好{:4_173:}

马黑黑 发表于 2026-4-3 21:26

红影 发表于 2026-4-3 20:36
乐曲的播放是随机的，听了几首，看它会不会重复，还好正听的几首没重复，虽然是随机的，还随机得挺好{:4_17 ...

很久以前就已经实现一个播放周期（全播放完）不重复的随机播放功能

马黑黑 发表于 2026-4-3 21:31

红影 发表于 2026-4-3 20:27
看着标题有点怪，原来是第一首曲子的曲名啊。
15首好曲，真够好好听一会的呢。
欣赏黑黑好帖

专辑的名称叫《岁的界园志异OST》，我只提取易于阅读的部分

小辣椒 发表于 2026-4-3 22:36

哇塞，多歌曲播放器，不错，欣赏黑黑的精彩分享{:4_187:}

马黑黑 发表于 2026-4-4 09:39

小辣椒 发表于 2026-4-3 22:36
哇塞，多歌曲播放器，不错，欣赏黑黑的精彩分享

这个使用音画帖快手做得，所以不提供代码了

红影 发表于 2026-4-4 13:42

马黑黑 发表于 2026-4-3 21:26
很久以前就已经实现一个播放周期（全播放完）不重复的随机播放功能

一个周期不重复的随机播放，这个真好。

红影 发表于 2026-4-4 13:43

马黑黑 发表于 2026-4-3 21:31
专辑的名称叫《岁的界园志异OST》，我只提取易于阅读的部分

嗯嗯，这个名很有特色{:4_204:}

杨帆 发表于 2026-4-4 16:04

代码简约，内容丰富，效果惊艳，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2026-4-4 19:51

杨帆 发表于 2026-4-4 16:04
代码简约，内容丰富，效果惊艳，谢谢马老师精彩分享

代码是由 音画帖快手 生成的

马黑黑 发表于 2026-4-4 20:03

红影 发表于 2026-4-4 13:43
嗯嗯，这个名很有特色

而且寓意深远

马黑黑 发表于 2026-4-4 20:05

红影 发表于 2026-4-4 13:42
一个周期不重复的随机播放，这个真好。

这个通常会维护两个数组，其中一个数字可以是简化的序列数组

红影 发表于 2026-4-5 20:09

马黑黑 发表于 2026-4-4 20:03
而且寓意深远

其实，这个名称挺难懂的，其他的曲子名都挺好懂，就这个。

红影 发表于 2026-4-5 20:10

马黑黑 发表于 2026-4-4 20:05
这个通常会维护两个数组，其中一个数字可以是简化的序列数组

原来是这样保证的不重复的随机{:4_199:}

马黑黑 发表于 2026-4-5 21:43

每

红影 发表于 2026-4-5 20:10
原来是这样保证的不重复的随机
一般都是这么个处理机制。

我的做法是原数组不变，然后另外维护一个存储序号的数组，这个序号数组没用完一个就删掉一个，直至木有了再重新生成，如此反复

马黑黑 发表于 2026-4-5 21:44

红影 发表于 2026-4-5 20:09
其实，这个名称挺难懂的，其他的曲子名都挺好懂，就这个。

了解曲作者的话，就什么都好懂

雨季工作室 发表于 2026-4-6 09:12

谢谢马黑黑老师精彩分享！

马黑黑 发表于 2026-4-6 12:24

雨季工作室 发表于 2026-4-6 09:12
谢谢马黑黑老师精彩分享！

{:4_191:}

查看完整版本: 界园志异