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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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[0], ar[1]]);
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[0], ar[1]] );
mydiv.innerText = new_arr.join('\n');
</script>

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