论坛首页 › 单图音画 › 央金拉姆《彩袖舞朝霞》

醉美水芙蓉 发表于 昨天 22:41

央金拉姆《彩袖舞朝霞》

<meta charset="UTF-8">
<style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{
    margin: 140px 00px calc(50% - 820px);
    width: 1460px;
    height: 740px;
background:#800000;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 111; --state: running;
}


#intro {margin: 0px0px;
      width: 100%;
      height:100%;
      position: absolute;
background:#800000;
background-size: cover;
opacity:1;
animation: color 4s linear infinite var(--state);
}


.photo{
width: 100%;
height: 100%;position:absolute; position: absolute;top:0px; left:0px;
animation: round 24s infinite var(--state);
opacity: 0;
}
.photo img{
height: 100%;}
@keyframes round{
0% {
opacity: 1;
-webkit-transform: scale(1);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}

20% {
opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
26% {
opacity: 0;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
}
img:nth-child(1) {
animation-delay: 18s;
}

img:nth-child(2) {
animation-delay: 12s;
}

img:nth-child(3) {
animation-delay: 6s;
}

img:nth-child(4) {
animation-delay: 0s;
}


/* ===== 播放器父元素===== */
#bfqfq {z-index: 222;
            width: 550px;height:320px;
            transform:scale(1);
            top: 60%; left:20%;
         
            position: absolute;
      }
      /* ===== 播放器子元素 ===== */
      #amazingaudioplayer-1 {
            width: 420px;height:200px;
            max-width: 100%;
            margin: 0 0%;
            top: 0px;left:0px;
       z-index: 3;
            font-family: 'Segoe UI', 'Noto Sans', system-ui, 'Microsoft YaHei', sans-serif;
            position: absolute;
      }
      
         @keyframes color { from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
      

      
/* =====唱碟元素===== */
      #tp{position:absolute;width: 200px;height: 200px;left: -40px;top:-314px;border-radius: 50%;animation:tion3s linear 1.5s infinite var(--state),opentop 0.5s 1 0s ;z-index: -1;transition: 2s;box-shadow: 0px 0px 0px 2px #cccccc;}
      @keyframes opentop { 0% {transform: translatex(-30px);} 100% { translatex(0px);}}
@keyframes tion { 0% {}
100% {transform: rotateZ(360deg);}
}

/* =====专辑封面 ===== */
#cip{z-index:1;
      position: absolute;
      background: url(https://img2.kuwo.cn/star/albumcover/500/s4s30/58/2504890447.jpg) no-repeat center/cover;
      top: -320px; left: -152px;
      border-radius: 4%;border: 2px solid #cccccc;
   width: 210px;height:210px;
   
      mask: radial-gradient(circle at 100% 50%,transparent 44px,#red 0%);-webkit-mask: radial-gradient(circle at 100% 50%,transparent 44px,red 0%);
      }

/* ===== 歌词父元素 ===== */
       .amazingaudioplayer-text {position: relative;
            padding: 10px 12px 0px;
            top: 70%;
            text-align: center;
      }
      /* =====歌词元素===== */
       #lrc {position:absolute; --motion: cover2;--tt: 1s; left: 20%;bottom:90px;transform: translate(-50%);perspective: 320px;
      font:normal 2.4em "Ma Shan Zheng","STKaiti"; color:#0000; z-index: 21;animation: color1 1s linear infinite var(--state);}
#lrc::before {position:absolute; content: attr(data-lrc); text-align: center;width: 100%; height: 100%; color: transparent; white-space: pre;background: linear-gradient(40deg, #1E9600 0%,#FFF200 50%,#FF0000 100%); filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   #lrc::before {
            animation-name:cover1;transform-origin:left bottom;
      }
      #lrc::before {
            animation-name:cover2;transform-origin:left bottom;
      }
#bs {animation: color1 3s linear infinite ;}
@keyframes color1 { 50% { filter: hue-rotate(360deg)brightness(260%);} }

