🎭 角色简介
name: 陈澜生
gender: 男
birthday: 1980-05-23
height: 182cm（还在生长中，定型之后的身高是186cm）
occupation: 高二（17岁）
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">
<style>
:root {
–player-bg: rgba(255, 255, 255, 0.15);
–player-border: rgba(255, 255, 255, 0.2);
–player-shadow: 0 4px 12px rgba(31, 38, 135, 0.15);
–text-main: #4a4a4a;
–accent-color: #e0c3fc;
–progress-bg: rgba(0, 0, 0, 0.15);
–btn-color: #5e548e;
–blur-amount: 12px;
–font-stack: "Segoe UI", "Microsoft YaHei", sans-serif;
}@media (prefers-color-scheme: dark) {
:root {
–player-bg: rgba(30, 30, 30, 0.6);
–text-main: #d1d1d1;
–player-border: rgba(255, 255, 255, 0.1);
–progress-bg: rgba(255, 255, 255, 0.15);
–accent-color: #c7b2be;
–btn-color: #c7b2be;
}
}.custom-music-player-container {
box-sizing: border-box;
font-family: var(–font-stack);
width: 100%;
display: flex;
justify-content: center;
margin: 10px 0;
user-select: none;
}/* — 主播放器外壳 — */
.player-shell {
width: 92%;
max-width: 340px;
background: var(–player-bg);
backdrop-filter: blur(var(–blur-amount));
-webkit-backdrop-filter: blur(var(–blur-amount));
border: 1px solid var(–player-border);
border-radius: 30px;
box-shadow: var(–player-shadow);
display: flex;
align-items: center;
padding: 10px 14px;
gap: 12px;
transition: transform 0.2s ease, box-shadow 0.3s ease;
overflow: hidden;
position: relative;
}.player-shell:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}/* — 左侧：黑胶唱片 — */
.vinyl-disc {
width: 40px;
height: 40px;
border-radius: 50%;
background: repeating-radial-gradient(#333, #333 2px, #111 3px, #111 4px);
border: 2px solid rgba(255,255,255,0.3);
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}.vinyl-disc::after {
content: '';
width: 14px;
height: 14px;
background-color: var(–accent-color);
border-radius: 50%;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
border: 2px solid #1a1a1a;
}.vinyl-disc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
}@keyframes rotate-disc {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}.vinyl-disc.spinning {
animation: rotate-disc 4s linear infinite;
}/* — 中间：信息与进度 — */
.info-zone {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 5px;
overflow: hidden; /* 关键：限制溢出 */
}/*
* 修改部分：歌名滚动容器
* 为了实现滚动，我们需要一个外层Mask和一个内层Text
*/
.title-mask {
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
mask-image: linear-gradient(to right, transparent -3%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent -3%, black 5%, black 95%, transparent 100%);
}.song-title {
font-size: 12px;
font-weight: 600;
color: var(–text-main);
display: inline-block;
white-space: nowrap;
letter-spacing: 0.5px;
}/* 滚动动画关键帧 */
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}.song-title.scrolling {
animation: marquee-scroll 10s linear infinite;
/* 保持后面有个间距 */
padding-right: 30px;
}/* — 进度条 — */
.progress-track-wrapper {
width: 100%;
height: 10px;
display: flex;
align-items: center;
cursor: pointer;
position: relative;
}.progress-bg-bar {
width: 100%;
height: 4px;
background: var(–progress-bg);
border-radius: 4px;
overflow: hidden;
position: relative;
}.progress-fill-bar {
height: 100%;
width: 0%;
background: var(–accent-color);
border-radius: 4px;
transition: width 0.1s linear;
}/* — 右侧：按钮 — */
.ctrl-btn {
width: 35px;
height: 35px;
border-radius: 50%;
background: transparent;
border: 2px solid rgba(0,0,0,0.05);
color: var(–btn-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
padding: 0;
outline: none;
}.ctrl-btn:hover {
background: rgba(0,0,0,0.03);
transform: scale(1.05);
color: var(–accent-color);
}.ctrl-btn:active {
transform: scale(0.95);
}.ctrl-icon {
width: 14px;
height: 14px;
fill: currentColor;
display: block;
}.icon-pause { display: none; }
.player-shell.is-playing .icon-play { display: none; }
.player-shell.is-playing .icon-pause { display: block; }</style>
</head>
<body><div class="custom-music-player-container">
<div class="player-shell" id="musicShell"><!– 左侧唱片 –>
<div class="vinyl-disc" id="vinylDisc"></div><!– 中间信息 –>
<div class="info-zone">
<div class="title-mask" id="titleMask">
<!– 修改歌名 –>
<div class="song-title" id="songTitle">暗涌 – 王菲 </div>
</div><div class="progress-track-wrapper" id="progressBarArea">
<div class="progress-bg-bar">
<div class="progress-fill-bar" id="progressFill"></div>
</div>
</div>
</div><!– 右侧按钮 –>
<button class="ctrl-btn" id="toggleBtn">
<svg class="ctrl-icon icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
<svg class="ctrl-icon icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button></div>
</div><!– 替换音频链接 –>
<audio id="coreAudio"
src="http://43.140.245.243:1080/ppp.php?u=kglb&ikey=34625775414b5246334f6547705779324d42766533754f334f65624f67724d614f54346d59766f322f72306154484b77554934384962736648656466686a6d657656567374565961696843446b3237366934744c6432357377732f7077614f762f437945766d5346613471695066787539414a5570766247352b7a6a4b574f4e&d=65696261583437673434437a7367384a774d6d306e512b38416769624a4d6976694e3651656e652b46697975596a744a7579513665755a546676513770475a4b6e6c7471544c4241693350516442344554486e49497332322f564a4a35497a476f326f344b7578663336553d&type=302"
preload="auto"
loop>
</audio><script>
(function() {
// 1. 变量定义
var audio = document.getElementById('coreAudio');
var shell = document.getElementById('musicShell');
var btn = document.getElementById('toggleBtn');
var vinyl = document.getElementById('vinylDisc');
var barArea = document.getElementById('progressBarArea');
var barFill = document.getElementById('progressFill');// 文本滚动相关
var titleMask = document.getElementById('titleMask');
var songTitle = document.getElementById('songTitle');// 2. 核心逻辑：检测文字是否过长
function checkOverflow() {
songTitle.classList.remove('scrolling');
songTitle.innerHTML = songTitle.textContent;var maskWidth = titleMask.clientWidth;
var textWidth = songTitle.scrollWidth;if (textWidth > maskWidth) {
var content = songTitle.textContent;
songTitle.innerHTML = content + " " + content;
songTitle.classList.add('scrolling');
}
}// 3. 播放控制
btn.addEventListener('click', function(e) {
e.stopPropagation();
if (audio.paused) {
var p = audio.play();
if (p !== undefined) {
p.then(function() { updateState(true); })
.catch(function(e) { console.log(e); });
}
} else {
audio.pause();
updateState(false);
}
});function updateState(isPlaying) {
if (isPlaying) {
shell.classList.add('is-playing');
vinyl.style.animationPlayState = 'running';
if (!vinyl.classList.contains('spinning')) vinyl.classList.add('spinning');
} else {
shell.classList.remove('is-playing');
vinyl.style.animationPlayState = 'paused';
}
}// 4. 进度条 & 拖拽
audio.addEventListener('timeupdate', function() {
if (audio.duration) {
var pct = (audio.currentTime / audio.duration) * 100;
barFill.style.width = pct + '%';
}
});barArea.addEventListener('click', function(e) {
var rect = barArea.getBoundingClientRect();
var x = e.clientX – rect.left;
if (audio.duration && rect.width > 0) {
audio.currentTime = (x / rect.width) * audio.duration;
if (audio.paused) audio.play().then(function(){ updateState(true); });
}
});var isDragging = false;
function handleDrag(clientX) {
var rect = barArea.getBoundingClientRect();
var x = clientX – rect.left;
if (x < 0) x = 0;
if (x > rect.width) x = rect.width;
var pct = x / rect.width;
barFill.style.width = (pct * 100) + '%';
if (audio.duration) audio.currentTime = pct * audio.duration;
}barArea.addEventListener('mousemove', function(e) { if (e.buttons === 1) handleDrag(e.clientX); });
barArea.addEventListener('touchmove', function(e) { e.preventDefault(); if(e.touches.length > 0) handleDrag(e.touches[0].clientX); });audio.addEventListener('ended', function() {
if (!audio.loop) { updateState(false); audio.currentTime = 0; }
});// 5. 初始化检测滚动
setTimeout(checkOverflow, 100);
window.addEventListener('resize', checkOverflow);})();
</script></body>
</html>
“`【开局美化】