卡路里

马黑黑 · 发表于 2025-3-18 14:02

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

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

x

马黑黑 · 发表于 2025-3-18 14:03

<style>
    @import 'https://638183.freep.cn/638183/web/ku/dbplayer.css';
    #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/5/calorie.jpg') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
    <audio id="audio" src="https://music.163.com/song/media/outer/url?id=1294924781" autoplay loop></audio>
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/15/19/59/41/video6504472dc0023.mp4" loop muted></video>
</div>

<script type="module">
import { dbplay } from 'https://638183.freep.cn/638183/web/ku/dbplayer.js';

var lrc = `
[00:00.31]孟美岐：\n[00:17.56]每天起床第一句 先给自己打个气\n[00:21.04]吴宣仪：\n[00:21.41]每次多吃一粒米 都要说声对不起\n[00:24.60]段奥娟：\n[00:25.02]魔镜魔镜看看我 我的锁骨在哪里\n[00:28.19]紫宁：\n[00:28.52]美丽 我要美丽 我要变成万人迷\n[00:32.16]合：\n[00:32.32]Pose pose\n[00:34.13]我要变成万人迷\n[00:35.76]Pose pose\n[00:37.70]徐梦洁：\n[00:39.51]为了变成小蛮腰 天天提着一口气\n[00:42.76]赖美云：\n[00:43.15]为了穿上比基尼 吃草吃成沙拉精\n[00:46.47]傅菁：\n[00:46.80]天生丽质难自弃 可惜吃啥我都不腻\n[00:50.18]合：\n[00:50.32]努力 我要努力 我要变成万人迷\n[00:53.75]李紫婷/赖美云/紫宁/徐梦洁：\n[00:54.98]Wow\n[00:56.70]吴宣仪/孟美岐/段奥娟/傅菁：\n[00:57.62]卡路里卡路里卡路\n[00:59.33]卡路里卡路里卡路\n[01:01.15]卡路里卡路里卡路\n[01:02.95]卡路里卡路里卡路\n[01:04.75]合：\n[01:04.91]卡路里我的天敌\n[01:06.64]杨超越：\n[01:07.13]燃烧我的卡路里\n[01:08.24]合：\n[01:08.63]拜拜 甜甜圈 珍珠奶茶方便面\n[01:12.01]火锅米饭大盘鸡\n[01:13.42]孟美岐/吴宣仪：\n[01:14.08]拿走拿走别客气\n[01:15.65]合：\n[01:15.80]拜拜 咖啡因 戒掉可乐戒油腻\n[01:19.32]沙发外卖玩游戏\n[01:21.15]Yamy/Sunnee：\n[01:21.50]别再熬夜伤身体\n[01:22.82]合：\n[01:22.97]来来 后转体 高温瑜伽仰卧起\n[01:26.51]动感单车普拉提\n[01:28.15]赖美云/徐梦洁：\n[01:29.03]保温杯里泡枸杞\n[01:30.26]合：\n[01:30.41]来来 深呼吸 晨跑夜跑游几米\n[01:33.83]平板哑铃划船机 不达目的不放弃\n[01:43.86]吴宣仪：\n[01:46.65]为了变成小蛮腰 天天提着一口气\n[01:50.06]孟美岐：\n[01:50.46]为了穿上比基尼 吃草吃成沙拉精\n[01:53.75]李紫婷：\n[01:54.14]天生丽质难自弃 可惜吃啥我都不腻\n[01:57.52]合：\n[01:57.70]努力 我要努力 我要变成万人迷\n[02:01.26]李紫婷/赖美云/紫宁/徐梦洁：\n[02:02.51]Wow\n[02:04.28]吴宣仪/孟美岐/段奥娟/傅菁：\n[02:05.18]卡路里卡路里卡路\n[02:06.68]卡路里卡路里卡路\n[02:08.39]卡路里卡路里卡路\n[02:10.20]卡路里卡路里卡路\n[02:12.02]合：\n[02:12.17]卡路里我的天敌\n[02:13.79]杨超越：\n[02:14.21]燃烧我的卡路里\n[02:15.73]合：\n[02:15.88]拜拜 甜甜圈 珍珠奶茶方便面\n[02:19.29]火锅米饭大盘鸡 拿走拿走别客气\n[02:22.96]拜拜 咖啡因 戒掉可乐戒油腻\n[02:26.56]沙发外卖玩游戏 别再熬夜伤身体\n[02:30.23]来来 后转体 高温瑜伽仰卧起\n[02:33.90]动感单车普拉提 保温杯里泡枸杞\n[02:37.50]来来 深呼吸 晨跑夜跑游几米\n[02:41.16]平板哑铃划船机 不达目的不放弃\n[02:44.58]Yamy/Sunnee（Rap）：\n[02:45.15]Yamy：\n[02:45.18]奇了怪了 小的时候明明是 妈妈说\n[02:46.39]吃光盘中餐粒粒 皆辛苦\n[02:48.34]Sunnee：\n[02:48.49]直到最爱的裙子的扣子都系不上了\n[02:49.99]Yamy：\n[02:50.11]原来吃得掉 甩不掉 更辛苦\n[02:51.84]Yamy：\n[02:52.34]希望 体重 秤是坏的\n[02:53.60]Sunnee：\n[02:53.63]帅哥 爱唐代的\n[02:54.03]合：\n[02:54.53]不如跟着节奏没在怕的 努努力\n[02:55.70]别让卡路里卡路里 卡住你\n[02:57.58]不达目的不放弃\n[02:59.22]杨超越：\n[02:59.67]燃烧我的卡路里\n[03:00.90]合：\n[03:01.12]拜拜 甜甜圈 珍珠奶茶方便面\n[03:04.71]火锅米饭大盘鸡 拿走拿走别客气\n[03:08.35]拜拜 咖啡因 戒掉可乐戒油腻\n[03:11.95]沙发外卖玩游戏 别再熬夜伤身体\n[03:15.68]来来 后转体 高温瑜伽仰卧起\n[03:19.28]动感单车普拉提 保温杯里泡枸杞\n[03:22.91]来来 深呼吸 晨跑夜跑游几米\n[03:26.59]平板哑铃划船机 不达目的不放弃\n[03:32.96]不放弃\n[03:35.90]燃烧我的卡路里\n[03:40.43]不放弃\n[03:43.23]燃烧我的卡路里\n[03:44.72]我要变成万人迷\n[03:45.72]-- End --
`;