@keyframes cover1 {
0% {transform:rotate(0deg)}

50% {transform: rotate(0deg);}


100% {transform:rotate(0deg)}
}
@keyframes cover2 {
0% {transform:rotate(0deg);}

20% {transform: rotate(0deg);}


100% {transform:rotate(0deg);}

}
      /* =====按钮控制栏===== */
       .amazingaudioplayer-bar {
         position: relative; left: -210px;
            height: 0px;top: 90px;
      }

   /* 播放/暂停 */
      .amazingaudioplayer-playpause {z-index: 4;
            position: absolute;
            left: 50%;
            margin-left: -24px;
            top: 12px;
      }

      .amazingaudioplayer-play,
       .amazingaudioplayer-pause {
            width: 45px;
            height: 45px;
            background: url('https://pic1.imgdb.cn/i/034VyZNyJ2UhU8KPoC2ljy.png')no-repeat center/cover;
            
            cursor: pointer;
      }

      .amazingaudioplayer-play {
            background-position: right top;
      }

      .amazingaudioplayer-pause {
            background-position: left top;
            display: none;
      }

       /* 上一首 */
      .amazingaudioplayer-prev {
            position: absolute;
            left: 50%;
            margin-left: -70px;
            top: 12px;
            width: 42px;
            height: 42px;
            background: url('https://pic1.imgdb.cn/i/034VyZNybLaIcBahgr7d1n.png')no-repeat center/cover;
            z-index: 4;
            background-position: left top;
            cursor: pointer;
      }

      /* 下一首 */
      .amazingaudioplayer-next {
            position: absolute;z-index: 4;
            left: 50%;
            margin-left: 30px;
            top: 12px;
            width: 40px;
            height: 40px;
          background: url('https://pic1.imgdb.cn/i/034VyZNybLaIcBahgr7d1n.png')no-repeat center/cover;
            
            background-position: right top;
            cursor: pointer;
      }
      /* 循环按钮 */
      .amazingaudioplayer-loop {
            position: absolute;z-index: 2;
            top: 24px;filter: invert(100%);
            left: 50%;
            margin-left: 78px;
            width: 24px;
            height: 24px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/loop-24-24-2.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: left top;
            cursor: pointer;
      }

      /* 列表切换按钮（SVG三横线） */
      .playlist-btn {
            position: absolute;z-index: 3;
            top: 24px;
            left: 50%;
            margin-left: 108px;
            width: 24px;
            height: 24px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 35;
      }

      .playlist-btn svg {
            stroke: #eee;
            stroke-width: 2.2;
            width: 20px;
            height: 20px;
      }

      .playlist-btn:hover svg {
            stroke: #00aa12;
      }

       /* 时间显示 */
      .amazingaudioplayer-time {
            position: absolute;
            top: 22px;
            left: 32px;
            color: #eee;
            font-size: 16px;
            font-weight: 500;
            font-family:cursive;
            background: rgba(255, 248, 225, 0);
            padding: 0 8px;
            border-radius: 20px;
      }

      /* 音量等控制 */
      .amazingaudioplayer-volume {
            position: absolute;
            top: 24px;
            left: 50%;filter: invert(100%);
            margin-left: 138px;
            z-index: 40;
            cursor: pointer;
      }

      .amazingaudioplayer-volume-button {
            width: 26px;
            height: 26px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/volume-24-24-2.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: left top;
      }

      .amazingaudioplayer-volume-bar {
            position: absolute;
            left: 50%;
            margin-left: -10px;
            bottom: 20%;
            width: 4px;
            height: 42px;
            background-color:rgba(254, 252, 245, 0);
            backdrop-filter: blur(0px);
            border-radius: 3px;
            padding: 8px 4px;
            visibility: hidden;
            opacity: 0;
            transition: 0.15s;
            margin-bottom: 8px;
            border: 0.5px solid rgba(233, 226, 199, 0);
      }

