马黑黑 发表于 2026-5-4 15:35

梨雨夜归人（黄龄杂集）

<style>
.pa { margin: 20px auto; width: 1200px; height: 800px; left: calc(50% - 81px); transform: translateX(-50%); background: url('https://638183.freep.cn/638183/t24/w8/hl.webp') no-repeat center/cover; box-shadow: 3px 4px 8px gray; position: relative; display: grid; place-items: center; z-index: 601; --opacity: 0; }
.player { width: 420px; bottom: 10px; right: 20px; color: gold; }
.pd-vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); -webkit-mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); pointer-events: none; }
.btnFs { top: 20px; right: 20px; color: gold; }
</style>

<div class="pa">
    <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
</div>

<script>
const options = {
    pa: '.pa',
    urls: [
      ['https://music.163.com/song/media/outer/url?id=3377488400', '梨雨夜归人'],
      ['https://music.163.com/song/media/outer/url?id=3330497350', '女儿心如水'],
      ['https://music.163.com/song/media/outer/url?id=429450375', '来日方长 - 薛之谦 / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=3324041041', '西(XI) - ONER / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=1817661979', '入画江南'],
      ['https://music.163.com/song/media/outer/url?id=1470415329', '达拉崩吧'],
      ['https://music.163.com/song/media/outer/url?id=1972605097', '青纹'],
      ['https://music.163.com/song/media/outer/url?id=27538128', '爱就爱了'],
    ],
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    const aud = new AudPlayer(options);
});

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
</script>

马黑黑 发表于 2026-5-4 15:36

帖子代码

<style>
.pa { margin: 20px auto; width: 1200px; height: 800px; left: calc(50% - 81px); transform: translateX(-50%); background: url('https://638183.freep.cn/638183/t24/w8/hl.webp') no-repeat center/cover; box-shadow: 3px 4px 8px gray; position: relative; display: grid; place-items: center; z-index: 1; --opacity: 0; }
.player { width: 420px; bottom: 10px; right: 20px; color: gold; }
.pd-vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); -webkit-mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); pointer-events: none; }
.btnFs { top: 20px; right: 20px; color: gold; }
</style>

<div class="pa">
    <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
</div>

<script>
const options = {
    pa: '.pa',
    urls: [
      ['https://music.163.com/song/media/outer/url?id=3377488400', '梨雨夜归人'],
      ['https://music.163.com/song/media/outer/url?id=3330497350', '女儿心如水'],
      ['https://music.163.com/song/media/outer/url?id=429450375', '来日方长 - 薛之谦 / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=3324041041', '西(XI) - ONER / 黄龄'],
      ['https://music.163.com/song/media/outer/url?id=1817661979', '入画江南'],
      ['https://music.163.com/song/media/outer/url?id=1470415329', '达拉崩吧'],
      ['https://music.163.com/song/media/outer/url?id=1972605097', '青纹'],
      ['https://music.163.com/song/media/outer/url?id=27538128', '爱就爱了'],
    ],
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    const aud = new AudPlayer(options);
});

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
</script>

马黑黑 发表于 2026-5-4 15:37

本帖测试 Audio Player 类运行效果。插件源码和相关说明请查阅：

      【新提醒】Audio Player类（初稿） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南 发表于 2026-5-4 16:08

都会隐藏哦，图图太漂亮啦！{:4_187:}

红影 发表于 2026-5-4 16:45

听了《达拉崩吧》，黄龄的演唱太厉害了，也差不多有周深的转化模仿多个角色的本事了。
这一组黄龄的歌太好听了，听得沉醉了{:4_187:}

红影 发表于 2026-5-4 16:51

光顾着听歌了，都忘了黑黑的帖子是测试 Audio Player 类运行的。{:4_173:}
恭喜黑黑，测试很成功，左右键可以不管随机队列，列表箭头能很方便地展示列表。{:4_187:}

马黑黑 发表于 2026-5-4 17:04

红影 发表于 2026-5-4 16:51
光顾着听歌了，都忘了黑黑的帖子是测试 Audio Player 类运行的。
恭喜黑黑，测试很成功，左右键 ...

节日嚎！

马黑黑 发表于 2026-5-4 17:05

红影 发表于 2026-5-4 16:45
听了《达拉崩吧》，黄龄的演唱太厉害了，也差不多有周深的转化模仿多个角色的本事了。
这一组黄龄的歌太好 ...

曲艺专业修成揉进了演唱，成为独特的演唱风格

马黑黑 发表于 2026-5-4 17:05

梦江南 发表于 2026-5-4 16:08
都会隐藏哦，图图太漂亮啦！

节日嚎！

红影 发表于 2026-5-4 19:58

马黑黑 发表于 2026-5-4 17:04
节日嚎！

谢谢黑黑，一起嚎{:4_173:}

红影 发表于 2026-5-4 19:59

马黑黑 发表于 2026-5-4 17:05
曲艺专业修成揉进了演唱，成为独特的演唱风格

哦，黑黑还挺了解的，我只是觉得好听，还不知道她的发展历程呢。

马黑黑 发表于 2026-5-4 22:20

红影 发表于 2026-5-4 19:59
哦，黑黑还挺了解的，我只是觉得好听，还不知道她的发展历程呢。

黄龄是上海人，一路顺风顺水

马黑黑 发表于 2026-5-4 22:20

红影 发表于 2026-5-4 19:58
谢谢黑黑，一起嚎

一起嚎嚎最嚎

红影 发表于 2026-5-4 23:03

马黑黑 发表于 2026-5-4 22:20
黄龄是上海人，一路顺风顺水

最早听的她的歌是她于许嵩合唱的《惊鸿一面》，那时就觉得她的歌很有特色。

红影 发表于 2026-5-4 23:04

马黑黑 发表于 2026-5-4 22:20
一起嚎嚎最嚎

能嚎就使劲嚎吧{:4_173:}

马黑黑 发表于 2026-5-5 08:51

红影 发表于 2026-5-4 23:04
能嚎就使劲嚎吧

感谢支持

马黑黑 发表于 2026-5-5 08:53

红影 发表于 2026-5-4 23:03
最早听的她的歌是她于许嵩合唱的《惊鸿一面》，那时就觉得她的歌很有特色。

风格独特，极具个性。走性感道路但不失高雅、端庄。其性感的营造无人能及，连声音都需要打上马赛克。

杨帆 发表于 2026-5-5 18:15

Audio Player 类运行效果测试顺畅，祝贺马老师再创新作{:4_176:}

马黑黑 发表于 2026-5-5 21:34

杨帆 发表于 2026-5-5 18:15
Audio Player 类运行效果测试顺畅，祝贺马老师再创新作

{:4_180:}

朵拉 发表于 2026-5-5 22:07

老师创意十足，学生已交作业，请您指正{:4_190:}
页: [1] 2
查看完整版本: 梨雨夜归人（黄龄杂集）