dbplay(tz,lrc);
</script>

马黑黑 · 发表于 2025-3-18 14:16

这是改装过的豆包生成的“炫酷音频播放器”。我会在下一楼提供豆包创建的源码，这里说说播放器模块的使用配置：

一、可以定制界面颜色

在帖子主元素，例如 id="tz" 标签对应的CSS选择器 #tz { ... } 大括号里加入：

--bg: #666; --color: white; --hlcolor: yellow; --track: gray;

其中，--bg 变量是播放器面板背景色，--color 是前景色、按钮边框颜色，--hlcolor 是LRC高亮颜色、按钮颜色、进度指示色，--track 是播放进度条底色。

二、引用CSS资源

参照帖子代码第 2 行。同时，帖子主元素需要 class="pa" 指定引用CSS资源的类选择器。

三、引用播放器JS模块

参照帖子代码第 12 行。注意 script 标签需要 type=“module" 指定类型，标签内的变量都必须声明。

然后需要提供原生LRC歌词变量，参阅代码第 14 、15 、16 行。内部歌词可以分行谢，也可以用 \n 代替分行。

使用 dbplay(帖子主元素, LRC歌词变量); 调用播放器模块。

马黑黑 · 发表于 2025-3-18 14:18

【附】豆包创建的”炫酷音频播放器“源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷音频播放器</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #121212;
color: white;
}
.audio-player {
width: 400px;
background-color: #222;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
padding: 20px;
text-align: center;
}
.audio-player audio {
width: 100%;
margin-bottom: 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.controls button {
background-color: #1db954;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 20px;
margin: 0 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #1ed760;
}
.progress {
width: 100%;
height: 10px;
background-color: #444;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.progress-bar {
height: 100%;
background-color: #1db954;
width: 0;
border-radius: 5px;
}
.lyrics {
height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #1db954 #444;
}
.lyrics p {
margin: 5px 0;
opacity: 0.5;
transition: opacity 0.3s;
}
.lyrics p.highlight {
opacity: 1;
color: #1db954;
}
</style>
</head>
<body>
<div class="audio-player">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=1294924781"></audio>
<div class="controls">
<button id="play-pause">▶</button>
</div>
<div class="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="lyrics" id="lyrics"></div>
</div>
<script>
const audio = document.getElementById('audio');
const playPauseButton = document.getElementById('play-pause');
const progressBar = document.getElementById('progress-bar');
const lyricsContainer = document.getElementById('lyrics');
let isPlaying = false;
let lyrics = [];
// 解析 LRC 歌词
function parseLyrics(lrcText) {
const lines = lrcText.split('\n');
for (let line of lines) {
const match = line.match(/^\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)$/);
if (match) {
const minutes = parseInt(match[1]);
const seconds = parseInt(match[2]);
const milliseconds = parseInt(match[3]);
const text = match[4];
const time = minutes * 60 + seconds + milliseconds / 1000;
lyrics.push({ time, text });
}
}
lyrics.sort((a, b) => a.time - b.time);
for (let lyric of lyrics) {
const p = document.createElement('p');
p.textContent = lyric.text;
lyricsContainer.appendChild(p);
}
}
// 更新播放进度条
function updateProgress() {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = `${progress}%`;
// 更新歌词高亮
for (let i = 0; i < lyrics.length; i++) {
const lyric = lyrics[i];
const nextLyric = lyrics[i + 1];
const p = lyricsContainer.children[i];
if (audio.currentTime >= lyric.time && (!nextLyric || audio.currentTime < nextLyric.time)) {
p.classList.add('highlight');
// 自动滚动歌词
p.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
} else {
p.classList.remove('highlight');
}
}
}
// 播放/暂停按钮点击事件
playPauseButton.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
playPauseButton.textContent = '▶';
} else {
audio.play();
playPauseButton.textContent = '⏸';
}
isPlaying = !isPlaying;
});
// 音频时间更新事件
audio.addEventListener('timeupdate', updateProgress);
// 模拟加载 LRC 歌词
const lrcText = `
[00:02.31]孟美岐：
[00:17.56]每天起床第一句先给自己打个气
[00:21.04]吴宣仪：
[00:21.41]每次多吃一粒米都要说声对不起
[00:24.60]段奥娟：
[00:25.02]魔镜魔镜看看我我的锁骨在哪里
[00:28.19]紫宁：
[00:28.52]美丽我要美丽我要变成万人迷
[00:32.16]合：
[00:32.32]Pose pose
[00:34.13]我要变成万人迷
[00:35.76]Pose pose
[00:37.70]徐梦洁：
[00:39.51]为了变成小蛮腰天天提着一口气
[00:42.76]赖美云：
[00:43.15]为了穿上比基尼吃草吃成沙拉精
[00:46.47]傅菁：
[00:46.80]天生丽质难自弃可惜吃啥我都不腻
[00:50.18]合：
[00:50.32]努力我要努力我要变成万人迷
[00:53.75]李紫婷/赖美云/紫宁/徐梦洁：
[00:54.98]Wow
[00:56.70]吴宣仪/孟美岐/段奥娟/傅菁：
[00:57.62]卡路里卡路里卡路
[00:59.33]卡路里卡路里卡路
[01:01.15]卡路里卡路里卡路
[01:02.95]卡路里卡路里卡路
[01:04.75]合：
[01:04.91]卡路里我的天敌
[01:06.64]杨超越：
[01:07.13]燃烧我的卡路里
[01:08.24]合：
[01:08.63]拜拜甜甜圈珍珠奶茶方便面
[01:12.01]火锅米饭大盘鸡
[01:13.42]孟美岐/吴宣仪：
[01:14.08]拿走拿走别客气
[01:15.65]合：
[01:15.80]拜拜咖啡因戒掉可乐戒油腻
[01:19.32]沙发外卖玩游戏
[01:21.15]Yamy/Sunnee：
[01:21.50]别再熬夜伤身体
[01:22.82]合：
[01:22.97]来来后转体高温瑜伽仰卧起
[01:26.51]动感单车普拉提
[01:28.15]赖美云/徐梦洁：
[01:29.03]保温杯里泡枸杞
[01:30.26]合：
[01:30.41]来来深呼吸晨跑夜跑游几米
[01:33.83]平板哑铃划船机不达目的不放弃
[01:43.86]吴宣仪：
[01:46.65]为了变成小蛮腰天天提着一口气
[01:50.06]孟美岐：
[01:50.46]为了穿上比基尼吃草吃成沙拉精
[01:53.75]李紫婷：
[01:54.14]天生丽质难自弃可惜吃啥我都不腻
[01:57.52]合：
[01:57.70]努力我要努力我要变成万人迷
[02:01.26]李紫婷/赖美云/紫宁/徐梦洁：
[02:02.51]Wow
[02:04.28]吴宣仪/孟美岐/段奥娟/傅菁：
[02:05.18]卡路里卡路里卡路
[02:06.68]卡路里卡路里卡路
[02:08.39]卡路里卡路里卡路
[02:10.20]卡路里卡路里卡路
[02:12.02]合：
[02:12.17]卡路里我的天敌
[02:13.79]杨超越：
[02:14.21]燃烧我的卡路里
[02:15.73]合：
[02:15.88]拜拜甜甜圈珍珠奶茶方便面
[02:19.29]火锅米饭大盘鸡拿走拿走别客气
[02:22.96]拜拜咖啡因戒掉可乐戒油腻
[02:26.56]沙发外卖玩游戏别再熬夜伤身体
[02:30.23]来来后转体高温瑜伽仰卧起
[02:33.90]动感单车普拉提保温杯里泡枸杞
[02:37.50]来来深呼吸晨跑夜跑游几米
[02:41.16]平板哑铃划船机不达目的不放弃
[02:44.58]Yamy/Sunnee（Rap）：
[02:45.15]Yamy：
[02:45.18]奇了怪了小的时候明明是妈妈说
[02:46.39]吃光盘中餐粒粒皆辛苦
[02:48.34]Sunnee：
[02:48.49]直到最爱的裙子的扣子都系不上了
[02:49.99]Yamy：
[02:50.11]原来吃得掉甩不掉更辛苦
[02:51.84]Yamy：
[02:52.34]希望体重秤是坏的
[02:53.60]Sunnee：
[02:53.63]帅哥爱唐代的
[02:54.03]合：
[02:54.53]不如跟着节奏没在怕的努努力
[02:55.70]别让卡路里卡路里卡住你
[02:57.58]不达目的不放弃
[02:59.22]杨超越：
[02:59.67]燃烧我的卡路里
[03:00.90]合：
[03:01.12]拜拜甜甜圈珍珠奶茶方便面
[03:04.71]火锅米饭大盘鸡拿走拿走别客气
[03:08.35]拜拜咖啡因戒掉可乐戒油腻
[03:11.95]沙发外卖玩游戏别再熬夜伤身体
[03:15.68]来来后转体高温瑜伽仰卧起
[03:19.28]动感单车普拉提保温杯里泡枸杞
[03:22.91]来来深呼吸晨跑夜跑游几米
[03:26.59]平板哑铃划船机不达目的不放弃
[03:32.96]不放弃
[03:35.90]燃烧我的卡路里
[03:40.43]不放弃
[03:43.23]燃烧我的卡路里
[03:44.72]我要变成万人迷
[03:45.72]-- End --
`;
parseLyrics(lrcText);
</script>
</body>
</html>

