音乐左右代码

屿风发表于 5 天前

<br>
<style>
.music-card-neon{
width:100%;
max-width:620px;
margin:10px auto;
backdrop-filter:blur(14px);
border-radius:34px;
padding:18px;
box-sizing:border-box;
overflow:hidden;
font-family:system-ui,sans-serif;
}
.music-card-row{
display:flex;
align-items:center;
gap:14px;
}
.music-cover{
width:220px;
height:220px;
min-width:110px;
border-radius:20px;
overflow:hidden;
background:#eee;
}
.music-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.music-info{
flex:1;
min-width:0;
}
.music-title-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:4px;
}
.music-title{
font-size:22px !important;
font-weight:700;
color:#222;
margin:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.like-wrap{
position:relative;
cursor:pointer;
flex-shrink:0;
}
.like-icon{
width:24px;
height:24px;
display:block;
}
.music-artist{
font-size:14px;
color:#444;
margin:0 0 6px;
}
.music-lyric-tip{
font-size:12px;
color:#666;
margin:0 0 10px;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.music-progress-box{
width:100%;
}
.music-time-row{
display:flex;
justify-content:space-between;
font-size:11px;
color:#666;
margin-bottom:4px;
}
.music-progress{
width:100%;
height:3px;
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;
margin-top:10px;
}
.music-icon-btn{
border:none;
background:transparent;
padding:0;
cursor:pointer;
}
.music-icon-btn img{
width:22px;
height:22px;
display:block;
}
.music-play-btn{
border:none;
background:#ffffff;
width:46px;
height:46px;
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:22px;
height:22px;
display:block;
}
.music-audio{
display:none;
}
</style>
<div class="music-card-neon" id="musicCard">
<div class="music-card-row">
   <div class="music-cover">

   </div>

   <div class="music-info">
         <div class="music-title-wrap">
            <h2 class="music-title">281公里</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">谢霆锋</div>
         <div class="music-lyric-tip">追逐里程，或者选择追逐雨<br>逃避人群，不是有心逃避你。</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>
   </div>
</div>

<audio class="music-audio" id="audioPlayer">

</div>

<script>
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>
<br>

屿风发表于 5 天前

页: [1]

QQMCC论坛's Archiver

音乐左右代码