【Too Sweet】- Trinix & The Macarons Project
<style>.music-card-neon{
width:100%;
max-width:420px;
margin:10px auto;
backdrop-filter:blur(14px);
border-radius:34px;
padding:24px;
box-sizing:border-box;
overflow:hidden;
font-family:system-ui,sans-serif;
}
.music-cover{
width:100%;
aspect-ratio:1/1;
border-radius:16px;
overflow:hidden;
margin-bottom:18px;
}
.music-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.music-title-wrap{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 0 6px;
}
.music-title{
font-size:26px !important;
font-weight:700;
color:#222;
margin:0;
}
.like-wrap{
position:relative;
cursor:pointer;
}
.like-icon{
width:26px;
height:26px;
display:block;
}
.music-artist{
font-size:18px;
color:#444;
margin:0 0 14px;
}
.music-lyric-tip{
font-size:15px;
color:#666;
margin:0 0 16px;
}
/* 时间+进度条容器 */
.music-progress-box{
width:100%;
margin-bottom:22px;
}
.music-time-row{
display:flex;
justify-content:space-between;
font-size:12px;
color:#666;
margin-bottom:6px;
}
.music-progress{
width:100%;
height:4px;
background:#dddddd;
border-radius:99px;
cursor:pointer;
position:relative;
}
.music-progress-bar{
height:100%;
width:0%;
background:#222;
border-radius:99px;
}
.music-control{
display:flex;
align-items:center;
justify-content:space-between;
}
.music-icon-btn{
border:none;
background:transparent;
padding:0;
cursor:pointer;
}
.music-icon-btn img{
width:26px;
height:26px;
display:block;
}
.music-play-btn{
border:none;
background:#ffffff;
width:56px;
height:56px;
border-radius:50%;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,0.12);
cursor:pointer;
}
.music-play-btn img{
width:24px;
height:24px;
display:block;
}
.music-audio{
display:none;
}
</style>
<div class="music-card-neon" id="musicCard">
<div class="music-cover">
</div>
<div class="music-title-wrap">
<h2 class="music-title">Too Sweet</h2>
<div class="like-wrap" id="likeWrap">
<img class="like-icon" id="likeIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png" alt="收藏">
</div>
</div>
<div class="music-artist">Trinix & The Macarons Project</div>
<div class="music-lyric-tip">I think I'll take my whiskey neat<br>My coffee black and my bed at three</div>
<div class="music-progress-box">
<div class="music-time-row">
<span id="curTime">00:00</span>
<span id="totalTime">03:00</span>
</div>
<div class="music-progress" id="progressWrap">
<div class="music-progress-bar" id="progressBar"></div>
</div>
</div>
<div class="music-control">
<button class="music-icon-btn" id="loopBtn">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png" alt="循环">
</button>
<button class="music-icon-btn" id="prevBtn">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png" alt="上一曲">
</button>
<button class="music-play-btn" id="playBtn">
<img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png" alt="暂停">
</button>
<button class="music-icon-btn" id="nextBtn">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png" alt="下一曲">
</button>
<button class="music-icon-btn" id="listBtn">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png" alt="列表">
</button>
</div>
<audio class="music-audio" id="audioPlayer">
</div>
<script>
// 格式化秒 → mm:ss
function fmtTime(s){
let m = Math.floor(s / 60);
let sec = Math.floor(s % 60);
return String(m).padStart(2,'0')+':'+String(sec).padStart(2,'0');
}
let timer = null;
let pos = 0;
const total = 180;
let run = true; // ✅ 默认播放
const curTimeDom = document.getElementById('curTime');
const progressBar = document.getElementById('progressBar');
const progressWrap = document.getElementById('progressWrap');
const playIcon = document.getElementById('playIcon');
const audio = document.getElementById('audioPlayer');
function updateView(){
progressBar.style.width = (pos/total*100)+'%';
curTimeDom.innerText = fmtTime(pos);
}
function startTimer(){
timer = setInterval(()=>{
pos += 0.1;
if(pos >= total){
pos = total;
stopTimer();
run = false;
playIcon.src = 'https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png';
}
updateView();
},100);
}
function stopTimer(){
clearInterval(timer);
timer = null;
}
// 初始化：默认播放
updateView();
audio.play().catch(()=>{});
startTimer();
// 点击按钮切换暂停/播放
document.getElementById('playBtn').onclick = function(){
const icoPlay = 'https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png';
const icoPause = 'https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png';
if(run){
// 正在播放 → 暂停
audio.pause();
stopTimer();
run = false;
playIcon.src = icoPlay;
}else{
// 暂停 → 继续播放
audio.play().catch(()=>{});
run = true;
playIcon.src = icoPause;
startTimer();
}
}
// 点击进度条跳转
progressWrap.onclick = function(e){
const wrap = this.getBoundingClientRect();
const p = (e.clientX - wrap.left)/wrap.width;
pos = p * total;
updateView();
}
//爱心
const likeIcon = document.getElementById('likeIcon');
const heartOutline = "https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png";
const heartFill = "https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png";
let isLike = false;
document.getElementById('likeWrap').onclick = function(){
isLike = !isLike;
likeIcon.src = isLike ? heartFill : heartOutline;
};
//卡片底色
const cardHex = '#DCF2D2';
const cardAlpha = 0.6;
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3),16);
const g = parseInt(hex.slice(3, 5),16);
const b = parseInt(hex.slice(5, 7),16);
return `${r},${g},${b}`;
}
document.getElementById('musicCard').style.background = `rgba(${hexToRgb(cardHex)}, ${cardAlpha})`;
document.getElementById('loopBtn').onclick = function(){};
document.getElementById('prevBtn').onclick = function(){};
document.getElementById('nextBtn').onclick = function(){};
document.getElementById('listBtn').onclick = function(){};
</script>
**** Hidden Message ***** 副歌冲击力很强，听着太过瘾 副歌冲击力很强，听着太过瘾 楼主持续更新，蹲更多好歌。 耳机就位，沉浸式听歌打卡 节拍踩在心上，听着十分带感 这歌真的好听，安利给身边朋友 单曲循环预定 高潮段落惊艳，忍不住反复回放 旋律很抓耳，循环预定。