复制代码

马黑黑 · 发表于 2025-3-18 14:21

上面是第一版源码，功能不太完整。要求豆包改进，这是第二版也是终版源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷音频播放器</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #121212;
color: white;
}
.audio-player {
width: 400px;
background-color: #222;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
padding: 20px;
text-align: center;
}
.audio-player audio {
width: 100%;
margin-bottom: 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.controls button {
background-color: #1db954;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 20px;
margin: 0 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #1ed760;
}
.progress {
width: 100%;
height: 10px;
background-color: #444;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
cursor: pointer;
}
.progress-bar {
height: 100%;
background-color: #1db954;
width: 0;
border-radius: 5px;
}
.lyrics {
height: 200px;
padding: 8px 0;
overflow: hidden;
}
.lyrics p {
margin: 5px 0;
font-size: 15px;
opacity: 0.5;
transition: opacity 0.5s;
}
.lyrics p.highlight {
opacity: 1;
font-size: 18px;
font-weight: bold;
color: #1db954;
}
</style>
</head>
<body>
<div class="audio-player">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=1294924781" autoplay loop></audio>
<div class="controls">
<button id="play-pause">▶</button>
</div>
<div class="progress" id="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="lyrics" id="lyrics"></div>
</div>
<script>
const audio = document.getElementById('audio');
const playPauseButton = document.getElementById('play-pause');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const lyricsContainer = document.getElementById('lyrics');
let isPlaying = false;
let lyrics = [];
// 解析 LRC 歌词
function parseLyrics(lrcText) {
const lines = lrcText.split('\n');
for (let line of lines) {
const match = line.match(/^\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)$/);
if (match) {
const minutes = parseInt(match[1]);
const seconds = parseInt(match[2]);
const milliseconds = parseInt(match[3]);
const text = match[4];
const time = minutes * 60 + seconds + milliseconds / 1000;
lyrics.push({ time, text });
}
}
lyrics.sort((a, b) => a.time - b.time);
for (let lyric of lyrics) {
const p = document.createElement('p');
p.textContent = lyric.text;
lyricsContainer.appendChild(p);
}
}
// 更新播放进度条
function updateProgress() {
const progressValue = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = `${progressValue}%`;
// 更新歌词高亮
for (let i = 0; i < lyrics.length; i++) {
const lyric = lyrics[i];
const nextLyric = lyrics[i + 1];
const p = lyricsContainer.children[i];
if (audio.currentTime >= lyric.time && (!nextLyric || audio.currentTime < nextLyric.time)) {
p.classList.add('highlight');
// 自动滚动歌词
p.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
} else {
p.classList.remove('highlight');
}
}
}
// 播放/暂停按钮点击事件
playPauseButton.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
playPauseButton.textContent = '▶';
} else {
audio.play();
playPauseButton.textContent = '⏸';
}
isPlaying = !isPlaying;
});
// 音频时间更新事件
audio.addEventListener('timeupdate', updateProgress);
// 进度条点击事件
progress.addEventListener('click', (event) => {
const rect = progress.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const progressWidth = rect.width;
const clickPercentage = clickX / progressWidth;
const newTime = clickPercentage * audio.duration;
audio.currentTime = newTime;
});
// 模拟加载 LRC 歌词
const lrcText = `
[00:02.31]孟美岐：
[00:17.56]每天起床第一句先给自己打个气
[00:21.04]吴宣仪：
[00:21.41]每次多吃一粒米都要说声对不起
[00:24.60]段奥娟：
[00:25.02]魔镜魔镜看看我我的锁骨在哪里
[00:28.19]紫宁：
[00:28.52]美丽我要美丽我要变成万人迷
[00:32.16]合：
[00:32.32]Pose pose
[00:34.13]我要变成万人迷
[00:35.76]Pose pose
[00:37.70]徐梦洁：
[00:39.51]为了变成小蛮腰天天提着一口气
[00:42.76]赖美云：
[00:43.15]为了穿上比基尼吃草吃成沙拉精
[00:46.47]傅菁：
[00:46.80]天生丽质难自弃可惜吃啥我都不腻
[00:50.18]合：
[00:50.32]努力我要努力我要变成万人迷
[00:53.75]李紫婷/赖美云/紫宁/徐梦洁：
[00:54.98]Wow
[00:56.70]吴宣仪/孟美岐/段奥娟/傅菁：
[00:57.62]卡路里卡路里卡路
[00:59.33]卡路里卡路里卡路
[01:01.15]卡路里卡路里卡路
[01:02.95]卡路里卡路里卡路
[01:04.75]合：
[01:04.91]卡路里我的天敌
[01:06.64]杨超越：
[01:07.13]燃烧我的卡路里
[01:08.24]合：
[01:08.63]拜拜甜甜圈珍珠奶茶方便面
[01:12.01]火锅米饭大盘鸡
[01:13.42]孟美岐/吴宣仪：
[01:14.08]拿走拿走别客气
[01:15.65]合：
[01:15.80]拜拜咖啡因戒掉可乐戒油腻
[01:19.32]沙发外卖玩游戏
[01:21.15]Yamy/Sunnee：
[01:21.50]别再熬夜伤身体
[01:22.82]合：
[01:22.97]来来后转体高温瑜伽仰卧起
[01:26.51]动感单车普拉提
[01:28.15]赖美云/徐梦洁：
[01:29.03]保温杯里泡枸杞
[01:30.26]合：
[01:30.41]来来深呼吸晨跑夜跑游几米
[01:33.83]平板哑铃划船机不达目的不放弃
[01:43.86]吴宣仪：
[01:46.65]为了变成小蛮腰天天提着一口气
[01:50.06]孟美岐：
[01:50.46]为了穿上比基尼吃草吃成沙拉精
[01:53.75]李紫婷：
[01:54.14]天生丽质难自弃可惜吃啥我都不腻
[01:57.52]合：
[01:57.70]努力我要努力我要变成万人迷
[02:01.26]李紫婷/赖美云/紫宁/徐梦洁：
[02:02.51]Wow
[02:04.28]吴宣仪/孟美岐/段奥娟/傅菁：
[02:05.18]卡路里卡路里卡路
[02:06.68]卡路里卡路里卡路
[02:08.39]卡路里卡路里卡路
[02:10.20]卡路里卡路里卡路
[02:12.02]合：
[02:12.17]卡路里我的天敌
[02:13.79]杨超越：
[02:14.21]燃烧我的卡路里
[02:15.73]合：
[02:15.88]拜拜甜甜圈珍珠奶茶方便面
[02:19.29]火锅米饭大盘鸡拿走拿走别客气
[02:22.96]拜拜咖啡因戒掉可乐戒油腻
[02:26.56]沙发外卖玩游戏别再熬夜伤身体
[02:30.23]来来后转体高温瑜伽仰卧起
[02:33.90]动感单车普拉提保温杯里泡枸杞
[02:37.50]来来深呼吸晨跑夜跑游几米
[02:41.16]平板哑铃划船机不达目的不放弃
[02:44.58]Yamy/Sunnee（Rap）：
[02:45.15]Yamy：
[02:45.18]奇了怪了小的时候明明是妈妈说
[02:46.39]吃光盘中餐粒粒皆辛苦
[02:48.34]Sunnee：
[02:48.49]直到最爱的裙子的扣子都系不上了
[02:49.99]Yamy：
[02:50.11]原来吃得掉甩不掉更辛苦
[02:51.84]Yamy：
[02:52.34]希望体重秤是坏的
[02:53.60]Sunnee：
[02:53.63]帅哥爱唐代的
[02:54.03]合：
[02:54.53]不如跟着节奏没在怕的努努力
[02:55.70]别让卡路里卡路里卡住你
[02:57.58]不达目的不放弃
[02:59.22]杨超越：
[02:59.67]燃烧我的卡路里
[03:00.90]合：
[03:01.12]拜拜甜甜圈珍珠奶茶方便面
[03:04.71]火锅米饭大盘鸡拿走拿走别客气
[03:08.35]拜拜咖啡因戒掉可乐戒油腻
[03:11.95]沙发外卖玩游戏别再熬夜伤身体
[03:15.68]来来后转体高温瑜伽仰卧起
[03:19.28]动感单车普拉提保温杯里泡枸杞
[03:22.91]来来深呼吸晨跑夜跑游几米
[03:26.59]平板哑铃划船机不达目的不放弃
[03:32.96]不放弃
[03:35.90]燃烧我的卡路里
[03:40.43]不放弃
[03:43.23]燃烧我的卡路里
[03:44.72]我要变成万人迷
[03:45.72]-- End --
`;
parseLyrics(lrcText);
</script>
</body>
</html>

