李子柒视频背景音乐精选①

马黑黑 发表于 2025-10-1 09:51

马黑黑 发表于 2025-10-1 09:51

帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/css/tz03.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/lzq1.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: rgba(255,0,0,.8); }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor!important; }
#mList { left: 20px; top: 20px; color: beige; border: 8px double beige; border-radius: 12px; background: rgba(20,100,0,.5); }
#mList > p { font-size: 18px; }
#mList > p:hover { font-weight: bold; }
.hLight { color: yellow; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25896403" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0fbdb9b80.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <defs>
         <linearGradient id="grd" x1="0" x2="0" y1="0" y2="0.5">
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="50%" stop-color="transparnet"></stop>
            <stop offset="100" stop-color="green"></stop>
         </radialGradient>
   </defs>
   <g id="g1" class="hue-rotate"><title>ALT+X</title></g>
   <g id="g2"><title>调节进度</title></g>
</svg>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog_mulplayer.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';

var dr = Dr.dr(progress);
dr.path('M0 0 C-80 -160,80 -160,0 0').addTo('g1').rotates(7);
dr.circle(0,0,100,'transparent').addTo('g1');
dr.path('M0 -180 Q-300 0,0 180').id('track').addTo('g2');
dr.path('M0 -180 Q-300 0,0 180').id('prog').addTo('g2');

var musics = [['493040259', 'Lough Leane'], ['32743520', '淮古遗殇'], ['5234029', '春城孤鹤'], ['1374481322', '淡淡思绪'], ['1828126637', '山泉之水'], ['1852657453', '拾荒'], ['1852656295', '纯真'], ['1992736898', '森林微雨'], ['1824713380', '山间小路'], ['304905', '心游太玄']].map(ar => ['https://music.163.com/song/media/outer/url?id=' + ar, ar]);

FS(pa, g1, musics);
</script>

马黑黑 发表于 2025-10-1 10:06

本帖最后由马黑黑于 2025-10-1 10:56 编辑

小播的构造不复杂，这里不再解释。说说歌词数组的创建：

   代码在第 41 行。声明一个数组名称 musics，数组赋值部分即等号后面是一个二维数组加 map 遍历方法的处理：二维数组部分是歌曲序号+歌名，map 部分是对前面匿名数组部分的遍历处理，将每一个子数组的歌曲序号部分在前面加上地址前缀并返回给等号左边的 musics 变量。

   为了让数组的构造清晰明了，可以看看下面的简单例子。在这个例子里，重构的数组将原始数组的每一个数组元素的第一个数组元素加上一个前缀 C ：

<div id="mydiv"></div>

<script>
const arr = [
   ['A', 'a'],
   ['B', 'b'],
   ['C', 'c'],
   ['D','d'],
   ['E', 'e'],
   ['F', 'f']
];

const new_arr = arr.map( ar => ['C' + ar, ar] );
mydiv.innerText = new_arr.join('\n');
</script>

歌曲数组则简化了一些细节，一气呵成。

梦江南 发表于 2025-10-1 10:20

黑黑老师，这帖的多首音乐帖子太美了。辛苦了！{:4_187:}

梦江南 发表于 2025-10-1 10:21

祝双节快乐！{:4_190:}

小辣椒 发表于 2025-10-1 13:22

梦江南发表于 2025-10-1 10:20
黑黑老师，这帖的多首音乐帖子太美了。辛苦了！

阿姨你速度太快了，刚才看见的就是今天发的教程，阿姨太优秀了{:4_199:}

小辣椒 发表于 2025-10-1 13:24

黑黑，这个列表加了边框和背景颜色，比上次那个更加完善，观赏效果也是好一点{:4_178:}

小辣椒 发表于 2025-10-1 13:24

这个制作漂亮的{:4_199:}

杨帆发表于 2025-10-1 17:03

漂亮！祝马老师国庆快乐{:4_191:}

红影发表于 2025-10-1 22:23

漂亮的多歌曲列表，鼠标触碰方才出现，点击可以任选歌曲。
这个对演示多歌曲内容特别好呢{:4_199:}

页: [1]

花潮论坛's Archiver

李子柒视频背景音乐精选①