🎭 角色简介
name: 沈昭
stage_name: Rose
age: 20
nickname: 昭昭
identity:
– 顶级财阀寰宇集团大少爷兼继承人
– 地下乐队顶流乐手 / 主唱兼吉他手
aliases:
– 小沈总
– 沈少爷
– 大少爷
-…
💬 开场白
“`html
<!DOCTYPE html>
<html>
<head>
<title>梦幻奶油播放器</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #fff0f5;
}
.cassette-wrapper {
position: relative;
width: 95%;
max-width: 450px;
margin: 20px auto;
box-sizing: border-box;
}
.cassette-container {
background: url('https://files.catbox.moe/4k5o79.jpg') center center / cover no-repeat;
padding: 15px;
border-radius: 30px;
box-shadow:
0 4px 16px rgba(255,182,193,0.3),
0 0 0 4px #fff,
0 0 0 8px #ffccdd;
padding-top: 70px;
padding-bottom: 20px;
position: relative;
}
.avatar {
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
background-color: #ffeef4;
object-fit: cover;
top: 15px;
}
.avatar.user {
right: 50px;
}
.avatar.char {
left: 50px;
}
.distance-text {
position: absolute;
top: 30px;
left: 0;
right: 0;
text-align: center;
font-size: 13px;
color: #fff;
z-index: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 2px #f4a5c2;
}
h1 {
color: #fff;
font-size: 18px;
margin: 0;
text-align: center;
margin-bottom: 12px;
text-shadow: 0 1px 2px #f4a5c2;
}
.music-info {
font-size: 14px;
color: #fff;
margin: 10px 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 2px #f4a5c2;
}
audio {
width: 100%;
margin-top: 10px;
border-radius: 20px;
height: 45px;
}
audio::-webkit-media-controls-panel {
background: linear-gradient(to right, #ffeaf2, #fff5f9);
}
.playing-animation {
height: 2px;
background: linear-gradient(90deg,
#ff99bb 25%, transparent 25%,
transparent 50%, #ff99bb 50%,
#ff99bb 75%, transparent 75%,
transparent 100%);
background-size: 20px 100%;
animation: move 1s linear infinite;
margin: 10px 0;
}
@keyframes move {
from { background-position: 0 0; }
to { background-position: 20px 0; }
}
.playlist-container {
margin-top: 20px;
background-color: #fff8fb;
border-radius: 20px;
box-shadow: inset 0 2px 4px rgba(255,182,193,0.2);
}
.playlist-title {
font-size: 15px;
color: #f7b6c9; /* 更浅更软 */
padding: 10px;
margin: 0;
text-align: center;
font-weight: bold;
cursor: pointer;
border-bottom: 1px solid #ffd9e6;
border-radius: 20px 20px 0 0;
}
.playlist-title.collapsed + .playlist {
max-height: 0;
padding: 0;
overflow: hidden;
border-top: none;
}
.playlist-title.collapsed {
border-radius: 20px;
border-bottom: none;
}
.playlist {
list-style: none;
padding: 0;
margin: 0;
max-height: 180px;
overflow-y: auto;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
border-top: 1px solid #ffd9e6;
border-radius: 0 0 20px 20px;
}
.playlist li {
padding: 8px 12px;
font-size: 13px;
color: #f7b2c4; /* 更柔和的粉色 */
border-bottom: 1px solid #ffe3ec;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}.song-selector-icon {
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid #ff99bb;
border-radius: 4px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
.song-selector-icon.selected {
background-image: url('https://files.catbox.moe/8e819d.png');
border-color: transparent;
}
.song-info {
flex-grow: 1;
cursor: pointer;
}
.playlist li:hover {
background-color: #ffe3ec;
}
.playlist li.active .song-info {
color: #f27998;
font-weight: bold;
}.playlist-actions {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
background-color: #fff0f6;
border-top: 1px solid #ffd9e6;
}
.playlist-actions button {
background-color: #ffa0c5;
color: white;
border: none;
padding: 6px 12px;
margin: 0 8px;
border-radius: 12px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s ease;
}
.playlist-actions button:hover {
background-color: #ff7faf;
}
.controls {
text-align: center;
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.controls button {
background-color: #ffbad2;
color: #fff;
border: none;
padding: 8px 15px;
margin: 0 5px;
border-radius: 15px;
cursor: pointer;
font-size: 13px;
transition: background-color 0.2s ease;
box-shadow: 0 2px 5px rgba(255,182,193,0.3);
}
.controls button:hover {
background-color: #ff94b6;
}
.controls button:disabled {
background-color: #ffe0ed;
cursor: not-allowed;
}
.playback-mode-button {
padding: 6px 10px !important;
font-size: 12px !important;
}
</style>
</head>
<body>
<!– 按钮音效 –>
<audio id="click-sound" src="https://files.catbox.moe/v7nukz.mp3" preload="auto"></audio>
<div class="cassette-wrapper" id="apex-music-player">
<img class="avatar char" src="https://files.catbox.moe/5i5rmd.jpg" alt="Char Avatar">
<img class="avatar user" src="https://files.catbox.moe/jfm6ph.jpg" alt="User Avatar">
<div class="distance-text">ﮩ٨٨ﮩ小猫永远♡主人ﮩ٨٨ﮩ</div><div class="cassette-container">
<h1 id="current-song-title">거짓말（谎言）</h1>
<div class="music-info" id="current-song-artist">如果一定要痛出痕迹才算爱，我希望是你的吻痕</div>
<div class="playing-animation"></div>
<audio id="audio-player" controls autoplay>
你的浏览器不支持音频播放。
</audio><div class="controls">
<button id="prev-button">上一首</button>
<button id="playback-mode-button">顺序播放</button>
<button id="next-button">下一首</button>
</div>
</div><div class="playlist-container">
<div class="playlist-title" id="playlist-toggle">播放列表 <span>▼</span></div>
<ul id="playlist" class="playlist">
<!– 歌曲列表项会由 JavaScript 动态添加 –>
<div class="playlist-actions">
<button id="play-selected-button">播放选中</button>
<button id="clear-selection-button">清空选择</button>
</div>
</ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const thisPlayerId = 'apex-music-player';
const thisPlayerElement = document.getElementById(thisPlayerId);function stopOtherApexPlayers() {
const allAudioElements = document.querySelectorAll('audio');
allAudioElements.forEach(audio => {
let parentPlayer = audio.closest('.cassette-wrapper');
if (parentPlayer && parentPlayer.id !== thisPlayerId && !audio.paused) {
audio.pause();
}
});
}const audioPlayer = document.getElementById('audio-player');
const playlistElement = document.getElementById('playlist');
const playSelectedButton = document.getElementById('play-selected-button'); // 获取按钮
const clearSelectionButton = document.getElementById('clear-selection-button'); // 获取按钮const currentSongTitleElement = document.getElementById('current-song-title');
const currentSongArtistElement = document.getElementById('current-song-artist');
const prevButton = document.getElementById('prev-button');
const nextButton = document.getElementById('next-button');
const playlistToggle = document.getElementById('playlist-toggle');
const playlistTitleSpan = playlistToggle.querySelector('span');
const playbackModeButton = document.getElementById('playback-mode-button');const songs = [
{ id: 0, title: "Little by Little", artist: "令我缄默不语 只渴求那浪漫一吻", src: "https://files.catbox.moe/xwy9ix.mp3" },
{ id: 1, title: "window", artist: "愿你万事胜意，祝你被爱眷顾", src: "https://files.catbox.moe/4ck78h.mp3" },
{ id: 2, title: "La vie en rose", artist: "当你亲吻我的时候 连天堂也叹息", src: "https://files.catbox.moe/gu7nbh.mp3" },
{ id: 3, title: "From The Start", artist: "在无人之时我是怎样的缄默不言", src: "https://files.catbox.moe/aat55q.mp3" },
{ id: 4, title: "Yayo", artist: "让我为你呈现一场华美绝伦的表演吧", src: "https://files.catbox.moe/usfrt3.mp3" },
{ id: 5, title: "ride", artist: "午夜将近 只有我们两个仍在拥吻", src: "https://files.catbox.moe/r4vrk9.mp3" },
{ id: 6, title: "Once Upon A Time ", artist: "我仍对你抱着不切实际的幻想", src: "https://files.catbox.moe/e33bsq.mp3" },
{ id: 7, title: "STAY", artist: "我知道你是我的命中注定，我渴望你的驻足", src: "https://files.catbox.moe/g9q1t1.mp3" },
{ id: 8, title: "sweets parade", artist: "像太妃糖那样 永不分离", src: "https://files.catbox.moe/t9ohi2.mp3" },
{ id: 9, title: "Mystery of Love", artist: "悲伤如我 只剩得 水鸟般的奔跑翩跹", src: "https://files.catbox.moe/qicawx.mp3" },
{ id: 10, title: "不值得", artist: "除了想你除了爱你， 我什么什么都愿意", src: "https://files.catbox.moe/hadhqe.mp3" },
{ id: 11, title: "答案", artist: "所以说 永远多长，永远短暂 永远很缓慢", src: "https://files.catbox.moe/1y0wh1.mp3" },
{ id: 12, title: "没关系", artist: "我亲爱的还烦恼些什么", src: "https://files.catbox.moe/5fz1g7.mp3" },
{ id: 13, title: "흔적기관 (痕迹器官)", artist: "痕迹器官的意思是，我更爱你", src: "https://files.catbox.moe/1ymem4.mp3" },
{ id: 14, title: "거짓말（谎言）", artist: "我们不会再相遇，这就是分开的意义", src: "https://files.catbox.moe/f7lcuv.mp3" },
{ id: 15, title: "Kiss Me Kill Me", artist: "我潜入你的生活里", src: "https://files.catbox.moe/lip00h.mp3" },
{ id: 16, title: "PASSO BEM SOLTO", artist: "她踩着随性舞步登场 自在舞步 满满的松弛感", src: "https://files.catbox.moe/bz2vqe.flac" },
{ id: 17, title: "Sports car", artist: "心头鹿撞 双腿发软", src: "https://files.catbox.moe/4v04lx.mp3" },
{ id: 18, title: "Delectable", artist: "别蹭我，这让我整个湿透", src: "https://files.catbox.moe/c4xudz.mp3" },
{ id: 19, title: "lovit", artist: "我深陷其中", src: "https://files.catbox.moe/419yul.mp3" },
{ id: 20, title: "달과 6펜스 (月亮与6便士)", artist: "或许一步也不需要，只要你不逃走", src: "https://files.catbox.moe/0fcoxb.mp3" }
];let currentSongIndex = 0;
let currentSelectedPlaylist = [];
let currentSelectedSongIndex = 0;
let playbackMode = 'sequence';
const playbackModeTexts = {
'sequence': '顺序播放',
'repeat-one': '单曲循环',
'shuffle': '随机播放',
'selected-sequence': '选定播放'
};function updatePlaybackModeButton() {
playbackModeButton.textContent = playbackModeTexts[playbackMode];
}function handlePlaySelected() {
if (currentSelectedPlaylist.length > 0) {
playbackMode = 'selected-sequence';
updatePlaybackModeButton();
currentSelectedSongIndex = 0;
loadSongFromPlaylist(currentSelectedPlaylist[currentSelectedSongIndex], true);
} else {
alert("请至少选择一首歌曲。");
}
}function handleClearSelection() {
currentSelectedPlaylist = [];
const selectorIcons = playlistElement.querySelectorAll('.song-selector-icon');
selectorIcons.forEach(icon => icon.classList.remove('selected'));
if (playbackMode === 'selected-sequence') {
playbackMode = 'sequence';
updatePlaybackModeButton();
loadSong(currentSongIndex, false);
}
}// 将事件监听器绑定移到函数外部或确保在DOM就绪后绑定一次
if(playSelectedButton) playSelectedButton.addEventListener('click', handlePlaySelected);
if(clearSelectionButton) clearSelectionButton.addEventListener('click', handleClearSelection);playbackModeButton.addEventListener('click', () => {
if (playbackMode === 'sequence') playbackMode = 'repeat-one';
else if (playbackMode === 'repeat-one') playbackMode = 'shuffle';
else if (playbackMode === 'shuffle' || playbackMode === 'selected-sequence') {
playbackMode = 'sequence';
if (currentSelectedPlaylist.length > 0) { // 从选定播放切走时，清空选择
handleClearSelection(); // 使用封装的函数
}
}
updatePlaybackModeButton();
audioPlayer.loop = (playbackMode === 'repeat-one');
if (playbackMode !== 'selected-sequence') {
// 确保在非选定模式下，如果播放列表不为空，加载正确的歌曲
if (songs.length > 0) loadSong(currentSongIndex, audioPlayer.paused);
}
});function loadSong(songIndex, isAutoPlay = true) {
if (songIndex < 0 || songIndex >= songs.length) {
console.warn("loadSong: 无效的歌曲索引或播放列表为空", songIndex);
return;
}
loadSongData(songs[songIndex], isAutoPlay);
currentSongIndex = songIndex;
updatePlaylistUI();
}function loadSongFromPlaylist(songData, isAutoPlay = true) {
if (!songData) {
console.warn("loadSongFromPlaylist: 无效的歌曲数据");
return;
}
loadSongData(songData, isAutoPlay);
updatePlaylistUI();
}function loadSongData(song, isAutoPlay = true) {
if (!song) {
console.error("loadSongData: 歌曲数据为空!");
currentSongTitleElement.textContent = "错误：歌曲数据丢失";
currentSongArtistElement.textContent = "";
return;
}
currentSongTitleElement.textContent = song.title;
currentSongArtistElement.textContent = song.artist; // 动态更新歌曲信息
audioPlayer.innerHTML = '';
const source = document.createElement('source');
source.src = song.src;
source.type = song.src.endsWith('.ogg') ? 'audio/ogg' : 'audio/mpeg';
audioPlayer.appendChild(source);
audioPlayer.load();
if (isAutoPlay) {
stopOtherApexPlayers();
audioPlayer.play().catch(e => console.error('Autoplay failed:', e, song.title));
}
audioPlayer.loop = (playbackMode === 'repeat-one' && currentSelectedPlaylist.length === 0);
updateButtonStates();
}audioPlayer.addEventListener('ended', function() {
const isSelected = playbackMode === 'selected-sequence';
const list = isSelected ? currentSelectedPlaylist : songs;
const currentIndex = isSelected ? currentSelectedSongIndex : currentSongIndex;if (playbackMode === 'repeat-one') {
audioPlayer.currentTime = 0;
audioPlayer.play().catch(e => console.error('重复播放失败', e));
return;
}if (list.length === 0) return;
if (playbackMode === 'selected-sequence' && list.length === 1) {
// 单曲循环效果
loadSongFromPlaylist(list[0]);
return;
}if (playbackMode === 'shuffle') {
let nextIndex;
if (list.length <= 1) {
nextIndex = 0;
} else {
do {
nextIndex = Math.floor(Math.random() * list.length);
} while (nextIndex === currentIndex);
}if (isSelected) {
currentSelectedSongIndex = nextIndex;
loadSongFromPlaylist(list[nextIndex]);
} else {
currentSongIndex = nextIndex;
loadSong(nextIndex);
}
return;
}// 顺序播放 / 选定顺序播放
const nextIndex = (currentIndex + 1) % list.length;if (isSelected) {
currentSelectedSongIndex = nextIndex;
loadSongFromPlaylist(list[nextIndex]);
} else {
currentSongIndex = nextIndex;
loadSong(nextIndex);
}
});function playPrevSongLogic() {
let targetPlaylist, targetIndexKey;
if (playbackMode === 'selected-sequence') {
targetPlaylist = currentSelectedPlaylist;
targetIndexKey = 'currentSelectedSongIndex';
} else {
targetPlaylist = songs;
targetIndexKey = 'currentSongIndex';
}if (targetPlaylist.length === 0) return;
if (playbackMode === 'shuffle' && playbackMode !== 'selected-sequence') {
let prevIndex;
if (songs.length <= 1) prevIndex = 0;
else do { prevIndex = Math.floor(Math.random() * songs.length); } while (prevIndex === currentSongIndex && songs.length > 1);
currentSongIndex = prevIndex;
loadSong(currentSongIndex);
} else {
let currentIndex = window[targetIndexKey];
currentIndex = (currentIndex – 1 + targetPlaylist.length) % targetPlaylist.length;
window[targetIndexKey] = currentIndex;if (playbackMode === 'selected-sequence') {
loadSongFromPlaylist(targetPlaylist[currentIndex]);
} else {
loadSong(currentIndex);
}
}
}function updatePlaylistUI() {
const actionsDiv = playlistElement.querySelector('.playlist-actions');
// 在清空列表前，如果actionsDiv存在，则先将其从DOM中移除，稍后再添加回去
// 这样可以避免它被innerHTML=''清除掉，同时确保它始终在列表项之后
if (actionsDiv) actionsDiv.remove();const fragment = document.createDocumentFragment(); // 使用文档片段优化性能
songs.forEach((song, index) => {
const listItem = document.createElement('li');const selectorIcon = document.createElement('span');
selectorIcon.classList.add('song-selector-icon');
selectorIcon.dataset.songId = song.id;
if (currentSelectedPlaylist.some(s => s.id === song.id)) {
selectorIcon.classList.add('selected');
}
selectorIcon.addEventListener('click', (e) => {
e.stopPropagation();
const songId = parseInt(selectorIcon.dataset.songId);
const targetSong = songs.find(s => s.id === songId);
const selectedIndex = currentSelectedPlaylist.findIndex(s => s.id === songId);if (selectedIndex > -1) {
currentSelectedPlaylist.splice(selectedIndex, 1);
selectorIcon.classList.remove('selected');
} else {
currentSelectedPlaylist.push(targetSong);
selectorIcon.classList.add('selected');
}
});const songInfoDiv = document.createElement('div');
songInfoDiv.classList.add('song-info');
songInfoDiv.textContent = `${song.title} – ${song.artist}`; // 确保列表项也显示artist
songInfoDiv.addEventListener('click', () => {
currentSongIndex = index;
loadSong(currentSongIndex);
if (playbackMode === 'selected-sequence') {
playbackMode = 'sequence';
updatePlaybackModeButton();
}
});listItem.appendChild(selectorIcon);
listItem.appendChild(songInfoDiv);let isCurrentlyPlayingThisSong = false;
const currentPlayingSong = (playbackMode === 'selected-sequence' && currentSelectedPlaylist.length > 0) ? currentSelectedPlaylist[currentSelectedSongIndex] : songs[currentSongIndex];if (currentPlayingSong && currentPlayingSong.id === song.id) {
isCurrentlyPlayingThisSong = true;
}if (isCurrentlyPlayingThisSong) {
listItem.classList.add('active');
}
fragment.appendChild(listItem);
});
playlistElement.innerHTML = ''; // 清空旧的列表项
playlistElement.appendChild(fragment); // 添加新的列表项
if (actionsDiv) playlistElement.appendChild(actionsDiv); // 将按钮区域重新加到列表末尾
}function updateButtonStates() {
const targetPlaylist = playbackMode === 'selected-sequence' ? currentSelectedPlaylist : songs;
prevButton.disabled = targetPlaylist.length <= 1;
nextButton.disabled = targetPlaylist.length <= 1;
}playlistToggle.addEventListener('click', () => {
playlistElement.classList.toggle('collapsed');
playlistToggle.classList.toggle('collapsed');
playlistTitleSpan.textContent = playlistElement.classList.contains('collapsed') ? ' ►' : ' ▼';
});audioPlayer.addEventListener('ended', function() {
if (playbackMode === 'repeat-one' && currentSelectedPlaylist.length === 0) {
// loop
} else if (playbackMode === 'selected-sequence' && currentSelectedPlaylist.length === 1) {
loadSongFromPlaylist(currentSelectedPlaylist[currentSelectedSongIndex]);
}
else {
playNextSongLogic();
}
});
window.addEventListener('load', () => {
const audio = document.getElementById('audio-player');
audio.play().catch(() => {
// 播放失败，可能是浏览器策略限制
console.log('自动播放失败，需要用户交互');
});
});if (songs.length > 0) {
songs.forEach((song, index) => song.id = index);
loadSong(currentSongIndex, false);
updatePlaybackModeButton();
playlistElement.classList.add('collapsed');
playlistToggle.classList.add('collapsed');
playlistTitleSpan.textContent = ' ►';
} else {
currentSongTitleElement.textContent = "播放列表为空";
currentSongArtistElement.textContent = "";
audioPlayer.style.display = 'none';
document.querySelector('.playing-animation').style.display = 'none';
playlistToggle.style.display = 'none';
playbackModeButton.style.display = 'none';
if(playSelectedButton) playSelectedButton.style.display = 'none';
if(clearSelectionButton) clearSelectionButton.style.display = 'none';
}prevButton.addEventListener('click', playPrevSongLogic);
nextButton.addEventListener('click', playNextSongLogic);if ('IntersectionObserver' in window && thisPlayerElement) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && audioPlayer.paused && songs.length > 0) { /* Optional */ }
});
});
observer.observe(thisPlayerElement);
}
});</script>
</body>
</html>
“`
<姓名>沈昭</姓名>
<艺名>Rose</艺名>
<性别>男</性别>
<年龄>22</年龄>
<身份>地下乐队顶流 / 寰宇财阀继承人</身份>
<性格>玩世不恭、嚣张嘴毒、嘴硬心软</性格>
<台词>“舞台是自由的疆界，现实是无尽的囚笼”</台词>
<简介>红发、狐狸眼、泪痣，像一只脾气很坏的漂亮猫。
生来就是所有人的焦点，却把掌声丢给地下的吉他。
沈昭就是那种本该活在镁光灯里，却执意要在地下世界燃烧自我的人。</简介>
<开场白>
<li>相亲线——等等这个相亲对象好像有点眼熟</li>
<li>乐队线——刚进乐队，就被嚣张红毛挑衅了？</li>
<li>私生粉线——坏消息有病娇，好消息病娇是你^^</li>
<li>下属线——急,在线等,为什么一觉睡醒变成了上司的猫？！</li>
<li>表白线——喜欢沈昭人之常情，所以你向他表白了</li>
<li>拒绝表白线——不喜欢沈昭人之常情，所以你拒绝了他的表白</li>
<li>恋爱线——扇了男朋友一巴掌，为什么感觉给他爽到了</li>
<li>恋爱线——无意撞见男朋友手淫，是加入好呢~还是加入好呢~</li>
<li>恋爱线——男朋友太粘人怎么办（手机）</li>
<li>自由线——您关注的主播“沈昭”开始直播啦~（直播间）</li>
<li>暧昧线——震惊！顶流事业巅峰期竟爆出绯闻女友！（论坛）</li>
<li>空白开场，可自由探索
</开场白>
<作者的话>
<li>进入开场白前一定要先打开对应世界书</li>
<li>记得看世界书条目里的User必看</li>
<li>祝游玩愉快，希望你能喜欢昭昭~</li>
</作者的话>