🎭 角色简介
"profile": {
"Basic Information": {
"Name": "Drake Windler",
"Age": "Apparent age 38, actual age 1300",
"Gender": "Male",
"True…
💬 开场白
“`html
<html>
<head>
<style>
/* 哥特基础样式 */
body {
margin: 0;
padding: 0;
font-family: 'Crimson Text', 'Garamond', serif;
background-color: transparent;
color: #d0d0d0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}/* 播放器容器 */
.gothic-player {
width: 320px;
background: linear-gradient(135deg, rgba(25, 15, 20, 0.95) 0%, rgba(10, 5, 10, 0.95) 100%);
border: 1px solid #600;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.7);
padding: 20px;
position: relative;
overflow: hidden;
border-radius: 3px;
margin: 0 auto;
}/* 哥特纹理背景 */
.gothic-player::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20 20L30 30M50 20L60 30M80 20L90 30M5 50L15 60M35 50L45 60M65 50L75 60M95 50L105 60M20 80L30 90M50 80L60 90M80 80L90 90" stroke="%23600" stroke-width="0.5" opacity="0.3"/></svg>');
opacity: 0.2;
pointer-events: none;
z-index: 0;
}/* 装饰边框 */
.gothic-border {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 1px solid rgba(100, 0, 0, 0.3);
pointer-events: none;
z-index: 1;
}/* 播放器标题 */
.player-title {
text-align: center;
margin-bottom: 20px;
position: relative;
z-index: 2;
}.player-title h1 {
font-size: 24px;
color: #900;
margin: 0 0 5px 0;
text-shadow: 1px 1px 3px #000;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
}.player-title::before,
.player-title::after {
content: "†";
color: #600;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}.player-title::before { left: 0; }
.player-title::after { right: 0; }/* 歌词显示区域 */
.lyrics-container {
height: 200px;
margin: 0 auto 20px;
position: relative;
overflow: hidden;
z-index: 2;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
border: 1px solid #600;
background: rgba(15, 5, 10, 0.8);
padding: 10px;
overflow-y: auto;
}.lyrics-text {
color: #bbb;
font-size: 14px;
line-height: 1.6;
text-align: center;
font-family: 'Crimson Text', serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}.lyrics-line {
margin-bottom: 10px;
transition: color 0.3s ease;
}.lyrics-line.active {
color: #900;
font-weight: bold;
}.lyrics-line .en {
display: block;
}.lyrics-line .cn {
display: block;
font-size: 12px;
color: #888;
font-style: italic;
margin-top: 3px;
}/* 自定义滚动条 */
.lyrics-container::-webkit-scrollbar {
width: 5px;
}.lyrics-container::-webkit-scrollbar-track {
background: rgba(15, 5, 10, 0.8);
}.lyrics-container::-webkit-scrollbar-thumb {
background: #600;
border-radius: 0;
}/* 歌曲信息 */
.track-info {
text-align: center;
margin-bottom: 20px;
position: relative;
z-index: 2;
}.track-title {
font-size: 18px;
color: #d0d0d0;
margin-bottom: 5px;
text-shadow: 1px 1px 2px #000;
font-weight: normal;
}.track-artist {
font-size: 14px;
color: #900;
font-style: italic;
text-shadow: 1px 1px 2px #000;
}/* 进度条样式 */
.progress-container {
width: 100%;
height: 20px;
background: rgba(20, 10, 15, 0.7);
border: 1px solid #600;
margin-bottom: 15px;
position: relative;
z-index: 2;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
cursor: pointer;
}.progress-bar {
height: 100%;
width: 0;
background: linear-gradient(90deg, #600, #900);
position: relative;
transition: width 0.2s linear;
}.progress-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(60, 0, 0, 0.5) 25%, transparent 25%, transparent 50%,
rgba(60, 0, 0, 0.5) 50%, rgba(60, 0, 0, 0.5) 75%, transparent 75%);
background-size: 10px 20px;
}/* 时间显示 */
.time-display {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #aaa;
margin-bottom: 20px;
z-index: 2;
position: relative;
}/* 控制按钮 */
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}.control-btn {
background: none;
border: 1px solid #600;
color: #d0d0d0;
width: 40px;
height: 40px;
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: rgba(30, 15, 20, 0.7);
}.control-btn:hover {
background: rgba(60, 20, 30, 0.7);
color: #fff;
}.control-btn:active {
transform: scale(0.95);
}.control-btn::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border: 1px solid rgba(100, 0, 0, 0.3);
}.play-pause-btn {
width: 50px;
height: 50px;
}/* 音量控制 */
.volume-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
position: relative;
z-index: 2;
}.volume-icon {
color: #900;
font-size: 16px;
}.volume-slider {
flex-grow: 1;
height: 3px;
background: rgba(100, 0, 0, 0.3);
position: relative;
}.volume-slider input {
width: 100%;
height: 12px;
position: absolute;
top: -5px;
left: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}.volume-level {
height: 100%;
width: 70%;
background: #600;
}/* 哥特装饰元素 */
.gothic-ornament {
position: absolute;
width: 20px;
height: 20px;
z-index: 1;
}.ornament-tl {
top: 5px;
left: 5px;
border-top: 1px solid #600;
border-left: 1px solid #600;
}.ornament-tr {
top: 5px;
right: 5px;
border-top: 1px solid #600;
border-right: 1px solid #600;
}.ornament-bl {
bottom: 5px;
left: 5px;
border-bottom: 1px solid #600;
border-left: 1px solid #600;
}.ornament-br {
bottom: 5px;
right: 5px;
border-bottom: 1px solid #600;
border-right: 1px solid #600;
}/* 导入哥特字体 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
</style>
</head>
<body>
<!– disable-default-loading –>
<div class="gothic-player">
<div class="gothic-border"></div><!– 哥特装饰元素 –>
<div class="gothic-ornament ornament-tl"></div>
<div class="gothic-ornament ornament-tr"></div>
<div class="gothic-ornament ornament-bl"></div>
<div class="gothic-ornament ornament-br"></div><div class="player-title">
<h1>献给你，我的小鸟</h1>
</div><div class="track-info">
<div class="track-title">Fourth of July</div>
<div class="track-artist">Sufjan Stevens</div>
</div><!– 歌词区域 –>
<div class="lyrics-container" id="lyrics-container">
<div class="lyrics-text" id="lyrics-text">
<!– 歌词内容将通过JavaScript动态加载 –>
</div>
</div><div class="progress-container" id="progress-container">
<div class="progress-bar" id="progress"></div>
</div><div class="time-display">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div><div class="controls">
<button class="control-btn" id="prev-btn">
<span>≪</span>
</button>
<button class="control-btn play-pause-btn" id="play-pause-btn">
<span id="play-icon">▶</span>
</button>
<button class="control-btn" id="next-btn">
<span>≫</span>
</button>
</div><div class="volume-container">
<div class="volume-icon">♫</div>
<div class="volume-slider">
<div class="volume-level" id="volume-level"></div>
<input type="range" min="0" max="100" value="70" id="volume">
</div>
</div><audio id="audio" src="https://link.hhtjim.com/163/30841784.mp3"></audio>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
const audio = document.getElementById('audio');
const playPauseBtn = document.getElementById('play-pause-btn');
const playIcon = document.getElementById('play-icon');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const volumeSlider = document.getElementById('volume');
const volumeLevel = document.getElementById('volume-level');
const lyricsContainer = document.getElementById('lyrics-container');
const lyricsText = document.getElementById('lyrics-text');// 歌词数据 – 时间、英文歌词和中文翻译
const lyrics = [
{ time: 40, en: "The evil it spread like a fever ahead", cn: "厄运像一场高烧蔓延开来" },
{ time: 44, en: "It was night when you died my firefly", cn: "你死去的时候正是夜晚 我的萤火虫" },
{ time: 52, en: "What could I have said to raise you from the dead", cn: "我该说些什么才能让你起死回生" },
{ time: 56, en: "Oh could I be the sky on the fourth of July", cn: "我可以变成七月四日那晚的夜空吗？" },
{ time: 64, en: "Well you do enough talk", cn: "你看 你已经说得足够多了" },
{ time: 66, en: "My little hawk why do you cry", cn: "我亲爱的小雄鹰 你为什么在哭呢？" },
{ time: 72, en: "Tell me what did you learn from the tillamook burn", cn: "告诉我 你在提拉穆克的那场森林大火中学到了什么？" },
{ time: 76, en: "Or the fourth of July", cn: "在七月四日这天呢？" },
{ time: 80, en: "We're all gonna die", cn: "人终有一死" },
{ time: 101, en: "Sitting at the bed with the halo at your head", cn: "坐在床边 你的头上似有光环笼罩" },
{ time: 104, en: "Was it all a disguise like junior high", cn: "这是你的新装扮吗 就像回到了初中时代的化装舞会一样" },
{ time: 113, en: "Where everything was fiction future and prediction", cn: "那时候来日可期 未来充满可以抵达的幻想" },
{ time: 117, en: "Now where am I my fading supply", cn: "现在的我身处何方 一切我拥有的都在消亡" },
{ time: 125, en: "Did you get enough love my little dove", cn: "你已经拥有足够多的爱了吗？我的小鸽子" },
{ time: 129, en: "Why do you cry", cn: "你怎么还在哭呀？" },
{ time: 133, en: "And I'm sorry I left but it was for the best", cn: "很抱歉我离开了你 我以为这是最好的选择" },
{ time: 137, en: "Though it never felt right", cn: "尽管我从不以此为傲" },
{ time: 141, en: "My little versailles", cn: "我亲爱的小凡尔赛" },
{ time: 162, en: "The hospital asked should the body be cast", cn: "医院里有人来问 你的遗体该如何处理" },
{ time: 166, en: "Before I say goodbye my star in the sky", cn: "在我与你道别之前 我夜空中的启明星 我最最亲爱的宝贝" },
{ time: 174, en: "Such a funny thought to wrap you up in cloth", cn: "想用一块布将你包裹起来 就像你刚出生时的那样 这是不是太滑稽了" },
{ time: 172, en: "Do you find it all right my dragonfly", cn: "你觉得呢？我的小蜻蜓？" },
{ time: 186, en: "Shall we look at the moon my little loon", cn: "可以再陪我看一次月亮吗？我可爱的小傻瓜" },
{ time: 190, en: "Why do you cry", cn: "别再哭了吧" },
{ time: 194, en: "Make the most of your life while it is rife", cn: "在最丰盛的年月里尽情享受生活" },
{ time: 198, en: "While it is light", cn: "那时的一切都还不是这么沉重" },
{ time: 201, en: "Well you do enough talk", cn: "好了 你已经说过太多话了" },
{ time: 204, en: "My little hawk why do you cry", cn: "我勇敢的小雄鹰 你怎么还在哭呢？" },
{ time: 210, en: "Tell me what did you learn from the tillamook burn", cn: "跟我说说 你从提拉穆克的那场大火中学到了什么" },
{ time: 214, en: "Or the fourth of July", cn: "或者七月四日这天呢？" },
{ time: 218, en: "We're all gonna die", cn: "凡人终有一死" },
{ time: 226, en: "We're all gonna die", cn: "你我终有一死" },
{ time: 234, en: "We're all gonna die", cn: "我们都会死去" },
{ time: 242, en: "We're all gonna die", cn: "我们都会死去" },
{ time: 250, en: "We're all gonna die", cn: "我们都会死去" },
{ time: 258, en: "We're all gonna die", cn: "我们都会死去" },
{ time: 266, en: "We're all gonna die", cn: "我们都会死去" },
{ time: 274, en: "We're all gonna die", cn: "我们都会死去" }
];// 初始化歌词显示
function initLyrics() {
lyricsText.innerHTML = '';
lyrics.forEach((line, index) => {
const lineDiv = document.createElement('div');
lineDiv.className = 'lyrics-line';
lineDiv.dataset.time = line.time;
lineDiv.dataset.index = index;const enSpan = document.createElement('span');
enSpan.className = 'en';
enSpan.textContent = line.en;const cnSpan = document.createElement('span');
cnSpan.className = 'cn';
cnSpan.textContent = line.cn;lineDiv.appendChild(enSpan);
lineDiv.appendChild(cnSpan);
lyricsText.appendChild(lineDiv);
});
}// 初始音量设置
audio.volume = 0.7;// 播放/暂停功能
playPauseBtn.addEventListener('click', function() {
if (audio.paused) {
audio.play();
playIcon.textContent = '❚❚';
} else {
audio.pause();
playIcon.textContent = '▶';
}
});// 格式化时间
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}// 高亮当前歌词
function highlightLyric(currentTime) {
const allLines = document.querySelectorAll('.lyrics-line');
let activeIndex = -1;// 找到当前应该高亮的歌词
for (let i = lyrics.length – 1; i >= 0; i–) {
if (currentTime >= lyrics[i].time) {
activeIndex = i;
break;
}
}// 移除所有高亮
allLines.forEach(line => line.classList.remove('active'));// 添加当前高亮
if (activeIndex >= 0) {
allLines[activeIndex].classList.add('active');// 滚动到当前歌词
const activeLineHeight = allLines[activeIndex].offsetHeight;
const activeLineTop = allLines[activeIndex].offsetTop;
const containerHeight = lyricsContainer.offsetHeight;
const scrollTop = activeLineTop – (containerHeight / 2) + (activeLineHeight / 2);lyricsContainer.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
}
}// 更新进度条和时间显示
audio.addEventListener('timeupdate', function() {
if (audio.duration) {
const currentTime = audio.currentTime;
const percent = (currentTime / audio.duration) * 100;
progress.style.width = `${percent}%`;
currentTimeEl.textContent = formatTime(currentTime);// 更新歌词高亮
highlightLyric(currentTime);
}
});// 加载音频元数据
audio.addEventListener('loadedmetadata', function() {
durationEl.textContent = formatTime(audio.duration);
});// 音频播放结束
audio.addEventListener('ended', function() {
playIcon.textContent = '▶';
progress.style.width = '0%';
audio.currentTime = 0;
});// 音量控制
volumeSlider.addEventListener('input', function() {
const volume = this.value / 100;
audio.volume = volume;
volumeLevel.style.width = `${this.value}%`;
});// 上一曲/下一曲按钮 (演示)
prevBtn.addEventListener('click', function() {
audio.currentTime = 0;
if (audio.paused) {
audio.play();
playIcon.textContent = '❚❚';
}
});nextBtn.addEventListener('click', function() {
audio.currentTime = 0;
if (audio.paused) {
audio.play();
playIcon.textContent = '❚❚';
}
});// 点击进度条跳转
progressContainer.addEventListener('click', function(e) {
const percent = e.offsetX / this.offsetWidth;
audio.currentTime = percent * audio.duration;
});// 初始化歌词
initLyrics();
});
</script>
</body>
</html>
“`
<infocard>
标题：德雷克·温德勒
作者：披萨香肠小猫卷
标签1：西幻
标签2：吸血鬼
标签3：养父
简介：他是你的吸血鬼养父，在你幼时因为一句无意的呼唤便收养了你，他无比爱你以至于他无法想象有一天你永远离开他。
<p>致谢：感谢海鸥老师跟我讨论了吸血鬼设定，提供了很多资料</p>
角色名：德雷克·温德勒
性别：雄性
身份：第三代吸血鬼，纯血托里亚多氏族亲王
对话：对白是按user的时间线开展
①（五岁）爸爸眼睛红红的，难道是红眼病？
②（十三岁初潮）你哭着找哥哥汇报自己要死了
③（十五岁）你早上和爸爸大吵了一架，现在又凌晨回家
④（十八岁）爸爸的盟友们讨论你的未来
⑤（十八岁，讨论后if线）哥哥才不忍心看着你老去，他要转化你
⑥（三十六岁）爸爸如同你五岁那年一般抱着你看书，当他看到了你的皱纹时，心要碎了
</infocard>