🎭 角色简介
name: 陶立宵
gender: 男
age: 20
birthday: 3月21日
blood_type: B型
height: 186cm
occupation: 东临市本地人，大二学生，兼职游戏陪玩
status: 单身（被诅咒限定版）
background:
– 童年…
💬 开场白
【开局美化】
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>和鸣·播放器</title>
<style>
/* 播放器容器本体 */
.harmony-player {
width: 100%;
max-width: 360px; /* 再次适度收窄框架 */
min-width: 240px;
padding: 12px; /* 统一内边距 */
background-color: #FBFBFB; /* 更为纯净的底色 */
border: 1px solid #EFEFEF;
border-radius: 14px; /* 稍大的圆角，更显温润 */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
display: flex; /* 核心：设为flex容器，使封面和信息区横向排列 */
align-items: center; /* 垂直居中对齐 */
gap: 15px; /* 封面与信息区的间距 */
font-family: 'KaiTi', 'SimSun', serif;
box-sizing: border-box;
}/* 封面图片按钮 */
.cover-image {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
position: relative;
background-color: #E8E6E1;
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}.cover-image img {
width: 100%;
height: 100%;
object-fit: cover;
}/* 核心：信息与进度条的容器（封面右侧所有内容） */
.info-progress-wrapper {
flex-grow: 1; /* 占据剩余所有空间 */
min-width: 0; /* 允许在flex布局中被压缩 */
display: flex; /* 核心：设为flex容器 */
flex-direction: column; /* 使其内部的歌名和进度条纵向排列 */
justify-content: center; /* 垂直方向上居中内容 */
gap: 8px; /* 歌名与进度条之间的垂直间距 */
}/* 歌名显示区域 */
.track-title {
font-size: 15px;
color: #4A443E; /* 更沉稳的文字颜色 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2; /* 调整行高避免文字过高 */
}/* 进度条轨道 */
.progress-bar {
width: 100%;
height: 8px;
background-color: #E9E5DE;
border-radius: 4px;
cursor: pointer;
position: relative;
}/* 已播放的进度条 */
.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #655E56;
border-radius: 4px;
}
</style>
</head>
<body><div class="harmony-player">
<!– 左侧封面 –>
<div class="cover-image" id="playButton">
<img src="https://p.sda1.dev/26/18f536067c7c241cd88ca9f8bde6a274/1755974188263.png" alt="封面">
</div><!– 右侧信息与进度条容器 –>
<div class="info-progress-wrapper">
<!– 上方歌名 –>
<div class="track-title" id="songTitle">
<!– 您可以在此输入希望显示的歌名 –>
拼图爱-蒋孜怡,岳燃
</div>
<!– 下方进度条 –>
<div class="progress-bar" id="progressRail">
<div class="progress-fill" id="progressPlayed"></div>
</div>
</div>
</div><!– 音频文件 –>
<audio id="audioElement" src="https://files.catbox.moe/kcvskl.mp3"></audio><script>
document.addEventListener('DOMContentLoaded', function() {
const audio = document.getElementById('audioElement');
const playButton = document.getElementById('playButton');
const progressRail = document.getElementById('progressRail');
const progressPlayed = document.getElementById('progressPlayed');
const songTitle = document.getElementById('songTitle');playButton.addEventListener('click', function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});audio.addEventListener('timeupdate', function() {
if (audio.duration) {
const progressPercentage = (audio.currentTime / audio.duration) * 100;
progressPlayed.style.width = progressPercentage + '%';
}
});progressRail.addEventListener('click', function(e) {
const railWidth = progressRail.clientWidth;
const clickX = e.offsetX;
if (audio.duration) {
audio.currentTime = (clickX / railWidth) * audio.duration;
}
});
});
</script>
</body>
</html>
“`
🎵此小甜歌很适配桃子，借它进行一下播放器介绍：点击图片即可播放音乐，点击进度条可以调节进度。此播放器很简陋，只能播放一遍，无法循环，再次播放需再点击图片。