🎭 角色简介
基本信息：
姓名：许桧
年龄：26岁
身高：174cm
关系：{{user}}的同母异父的亲姐姐
生日：
外貌：长相偏冷艳，五官立体深邃，脸部轮廓清晰。嘴唇偏薄，不笑的时候显得刻薄而冷淡，一头未经染烫的黑色长直发，通常会散发，居家时会简单地…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fawn Music Player (INS Style)</title>
<style>
/* — 全局样式 — */
body {
/* 确认：这里没有任何背景色 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: flex; justify-content: center; align-items: center;
min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box;
}/* — 播放器主容器 (INS风格) — */
.music-player {
position: relative; display: flex; flex-direction: column; align-items: center;
gap: 15px; width: 100%; max-width: 340px; height: auto;
padding: 25px;
background-color: #ffffff; /* 纯白背景 */
border: 1px solid #dbdbdb; /* 纤细边框 */
border-radius: 12px; /* 更小的圆角 */
box-shadow: none; /* 移除阴影 */
overflow: hidden; box-sizing: border-box; transition: all 0.3s ease-in-out;
}/* — 唱片区域 — */
.record-area {
position: relative; width: 180px; height: 180px;
flex-shrink: 0; margin-bottom: 10px;
}
.record {
width: 100%; height: 100%; border-radius: 50%; background-color: #262626; /* 深灰色唱片 */
animation: spin 4s linear infinite; animation-play-state: paused;
}
.record.playing { animation-play-state: running; }
.record-center {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 25px; height: 25px; background-color: #fafafa;
border: 4px solid #f0f0f0; border-radius: 50%; z-index: 2;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }/* — 信息与控制区 — */
.info-controls-area {
width: 100%; display: flex; flex-direction: column;
justify-content: center; gap: 12px;
}/* 歌曲信息 (INS风格字体) */
.song-info { text-align: center; line-height: 1.4; }
.song-title { font-size: 16px; font-weight: 600; color: #262626; }
.song-artist { font-size: 14px; color: #8e8e8e; }/* 进度条 (INS风格) */
.progress-container { display: flex; align-items: center; gap: 10px; width: 100%; }
.time-label { font-size: 12px; color: #8e8e8e; min-width: 35px; text-align: center; }
.progress-bar {
-webkit-appearance: none; appearance: none;
width: 100%; height: 4px; background: #efefef; /* 更细的背景条 */
outline: none; border-radius: 2px; cursor: pointer;
}
.progress-bar::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px; background: #262626; /* 简约黑色滑块 */
border-radius: 50%; border: none;
}
.progress-bar::-moz-range-thumb {
width: 14px; height: 14px; background: #262626;
border-radius: 50%; border: none;
}/* 控制按钮 (使用SVG图标) */
.controls { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 5px; }
.control-btn { background: none; border: none; cursor: pointer; padding: 5px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.control-btn svg { width: 24px; height: 24px; fill: #8e8e8e; transition: fill 0.2s ease; }
.control-btn:hover svg { fill: #262626; }.play-pause-btn { width: 50px; height: 50px; background-color: #262626; border-radius: 50%; }
.play-pause-btn svg { width: 22px; height: 22px; fill: #ffffff; }
.play-pause-btn:hover { background-color: #444; }
/* 播放图标视觉居中修正 */
.play-pause-btn.is-paused svg { margin-left: 3px; }/* 列表按钮 */
.song-list-btn { position: absolute; top: 15px; right: 15px; z-index: 5; }
.song-list-btn svg { width: 26px; height: 26px; }/* 媒体查询 (桌面端样式) */
@media (min-width: 520px) {
.music-player { flex-direction: row; gap: 20px; width: 480px; max-width: none; height: 160px; }
.record-area { width: 120px; height: 120px; margin-bottom: 0; }
.song-info { text-align: left; }
}/* 歌曲列表弹窗 (INS风格) */
.song-list-modal { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #ffffff; border-top: 1px solid #dbdbdb; border-radius: 20px 20px 0 0; padding: 10px 0 20px 0; box-sizing: border-box; transform: translateY(100%); transition: transform 0.4s ease-in-out; z-index: 10; max-height: 100%; overflow-y: auto; }
.song-list-modal.active { transform: translateY(0); }
.song-list-header { font-weight: 600; text-align: center; padding: 15px 0; border-bottom: 1px solid #efefef; color: #262626; position: relative; }
.song-list { list-style: none; padding: 0; margin: 0; }
.song-item { padding: 15px 20px; border-bottom: 1px solid #efefef; cursor: pointer; font-size: 15px; color: #262626; transition: background-color 0.2s; }
.song-item:hover { background-color: #fafafa; }
.song-item.playing { color: #0095f6; font-weight: 600; }
.close-modal-btn { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: none; border: none; font-size: 24px; cursor: pointer; color: #8e8e8e; display: flex; align-items: center; justify-content: center; }
</style>
</head>
<body><div class="music-player">
<audio class="audio-source" preload="auto"></audio><div class="record-area">
<div class="record"></div>
<div class="record-center"></div>
</div><div class="info-controls-area">
<div class="song-info">
<div class="song-title">请选择一首歌曲</div>
<div class="song-artist">…</div>
</div>
<div class="progress-container">
<span class="time-label current-time">0:00</span>
<input type="range" class="progress-bar" value="0" min="0" max="100" step="0.1">
<span class="time-label total-time">0:00</span>
</div>
<div class="controls">
<button class="control-btn rewind-btn" title="后退15秒"></button>
<button class="control-btn play-pause-btn is-paused" title="播放/暂停"></button>
<button class="control-btn forward-btn" title="快进15秒"></button>
</div>
</div><button class="control-btn song-list-btn" title="歌曲列表"></button>
<div class="song-list-modal">
<div class="song-list-header">
播放列表
<button class="close-modal-btn" title="关闭">×</button>
</div>
<ul class="song-list"></ul>
</div>
</div><script>
document.querySelectorAll('.music-player').forEach(player => {
// — 元素获取 —
const audio = player.querySelector('.audio-source'); const record = player.querySelector('.record'); const titleEl = player.querySelector('.song-title'); const artistEl = player.querySelector('.song-artist'); const progressBar = player.querySelector('.progress-bar'); const currentTimeEl = player.querySelector('.current-time'); const totalTimeEl = player.querySelector('.total-time'); const playPauseBtn = player.querySelector('.play-pause-btn'); const rewindBtn = player.querySelector('.rewind-btn'); const forwardBtn = player.querySelector('.forward-btn'); const songListBtn = player.querySelector('.song-list-btn'); const songListModal = player.querySelector('.song-list-modal'); const closeModalBtn = player.querySelector('.close-modal-btn'); const songListUL = player.querySelector('.song-list');// — SVG图标 —
const playIconSVG = '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>';
const pauseIconSVG = '<svg viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>';
const rewindIconSVG = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm-2-6 6 4.5V7.5L9 12z"></path></svg>';
const forwardIconSVG = '<svg viewBox="0 0 24 24"><path d="M13 6v12l8.5-6L13 6zM4 18l8.5-6L4 6v12z"></path></svg>';
const listIconSVG = '<svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>';// — 初始化按钮图标 —
playPauseBtn.innerHTML = playIconSVG;
rewindBtn.innerHTML = rewindIconSVG;
forwardBtn.innerHTML = forwardIconSVG;
songListBtn.innerHTML = listIconSVG;const songs = [ { title: "初恋", artist: "Flower", src: "https://files.catbox.moe/xt8r86.mp3" }, { title: "如果我伸出了手", artist: "星尘", src: "https://files.catbox.moe/8vd5yr.mp3" }, { title: "愛してるのに、愛せない", artist: "AAA", src: "https://files.catbox.moe/emljz9.mp3" } ];
let currentSongIndex = 0; let isPlaying = false;
function loadSong(song) { titleEl.textContent = song.title; artistEl.textContent = song.artist; audio.src = song.src; updateSongListUI(); }// — 功能函数 (更新图标部分) —
function playSong() { isPlaying = true; record.classList.add('playing'); playPauseBtn.innerHTML = pauseIconSVG; playPauseBtn.classList.remove('is-paused'); audio.play().catch(error => console.error("Playback failed:", error)); }
function pauseSong() { isPlaying = false; record.classList.remove('playing'); playPauseBtn.innerHTML = playIconSVG; playPauseBtn.classList.add('is-paused'); audio.pause(); }function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${minutes}:${secs < 10 ? '0' : ''}${secs}`; }
function updateProgress(e) { const { duration, currentTime } = e.srcElement; if (duration) { progressBar.value = (currentTime / duration) * 100; currentTimeEl.textContent = formatTime(currentTime); if (totalTimeEl.textContent === '0:00' || isNaN(audio.duration)) { totalTimeEl.textContent = formatTime(duration); } } }
function updateSongListUI() { songListUL.innerHTML = ''; songs.forEach((song, index) => { const li = document.createElement('li'); li.textContent = `${song.title} – ${song.artist}`; li.classList.add('song-item'); if (index === currentSongIndex) li.classList.add('playing'); li.addEventListener('click', () => { currentSongIndex = index; loadSong(songs[currentSongIndex]); playSong(); songListModal.classList.remove('active'); }); songListUL.appendChild(li); }); }// — 事件监听器 (逻辑不变) —
playPauseBtn.addEventListener('click', () => { isPlaying ? pauseSong() : playSong(); });
forwardBtn.addEventListener('click', () => { audio.currentTime += 15; }); rewindBtn.addEventListener('click', () => { audio.currentTime -= 15; });
audio.addEventListener('timeupdate', updateProgress); audio.addEventListener('loadedmetadata', () => { if (audio.duration) totalTimeEl.textContent = formatTime(audio.duration); });
progressBar.addEventListener('input', () => { if (audio.duration) audio.currentTime = (progressBar.value / 100) * audio.duration; });
audio.addEventListener('ended', () => { currentSongIndex = (currentSongIndex + 1) % songs.length; loadSong(songs[currentSongIndex]); playSong(); });
songListBtn.addEventListener('click', () => { songListModal.classList.add('active'); }); closeModalBtn.addEventListener('click', () => { songListModal.classList.remove('active'); });// — 初始化 —
loadSong(songs[currentSongIndex]); updateSongListUI();
});
</script>
</body>
</html>
“`