.amazingaudioplayer-volume:hover .amazingaudioplayer-volume-bar,
      .amazingaudioplayer-volume-button:hover+.amazingaudioplayer-volume-bar {
            visibility: visible;
            opacity: 1;
      }

   .amazingaudioplayer-volume-bar-adjust {
            position: relative;
            width: 100%;
            height: 100%;
            background-color:#000;
            border-radius: 20px;
            overflow: hidden;
      }

   .amazingaudioplayer-volume-bar-adjust-active {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80%;
            background:#429d7a;
            border-radius: 20px;
      }

   /* ===== 进度条 ===== */
      .amazingaudioplayer-progress {
            position: relative;
            top: 160px;
            margin-bottom: 0px;
            width:350px;
            height: 3px;
            background: #fff;
            cursor: pointer;
            left: -180px;z-index: 6;
            margin-right: auto;
            border-radius: 12px;
      }

      .amazingaudioplayer-progress-loaded {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: #bcb694;
            width: 0%;
            border-radius: 12px;
      }

       .amazingaudioplayer-progress-played {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background:#00aa34;
            width: 0%;
            border-radius: 12px;
      }

         /* ===== 歌曲信息 ===== */
      .amazingaudioplayer-tracklist {z-index: 3;
            margin: 180px -210px;position: absolute;
            background: rgba(235, 225, 200, 0);
            border-radius: 0px;width:340px;
            padding: 0px 18px;
            text-align: center;
      }

      .current-info {font-family:   cursive, serif;
            font-size: 22px;
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
transform-origin:top;
            color: #fff;   animation:yao 0s linear infinite alternate var(--state), color 0s linear 1.5s infinite var(--state);
text-shadow: 0 2px 2px rgba(0, 0, 0, 1);
      }
@keyframes yao { from{transform:perspective(300px) rotatex(30deg)} to{transform:perspective(300px) rotatex(-30deg)} }
      .current-sub {
            font-size: 13px;
            opacity: 0;
            color: #2b5e4f;
      }

      /* ===== 播放列表浮层 ===== */
      .playlist-dropdown {
            position: absolute;
            bottom: 160px;
            right: 2%;
            width: 420px;
            max-height: 560px;
            
            
         
         
            
            z-index: 200;
            overflow: hidden;
            display: none;
            flex-direction: column;
      }

      .playlist-dropdown.show {display: flex;
            
      }

      .dropdown-header {
            padding: 0px 0px;
            
            font-weight: 600;
               display: none;
            display: flex;left: 0px;
            justify-content: space-between;
            border-bottom: 0px solid #ddd2b6;
      }

      .close-dropdown {
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
            color: #ff0000;
      }

      .song-list {
            list-style: none;
            overflow-y: auto;
            max-height: 500px;
            margin: 0;
            padding: 0;
      }

      .song-list li {
            padding: 6px 16px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            display: flex;
            gap: 10px;
            border-bottom: 0px solid #f0e9d6;
            transition: 0.1s;
      }

      .song-list li.active-song {
            background: #0000;
            font-weight: 700;
            color: #ff0000;
      }

      .song-list li:hover {
            background: #0000;
      }
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#fff000; opacity: 1; cursor: pointer; animation: color 2s linearinfinite var(--state);z-index: 111}
    </style>
<div id="papa">
<div id="intro"></div>

<div>
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/c51e896b7a7ffc0b061f46509530300a.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/14ab9e75153a228b494d5d382820e55b.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/b2ed319da53b99d3aa0e0eb430155dda.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/dd18cc957f73bfe62b513f0054f89ffb.jpg" alt="" />
</div>
<span id="fullscreen">全屏欣赏</span>
<!-- 歌词区域 -->
            <div class="amazingaudioplayer-text">
                <div class="amazingaudioplayer-lyrics">
                  <div id="lrc" data-lrc="♪ ..." >♪ ...</div>
                </div>
            </div>
    <!-- =====播放器主体 ===== -->
<div id="bfqfq">
   
    <div id="amazingaudioplayer-1">
      
      <div class="amazingaudioplayer-player-wrapper">

          <img id="tp"src = "https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png">
