屿风 发表于 5 天前

音乐上下代码

<style>
:root{--bg-color:#A9DF8459;--progress-color:#A9DF84;}
.music-card{max-width:420px;margin:10px auto;background:var(--bg-color);backdrop-filter:blur(14px);border-radius:34px;padding:24px;font-family:system-ui}
.music-cover{
width:100%;
aspect-ratio:1/1;
margin-bottom:18px;
perspective: 1000px;
cursor: pointer;
}
.music-cover-inner{
position: relative;
width:100%;
height:100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.music-cover.flip .music-cover-inner{
transform: rotateY(180deg);
}
.cover-front,.cover-back{
position: absolute;
width:100%;
height:100%;
border-radius:16px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
backface-visibility: hidden;
}
.cover-front{
background:#eee;
}
.cover-back{
background:#f7fbeb;
color:#333;
transform: rotateY(180deg);
padding:20px;
box-sizing:border-box;
text-align:center;
font-size:14px;
}
.cover-front img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:cover!important;pointer-events:none !important;}
.music-title-row{display:flex;justify-content:space-between;margin-bottom:6px;gap:8px}
.music-title{font-size:28px !important;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.music-like{width:26px;height:26px;cursor:pointer;flex-shrink:0;margin-top:16px}
.music-singer{font-size:18px;color:#444;margin:0 0 14px}
.music-lyric{font-size:15px;color:#666;margin:0 0 16px}
.music-time-row{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px}
.music-progress{width:100%;height:4px;background:#ffffff;border-radius:99px}
.music-progress-bar{height:100%;width:0;background:var(--progress-color);border-radius:99px}
.music-btn-row{display:flex;justify-content:space-between;align-items:center}
.music-btn-row img{width:26px;height:26px;cursor:pointer}
.music-play{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000012;cursor:pointer}
</style>
<div class="music-card">
<div class="music-cover" id="coverFlip">
<div class="music-cover-inner">
    <div class="cover-front">
      
    </div>
    <div class="cover-back">
      网易云音乐地址<br>https://music.163.com/#/song?id=3223895
    </div>
</div>
</div>
<div class="music-title-row">
<h2 class="music-title">玛卡瑞纳</h2>
<img class="music-like" id="likeBtn" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png">
</div>
<div class="music-singer">海龟先生</div>
<div class="music-lyric">我早就肯定我的身体<br>被罪恶领入死亡里</div>
<div class="music-time-row"><span id="curTime">00:00</span><span id="totalTime">03:03</span></div>
<div class="music-progress"><div class="music-progress-bar" id="progressBar"></div></div>
<br>
<div class="music-btn-row">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png">
<div class="music-play" id="playBtn"><img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png"></div>
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png">
</div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=1 src="//music.163.com/outchain/player?type=2&id=25702070&auto=1&height=32"></iframe>
</div>
<script>
(function(){
const c=document.getElementById('curTime'),b=document.getElementById('progressBar'),t=document.getElementById('totalTime');
const playBtn=document.getElementById('playBtn'),playIcon=document.getElementById('playIcon'),likeBtn=document.getElementById('likeBtn');
const coverFlip = document.getElementById('coverFlip');
const playSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png";
const pauseSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png";
const likeOff="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png";
const likeOn="https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png";
let isPlay=true,isLike=false,timer=null;
const s=x=>{let =x.split(':').map(Number);return m*60+n};
const f=x=>{let m=String(Math.floor(x/60)).padStart(2,'0'),n=String(Math.floor(x%60)).padStart(2,'0');return m+':'+n};
let total=s(t.innerText),now=0;
const run=()=>{now+=0.1;if(now>=total){now=total;pausePlay()}c.innerText=f(now);b.style.width=now/total*100+'%'};
const startTimer=()=>timer=setInterval(run,100);
const stopTimer=()=>clearInterval(timer);
const pausePlay=()=>{isPlay=false;playIcon.src=playSrc;stopTimer()};
const startPlay=()=>{isPlay=true;playIcon.src=pauseSrc;startTimer()};
playBtn.onclick=()=>isPlay?pausePlay():startPlay();
likeBtn.onclick=()=>{isLike=!isLike;likeBtn.src=isLike?likeOn:likeOff};
// 封面翻转点击事件
coverFlip.onclick = ()=>{
coverFlip.classList.toggle('flip');
};
run();startTimer();
})();
</script>

屿风 发表于 4 天前

适配网易云播放器版本-点击封面查看歌曲地址

<style>
:root{--bg-color:#A9DF8459;--progress-color:#A9DF84;}
.music-card{max-width:420px;margin:10px auto;background:var(--bg-color);backdrop-filter:blur(14px);border-radius:34px;padding:24px;font-family:system-ui}
.music-cover{width:100%;aspect-ratio:1/1;margin-bottom:18px;perspective:1000px;cursor:pointer}
.music-cover-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.music-cover.flip .music-cover-inner{transform:rotateY(180deg)}
.cover-front,.cover-back{position:absolute;width:100%;height:100%;border-radius:16px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;overflow:hidden}
.cover-front{background:#eee}
.cover-back{background:#f7fbeb;color:#333;transform:rotateY(180deg);padding:20px;box-sizing:border-box;text-align:center;font-size:14px}
.cover-front img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:cover!important;pointer-events:none!important}
.music-title-row{display:flex;justify-content:space-between;margin-bottom:6px;gap:8px}
.music-card .music-title{font-size:28px !important;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-like{width:26px;height:26px;cursor:pointer;flex-shrink:0;margin-top:8px}
.music-singer{font-size:18px;color:#444;margin:0 0 14px}
.music-lyric{font-size:15px;color:#666;margin:0 0 16px}
.music-time-row{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px}
.music-progress{width:100%;height:4px;background:#ffffff;border-radius:99px}
.music-progress-bar{height:100%;width:0;background:var(--progress-color);border-radius:99px}
.music-btn-row{display:flex;justify-content:space-between;align-items:center}
.music-btn-row img,.music-play img{width:26px;height:26px;cursor:pointer}
.music-play{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000012;cursor:pointer}
</style>
<div class="music-card">
<div class="music-cover" id="coverFlip">
<div class="music-cover-inner">
    <div class="cover-front">封面</div>
    <div class="cover-back">网易云音乐直链<br>地址</div>
</div>
</div>
<div class="music-title-row">
<h2 class="music-title">歌名</h2>
<img class="music-like" id="likeBtn" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png">
</div>
<div class="music-singer">歌手</div>
<div class="music-lyric">歌词<br>歌词</div>
<div class="music-time-row"><span id="curTime">00:00</span><span id="totalTime">03:03</span></div>
<div class="music-progress"><div class="music-progress-bar" id="progressBar"></div></div>
<br>
<div class="music-btn-row">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png">
<div class="music-play" id="playBtn"><img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png"></div>
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png">
<img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png">
</div>
<网易云外链播放器>
</div>
<script>
(function(){
const $=id=>document.getElementById(id);
const c=$('curTime'),b=$('progressBar'),t=$('totalTime');
const playBtn=$('playBtn'),playIcon=$('playIcon'),likeBtn=$('likeBtn'),coverFlip=$('coverFlip');
const playSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png";
const pauseSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png";
const likeOff="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png";
const likeOn="https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png";
let isPlay=true,isLike=false,timer=null;
const s=x=>x.split(':').map(Number).reduce((a,v,i)=>i?a+v:a+v*60,0);
const f=x=>.map(n=>String(n).padStart(2,'0')).join(':');
let total=s(t.innerText),now=0;
const run=()=>{
now+=0.1;
if(now>=total){
    now=total;
    pausePlay();
}
c.innerText=f(now);
b.style.width=now/total*100+'%'
};
const pausePlay=()=>{
isPlay=false;
playIcon.src=playSrc;
clearInterval(timer);
};
const startPlay=()=>{
isPlay=true;
playIcon.src=pauseSrc;
timer=setInterval(run,100);
};
playBtn.onclick=()=>isPlay?pausePlay():startPlay();
likeBtn.onclick=()=>{
isLike=!isLike;
likeBtn.src=isLike?likeOn:likeOff
};
coverFlip.onclick=()=>coverFlip.classList.toggle('flip');
// 页面加载自动启动进度
startPlay();
})();
</script>
页: [1]
查看完整版本: 音乐上下代码