复制代码

马黑黑 · 发表于 2025-3-18 14:24

我在豆包源码的基础上封装的CSS代码（配套做贴需要）：

.pa {
--bg: #1a3b5f;
--color: #c8f9dc;
--hlcolor: #e8cf11;
--track: #eee;
width: 1024px;
height: 640px;
display: grid;
place-items: center;
background: #eee;
box-shadow: 2px 2px 10px rgba(0,0,0,.6);
z-index: 1;
position: relative;
margin: 20px auto;
}
.audio-player {
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
background: var(--bg);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
padding: 10px;
text-align: center;
}
.lyrics {
height: 120px;
padding: 8px 0;
overflow: hidden;
color: var(--color);
}
.lyrics p {
margin: 5px 0;
font-size: 15px;
opacity: 0.5;
transition: opacity 0.5s;
}
.lyrics p.highlight {
opacity: 1;
font-size: 18px;
font-weight: bold;
color: var(--hlcolor);
}
.controls {
display: grid;
place-items: center;
margin-top: 10px;
}
.controls button {
background: none;
border: 3px solid var(--color);
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
transition: 0.3s;
display: grid;
place-items: center;
position: relative;
}
.controls button::after {
position: absolute;
content: '';
width: 50%;
height: 50%;
background: var(--hlcolor);
clip-path: var(--clip);
}
.controls button:hover {
filter: invert(.2);
}
.progress {
width: 100%;
height: 10px;
background: var(--track);
border-radius: 5px;
overflow: hidden;
margin-top: 10px;
cursor: pointer;
}
.progress-bar {
height: 100%;
background: var(--hlcolor);
width: 0;
border-radius: 5px;
}
.play {
--clip: polygon(10% 0, 100% 50%, 10% 100%);
}
.pause {
--clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}
.vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
pointer-events: none;
}