<div id="cip" alt="专辑封面"></div>
<div class="amazingaudioplayer-tracklist">
                <div class="current-info" id="currentSongName"></div>
                <div class="current-sub" id="currentSongSub">mp3</div>
            </div>
            <!---->
            <div class="amazingaudioplayer-bar">
                <div class="amazingaudioplayer-playpause">
                  <div class="amazingaudioplayer-play" id="playBtn"></div>
                  <div class="amazingaudioplayer-pause" id="pauseBtn" style="display:none;"></div>
                </div>
                <div class="amazingaudioplayer-prev" id="prevBtn"></div>
                <div class="amazingaudioplayer-next" id="nextBtn"></div>
                <div class="amazingaudioplayer-loop" id="loopBtn"></div>
                <div class="amazingaudioplayer-time" id="timeDisplay">00:00 / 00:00</div>
                <div class="amazingaudioplayer-volume">
                  <div class="amazingaudioplayer-volume-button" id="volBtn"></div>
                  <div class="amazingaudioplayer-volume-bar">
                        <div class="amazingaudioplayer-volume-bar-adjust" id="volAdjust">
                            <div class="amazingaudioplayer-volume-bar-adjust-active" id="volFill"></div>
                        </div>
                  </div>
                </div>
                <button class="playlist-btn" id="playlistBtn" title="播放列表">
                  <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                  </svg>
                </button>
            </div>

            <!-- 进度条-->
            <div class="amazingaudioplayer-progress" id="progressTrack">
                <div class="amazingaudioplayer-progress-loaded" id="loadedBar"></div>
                <div class="amazingaudioplayer-progress-played" id="playedBar"></div>
            </div>

            

      </div>
         </div>
    </div>
    <!-- 播放列表浮层 -->
    <div id="playlistDropdown" class="playlist-dropdown">
      <div class="dropdown-header">
            <span></span>
            <span class="close-dropdown" id="closeDropdownBtn">&times;</span>
      </div>
      <ul class="song-list" id="songListContainer"></ul>
    </div>