复制代码

马黑黑 · 发表于 2025-3-18 14:25

然后是 JS ES模块：

export function dbplay(pa, lrcText) {
if (pa instanceof Element === false || !lrcText) return;
pa.innerHTML += `
<div class="audio-player">
<div class="lyrics" id="lyrics"></div>
<div class="controls">
<button id="play-pause" class="pause"></button>
</div>
<div class="progress" id="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
</div>
`;
const audio = pa.querySelector('audio');
const playPauseButton = document.getElementById('play-pause');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const lyricsContainer = document.getElementById('lyrics');
const vids = pa.querySelectorAll('video');
let lyrics = [];
function parseLyrics(lrcText) {
const lines = lrcText.split('\n');
for (let line of lines) {
const match = line.match(/^\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)$/);
if (match) {
const minutes = parseInt(match[1]);
const seconds = parseInt(match[2]);
const milliseconds = parseInt(match[3]);
const text = match[4];
const time = minutes * 60 + seconds + milliseconds / 1000;
lyrics.push({ time, text });
}
}
lyrics.sort((a, b) => a.time - b.time);
for (let lyric of lyrics) {
const p = document.createElement('p');
p.textContent = lyric.text;
lyricsContainer.appendChild(p);
}
}
function updateProgress() {
const progressValue = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = `${progressValue}%`;
for (let i = 0; i < lyrics.length; i++) {
const lyric = lyrics[i];
const nextLyric = lyrics[i + 1];
const p = lyricsContainer.children[i];
if (audio.currentTime >= lyric.time && (!nextLyric || audio.currentTime < nextLyric.time)) {
p.classList.add('highlight');
p.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else {
p.classList.remove('highlight');
}
}
}
function mState() {
playPauseButton.className = audio.paused ? 'play' : 'pause';
audio.paused ? playvids(vids, false) : playvids(vids, true);
}
function playvids(vids, flag) {
if(!vids) return;
vids.forEach(vid => flag ? vid.play() : vid.pause());
}
playPauseButton.addEventListener('click', () => {
audio.paused ? audio.play() : audio.pause();
});
audio.addEventListener('timeupdate', updateProgress);
audio.addEventListener('playing', mState);
audio.addEventListener('pause', mState);
progress.addEventListener('click', (event) => {
const rect = progress.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const progressWidth = rect.width;
const clickPercentage = clickX / progressWidth;
const newTime = clickPercentage * audio.duration;
audio.currentTime = newTime;
});
parseLyrics(lrcText);
};