</div>
    <script>
      // ========== 歌曲数据 ==========
      const songs = [{
            title: "央金拉姆《彩袖舞朝霞》",
            src: "https://www.joy127.com/url/159701.mp3",
            lrc: `彩袖舞朝霞-央金拉姆
词：央金拉姆
曲：央金拉姆
制作：央金拉姆
统筹：央金拉姆
LRC编辑：醉美水芙蓉
青稞酒满碗 映着火光亮
阿妈的银镯 叮当碰衣裳
脚跟踏大地 节奏从心上
转一圈又一圈 迎吉祥
嘿 嘿 索朗扎西啦
鼓声敲醒雪山的月牙
嘿 嘿 拉姆格桑花
彩袖甩出黎明的朝霞
铜铃系腰间 步步生莲花
爷爷的调子 唱过千万家
手拉着手围成圆的牵挂
一夜不歇 送年华
嘿 嘿 索朗扎西啦
鼓声敲醒雪山的月牙
嘿 嘿 拉姆格桑花
彩袖甩出黎明的朝霞
风从冈仁波齐吹下来
带着经幡的祝愿
我们用双脚亲吻土地
把欢笑种进明天
嘿 嘿 索朗扎西啦
鼓声敲醒雪山的月牙
嘿 嘿 拉姆格桑花
彩袖甩出黎明的朝霞
索朗扎西 格桑拉
索朗扎西 格桑拉
谢谢欣赏！
`
}];

      // ========== DOM 引用 ==========
      var audio = new Audio();
      var playBtn = document.getElementById('playBtn');
      var pauseBtn = document.getElementById('pauseBtn');
      var prevBtn = document.getElementById('prevBtn');
      var nextBtn = document.getElementById('nextBtn');
      var loopBtn = document.getElementById('loopBtn');
      var timeDisplay = document.getElementById('timeDisplay');
      var progressTrack = document.getElementById('progressTrack');
      var loadedBar = document.getElementById('loadedBar');
      var playedBar = document.getElementById('playedBar');
      var volBtn = document.getElementById('volBtn');
      var volFill = document.getElementById('volFill');
      var volAdjust = document.getElementById('volAdjust');
      var lrcElement = document.getElementById('lrc');
      var currentSongNameSpan = document.getElementById('currentSongName');
      var currentSongSub = document.getElementById('currentSongSub');
      var playlistBtn = document.getElementById('playlistBtn');
      var closeDropdownBtn = document.getElementById('closeDropdownBtn');
      var dropdown = document.getElementById('playlistDropdown');
      var songListContainer = document.getElementById('songListContainer');

      // ========== 状态 ==========
      var currentIndex = 0;
      var isPlaying = false;
      var loopMode = 0;
      var volume = 0.80;
      var isDragging = false;
      var lyricsData = [];
      var currentLrcIndex = -1;
      var motionFlag = true;

      // ========== 工具 ==========
      function formatTime(sec) {
            if (isNaN(sec) || !isFinite(sec) || sec < 0) return '00:00';
            var m = Math.floor(sec / 60);
            var s = Math.floor(sec % 60);
            return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
      }

      function parseLrc(lrcStr) {
            if (!lrcStr) return [];
            var lines = lrcStr.split(/\r?\n/);
            var items = [];
            var regex = /\[(\d{2}):(\d{2}\.\d{2})\]/;
            for (var i = 0; i < lines.length; i++) {
                var line = lines;
                var m = line.match(regex);
                if (m) {
                  var t = parseInt(m) * 60 + parseFloat(m);
                  var txt = line.replace(regex, '').trim();
                  if (txt && !txt.includes('LRC编辑') && !txt.includes('歌手：') && !txt.includes('词：') && !txt.includes(
                            '曲：')) {
                        items.push({ time: t, lrc: txt });
                  }
                }
            }
            items.sort(function(a, b) { return a.time - b.time; });
            for (var j = 0; j < items.length; j++) {
                items.duration = (j + 1 < items.length) ? items.time - items.time : 4.0;
                if (items.duration <= 0.2) items.duration = 0.8;
            }
            return items;
      }

      function renderSongList() {
            songListContainer.innerHTML = '';
            for (var i = 0; i < songs.length; i++) {
                var li = document.createElement('li');
                li.className = i === currentIndex ? 'active-song' : '';
                li.innerHTML = '<span>' + String(i + 1).padStart(2, '0') + '</span><span>' + songs.title + '</span>';
                li.onclick = (function(idx) {
                  return function() {
                        if (currentIndex === idx) { closeDropdown(); return; }
                        loadSong(idx);
                        if (!isPlaying) play();
                        else audio.play().catch(function() {});
                        closeDropdown();
                  };
                })(i);
                songListContainer.appendChild(li);
            }
      }

      function loadSong(idx) {
            if (idx < 0) idx = 0;
            if (idx >= songs.length) idx = songs.length - 1;
            currentIndex = idx;
            var s = songs;
            var wasPlaying = isPlaying;
            audio.pause();
            audio.src = s.src;
            audio.load();
            lyricsData = parseLrc(s.lrc);
            currentLrcIndex = -1;
            if (lyricsData.length) {
                lrcElement.innerText = lyricsData.lrc;
                lrcElement.setAttribute('data-lrc', lyricsData.lrc);
                lrcElement.style.setProperty('--tt', '0.8s');
                lrcElement.style.setProperty('--state', 'paused');
            } else {
                lrcElement.innerText = "♪ ";
                lrcElement.setAttribute('data-lrc', "♪");
            }
            currentSongNameSpan.innerText = s.title;
            currentSongSub.innerText = "mp3专辑播放器";
            renderSongList();
            if (wasPlaying) {
                audio.play().then(function() {
                  isPlaying = true;
                  updateBtnUI();
                  lrcElement.style.setProperty('--state', 'running');
                  fullRefreshLyrics();
                }).catch(function(e) { console.warn("自动播放被阻止"); });
            } else {
                isPlaying = false;
                updateBtnUI();
                lrcElement.style.setProperty('--state', 'paused');
                fullRefreshLyrics();
            }
      }

      function updateBtnUI() {
            playBtn.style.display = isPlaying ? 'none' : 'block';
            pauseBtn.style.display = isPlaying ? 'block' : 'none';
      }

      function applyLyrics(txt, dur) {
            lrcElement.innerText = txt;
            lrcElement.setAttribute('data-lrc', txt);
            var newMotion = motionFlag ? 'cover1' : 'cover2';
            lrcElement.setAttribute('data-motion', newMotion);
            motionFlag = !motionFlag;
            lrcElement.style.setProperty('--state', 'paused');
            void lrcElement.offsetHeight;
            var d = Math.max(0.3, Math.min(dur, 3.2));
            lrcElement.style.setProperty('--tt', d + 's');
            if (isPlaying && !audio.paused) lrcElement.style.setProperty('--state', 'running');
            else lrcElement.style.setProperty('--state', 'paused');
      }

      function refreshLrc(ct) {
            if (!lyricsData.length) return;
            var idx = -1;
            for (var i = lyricsData.length - 1; i >= 0; i--) {
                if (ct >= lyricsData.time - 0.03) {
                  idx = i;
                  break;
                }
            }
            if (idx === -1 && lyricsData.length) idx = 0;
            if (idx === currentLrcIndex) {
                if (currentLrcIndex >= 0 && isPlaying && !audio.paused) {
                  var remain = Math.max(0.2, lyricsData.duration - (ct - lyricsData
                  .time));
                  if (remain > 0.1) {
                        lrcElement.style.setProperty('--state', 'paused');
                        void lrcElement.offsetHeight;
                        lrcElement.style.setProperty('--tt', remain + 's');
                        lrcElement.style.setProperty('--state', 'running');
                  }
                }
                return;
            }
            if (idx >= 0 && idx < lyricsData.length) {
                currentLrcIndex = idx;
                var remain2 = lyricsData.duration;
                if (ct > lyricsData.time) remain2 = Math.max(0.2, lyricsData.duration - (ct - lyricsData
                .time));
                applyLyrics(lyricsData.lrc, remain2);
            }
      }

      function fullRefreshLyrics() {
            if (audio.duration) refreshLrc(audio.currentTime);
      }

      function updateUI() {
            if (!audio.duration) return;
            var pct = (audio.currentTime / audio.duration) * 100;
            playedBar.style.width = pct + '%';
            timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
            refreshLrc(audio.currentTime);
            if (audio.buffered.length) {
                var loaded = audio.buffered.end(audio.buffered.length - 1);
                loadedBar.style.width = Math.min((loaded / audio.duration) * 100, 100) + '%';
            }
      }

      function play() {
            audio.play().then(function() {
                isPlaying = true;
                updateBtnUI();
                lrcElement.style.setProperty('--state', 'running');
                fullRefreshLyrics();tp.style.left = '-40px';
            }).catch(function(e) { console.log("播放失败，请手动点击"); });
      }

      function pause() {
            audio.pause();
            isPlaying = false;
            updateBtnUI();tp.style.left = '-110px';
            lrcElement.style.setProperty('--state', 'paused');
      }

      function togglePlay() { isPlaying ? pause() : play(); }

      function prevSong() {
            var idx = (currentIndex - 1 + songs.length) % songs.length;
            loadSong(idx);
            if (!isPlaying) play();
            else audio.play().catch(function() {});
      }

      function nextSong() {
            var idx = (currentIndex + 1) % songs.length;
            loadSong(idx);
            if (!isPlaying) play();
            else audio.play().catch(function() {});
      }

      function toggleLoop() {
            loopMode = 1 - loopMode;
            loopBtn.style.backgroundPosition = loopMode ? 'center top' : 'left top';
      }

      function setProgressByEvent(e) {
            var rect = progressTrack.getBoundingClientRect();
            var x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration) && audio.duration > 0) {
                audio.currentTime = x * audio.duration;
            }
            playedBar.style.width = (x * 100) + '%';
            timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
      }

      function setVolume(val) {
            volume = Math.max(0, Math.min(1, val));
            audio.volume = volume;
            volFill.style.height = (volume * 100) + '%';
            volBtn.style.backgroundPosition = (volume === 0 ? 'right top' : 'left top');
      }

      function setVolumeByEvent(e) {
            var rect = volAdjust.getBoundingClientRect();
            var y = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
            setVolume(y);
      }

      function openDropdown() { renderSongList();
            dropdown.classList.add('show'); }

      function closeDropdown() { dropdown.classList.remove('show'); }

      // ========== 事件绑定 ==========
      playBtn.addEventListener('click', togglePlay);
      pauseBtn.addEventListener('click', togglePlay);
      prevBtn.addEventListener('click', prevSong);
      nextBtn.addEventListener('click', nextSong);
      loopBtn.addEventListener('click', toggleLoop);

      progressTrack.addEventListener('click', function(e) { setProgressByEvent(e); });
      progressTrack.addEventListener('mousedown', function(e) {
            isDragging = true;
            setProgressByEvent(e);
            document.addEventListener('mousemove', onDragMove);
            document.addEventListener('mouseup', onDragEnd);
            e.preventDefault();
      });

      function onDragMove(e) { setProgressByEvent(e); }

      function onDragEnd(e) {
            isDragging = false;
            setProgressByEvent(e);
            document.removeEventListener('mousemove', onDragMove);
            document.removeEventListener('mouseup', onDragEnd);
      }

      volBtn.addEventListener('click', function() { setVolume(volume > 0 ? 0 : 0.8); });
      volAdjust.addEventListener('mousedown', function(e) {
            setVolumeByEvent(e);
            document.addEventListener('mousemove', onVolMove);
            document.addEventListener('mouseup', onVolEnd);
            e.preventDefault();
      });

      function onVolMove(e) { setVolumeByEvent(e); }

      function onVolEnd(e) {
            setVolumeByEvent(e);
            document.removeEventListener('mousemove', onVolMove);
            document.removeEventListener('mouseup', onVolEnd);
      }

      playlistBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            dropdown.classList.contains('show') ? closeDropdown() : openDropdown();
      });
      closeDropdownBtn.addEventListener('click', closeDropdown);
      document.addEventListener('click', function(e) {
            if (dropdown.classList.contains('show') && !dropdown.contains(e.target) && e.target !== playlistBtn && !playlistBtn
                .contains(e.target)) {
                closeDropdown();
            }
      });

      audio.addEventListener('timeupdate', updateUI);
      audio.addEventListener('loadedmetadata', function() {
            if (lyricsData.length) applyLyrics(lyricsData.lrc, lyricsData.duration);
            updateUI();
            if (isPlaying) play();
      });
      audio.addEventListener('ended', function() {
            if (loopMode === 1) {
                audio.currentTime = 0;
                audio.play().catch(function() {});
                fullRefreshLyrics();
            } else {
                nextSong();
            }
      });

      document.addEventListener('keydown', function(e) {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
            if (e.code === 'Space') { e.preventDefault();
                togglePlay(); }
      });

      // ========== 初始化 ==========
      setVolume(0.8);
      loopBtn.style.backgroundPosition = 'left top';
      loadSong(0);

      // 自动播放
      setTimeout(function() {
            play();
      }, 500);

      console.log(' 播放器已加载');

(function() {
var mState = () => {papa.style.setProperty('--state',audio.paused ? 'paused' : 'running');};
audio.onplaying =audio.onpause = () => mState();
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };

    </script>

klxf 发表于 昨天 23:08

好听好看，谢谢友友精彩分享

查看完整版本: 央金拉姆《彩袖舞朝霞》