✨️靓标库🧚‍♂️名人堂🥊猜拳🏧黑市🏧银行💹抽奖
✨活动👮曝光台📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注切换到宽版
  • 首页
  • 社区
  • 资源
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 左下角胶囊音乐样式代码
    返回列表 发布新帖
    查看: 224|回复: 0

    [代码技巧] 子比主题 – 左下角胶囊音乐样式代码

    [复制链接]
    SunJu_FaceMall
    社区贡献

    318

    主题

    191

    回帖

    1万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 0 颗
       贡献 : 35308 点
       金币 : 92 枚
    Icon在线时间 : 1408 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-5-11

    荣誉勋章

    连签LV.1会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

    实力殿堂·绝代收藏家
    飞流名人堂成员 1 FLLTCN 实名认证 特邀大神认证 诚信商家认证 信誉担保认证 精华作者+认证 飞流官方团队 vip vip-year 发表于 2025-10-10 17:40:19 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    腾飞博客给大家写了一款仿张洪博客的胶囊音乐样式，我觉得这个还是不错的，一开始腾飞想写插件，发现插件有点卡，为了不影响速度直接用代码实现，这个算半成品，也算已经写好了，都可以用，话不多说喜欢的自行部署吧！

    image.webp
    当鼠标点了胶囊就有一个效果横向弹出来，然后播放音乐，当点了之后就收缩就自动停止音乐，模仿了张洪博客的样式，一开始写的是根据封面颜色，发现跨域问题，但是这个写插件可以解决，插件虽然写好了但是删掉了，因为太卡了，所以就代码分享吧，有技术的可以二开一下！

    代码部署


    将下面的代码放到：子比主题–>>自定义底部HTML代码，全部代码直接丢里面就可以！
    1. <style>
    2. :root{--player-height:44px;--capsule-radius:22px;--album-size:32px;--album-gap:9px;--lyrics-max-width:150px;--lyric-padding-right:12px;--main-bg:rgba(60,66,64,0.97);--main-bg2:rgba(70,74,80,0.98)}body{min-height:100vh;background:#f8f8f9}.tengfei-player-container{position:fixed;left:32px;bottom:40px;z-index:1000;min-width:166px;max-width:420px;width:340px;height:var(--player-height);border-radius:var(--capsule-radius);box-shadow:0 2px 9px rgba(0,0,0,0.18);background:linear-gradient(120deg,var(--main-bg) 88%,var(--main-bg2) 100%);display:flex;align-items:center;padding:0 10px;cursor:pointer;transition:width 0.6s cubic-bezier(.51,.33,.38,1.14),max-width 0.6s cubic-bezier(.51,.33,.38,1.14),min-width 0.6s cubic-bezier(.51,.33,.38,1.14),box-shadow 0.18s,background 0.8s;overflow:visible}@media (max-width:700px){.tengfei-player-container{display:none !important}}.tengfei-player-container.collapsed{width:auto !important;min-width:120px;max-width:280px;transition:width 0.5s cubic-bezier(.42,0,.11,1.05),max-width 0.29s cubic-bezier(.42,0,.11,1.05),min-width 0.22s cubic-bezier(.42,0,.11,1.05)}.song-title-area{display:flex;align-items:center;min-width:0;transition:opacity 0.39s cubic-bezier(.42,0,.11,1.05)}.tengfei-album-cover{width:var(--album-size);height:var(--album-size);object-fit:cover;border-radius:50%;margin-right:var(--album-gap);border:2px solid rgba(255,255,255,0.81);box-shadow:0 1px 4px rgba(0,0,0,0.09);flex-shrink:0;transition:box-shadow 0.25s,opacity 0.39s cubic-bezier(.42,0,.11,1.05)}.tengfei-song-title{color:white;font-size:13px;font-weight:500;min-width:34px;max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:max-width .19s cubic-bezier(.42,0,.11,1.05),font-size .14s cubic-bezier(.42,0,.11,1.05),opacity 0.34s cubic-bezier(.42,0,.11,1.05);cursor:pointer;padding-right:2px;flex-shrink:2;display:inline-block}.center-lyric-area{flex-shrink:1;flex-grow:1;min-width:0;max-width:78vw;height:100%;display:flex;align-items:center;justify-content:center;position:relative;margin-left:16px;transition:margin-left 0.32s cubic-bezier(.42,0,.11,1.05),opacity 0.38s cubic-bezier(.42,0,.11,1.05);opacity:1}.lyrics-container{max-width:var(--lyrics-max-width);width:auto;white-space:nowrap;overflow:hidden;color:#fff;text-align:left;font-size:11.3px;font-weight:bold;letter-spacing:0.07em;line-height:1;pointer-events:none;position:relative;padding-right:var(--lyric-padding-right);text-overflow:ellipsis;flex:1 1 0;z-index:2;transition:max-width 0.38s cubic-bezier(.42,0,.11,1.05),font-size .14s cubic-bezier(.42,0,.11,1.05),opacity 0.5s cubic-bezier(.42,0,.11,1.05);background:none;opacity:1}.lyrics-line{display:block;opacity:1;pointer-events:none;transition:opacity 0.34s cubic-bezier(.5,.7,.7,1),color .17s,font-size .11s}.lyrics-current{color:#fff}.lyrics-next{color:rgba(255,255,255,0.29);font-size:9.5px}.lyrics-capsule-mask{position:absolute;top:0;bottom:0;right:0;pointer-events:none;border-radius:0 var(--capsule-radius) var(--capsule-radius) 0;background:linear-gradient(to left,rgba(183,182,182,0.65) 78%,transparent 100%);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:0;z-index:13;transition:opacity 0.25s cubic-bezier(.42,0,.11,1.05),left 0.2s cubic-bezier(.42,0,.11,1.05)}.tengfei-player-container:not(.collapsed):hover .lyrics-capsule-mask{opacity:1}.controls{position:absolute;top:0;right:0px;height:var(--player-height);display:flex;align-items:center;gap:5px;z-index:16;padding-right:10px;pointer-events:none;opacity:1;transition:opacity 0.39s cubic-bezier(.42,0,.11,1.05)}.control-btn{background:rgba(255,255,255,0.09);border:none;color:white;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .18s cubic-bezier(.42,0,.11,1.05),box-shadow .22s cubic-bezier(.42,0,.11,1.05),opacity .13s cubic-bezier(.42,0,.11,1.05),transform 0.32s cubic-bezier(.42,0,.11,1.05);opacity:.95;pointer-events:auto;box-shadow:0 1px 5px rgba(0,0,0,0.07);outline:none;border:0.1px solid rgba(225,225,225,0.09);font-size:0}.control-btn svg{display:block;width:21px;height:21px;pointer-events:none;transition:filter 0.13s,transform 0.13s;filter:drop-shadow(0 0 2px rgba(51,120,235,0.10));stroke:#fff}.control-btn:hover{background:rgba(255,255,255,0.19)}.control-btn:hover svg{filter:drop-shadow(0 0 5px #99c2ff60);transform:scale(1.14);stroke:#3caae7}.tengfei-player-container:not(:hover):not(.collapsed) .control-btn{opacity:0 !important;pointer-events:none;transform:scale(.89)}.tengfei-player-container:not(.collapsed):hover .control-btn{opacity:1 !important;pointer-events:auto;transform:scale(1)}.tengfei-player-container.collapsed .center-lyric-area,.tengfei-player-container.collapsed .controls,.tengfei-player-container.collapsed .lyrics-capsule-mask{opacity:0 !important;pointer-events:none !important;width:0 !important;margin:0 !important;display:none !important;transition:opacity 0.38s cubic-bezier(.42,0,.11,1.05)}.tengfei-player-container:not(.collapsed) .center-lyric-area,.tengfei-player-container:not(.collapsed) .controls{opacity:1;pointer-events:auto;display:flex !important;transition:opacity 0.38s cubic-bezier(.42,0,.11,1.05)}
    3. </style>
    4. </head>
    5. <body>
    6. <div class="tengfei-player-container collapsed" id="tengfeiMusicPlayer">
    7.   <div class="song-title-area">
    8.     <img class="tengfei-album-cover" src="" alt="专辑封面" id="tengfeiCoverClick">
    9.     <div class="tengfei-song-title" id="tengfeiTitleClick">正在加载...</div>
    10.   </div>
    11.   <div class="center-lyric-area">
    12.     <div class="lyrics-container" id="tengfeiLyricsScroll"></div>
    13.     <div class="lyrics-capsule-mask"></div>
    14.     <div class="controls">
    15.       <button class="control-btn prev" id="tengfeiPrevBtn" title="上一首">
    16.         <svg viewBox="0 0 32 32" fill="none">
    17.           <g>
    18.             <rect x="7.5" y="9.5" rx="1.2" width="2.2" height="13" fill="none" stroke="currentColor" stroke-width="1.45"/>
    19.             <polygon points="22.3,8.5 13,16 22.3,23.5" fill="none" stroke="currentColor" stroke-width="2.65" stroke-linecap="round" stroke-linejoin="round"/>
    20.           </g>
    21.         </svg>
    22.       </button>
    23.       <button class="control-btn play-pause" id="tengfeiPlayPauseBtn" title="播放/暂停">
    24.         <svg id="tengfeiPlayIconSvg" viewBox="0 0 32 32" fill="none">
    25.           <g id="tengfeiPlaySvgIcon">
    26.             <polygon points="13.6,9.6 13.6,22.4 23,16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
    27.           </g>
    28.         </svg>
    29.       </button>
    30.       <button class="control-btn next" id="tengfeiNextBtn" title="下一首">
    31.         <svg viewBox="0 0 32 32" fill="none">
    32.           <g>
    33.             <rect x="22.3" y="9.5" rx="1.2" width="2.2" height="13" fill="none" stroke="currentColor" stroke-width="1.45"/>
    34.             <polygon points="9.7,8.5 19,16 9.7,23.5" fill="none" stroke="currentColor" stroke-width="2.65" stroke-linecap="round" stroke-linejoin="round"/>
    35.           </g>
    36.         </svg>
    37.       </button>
    38.     </div>
    39.   </div>
    40. </div>
    41. <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/dist/tinycolor-min.js"></script>
    42. <script>
    43. (function() {
    44.   function setPauseIcon(isPause){
    45.     const svg = document.getElementById('tengfeiPlayIconSvg');
    46.     if(isPause){
    47.       svg.innerHTML = '<g id="tengfeiPlaySvgIcon">' +
    48.         '<rect x="12.2" y="10.2" rx="1.05" width="3.2" height="11.6" fill="none" stroke="currentColor" stroke-width="2.1"/>' +
    49.         '<rect x="17.0" y="10.2" rx="1.05" width="3.2" height="11.6" fill="none" stroke="currentColor" stroke-width="2.1"/>' +
    50.         '</g>';
    51.     }else{
    52.       svg.innerHTML = '<g id="tengfeiPlaySvgIcon">' +
    53.         '<polygon points="13.6,9.6 13.6,22.4 23,16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>' +
    54.         '</g>';
    55.     }
    56.   }
    57.   const playerState = {
    58.     playlist: [],
    59.     currentIndex: 0,
    60.     isPlaying: false,
    61.     lyrics: [],
    62.     currentLyricIndex: 0,
    63.     lyricOffset: 0,
    64.     collapsed: true
    65.   };
    66.   const elements = {
    67.     playerContainer: document.getElementById('tengfeiMusicPlayer'),
    68.     albumCover: document.querySelector('.tengfei-album-cover'),
    69.     songTitle: document.querySelector('.tengfei-song-title'),
    70.     playPauseBtn: document.getElementById('tengfeiPlayPauseBtn'),
    71.     prevBtn: document.getElementById('tengfeiPrevBtn'),
    72.     nextBtn: document.getElementById('tengfeiNextBtn'),
    73.     lyricsScroll: document.getElementById('tengfeiLyricsScroll'),
    74.     controls: document.querySelector('.controls'),
    75.     songTitleArea: document.querySelector('.song-title-area'),
    76.     lyricArea: document.querySelector('.center-lyric-area'),
    77.     lyricsMask: document.querySelector('.lyrics-capsule-mask'),
    78.     playIconSvg: document.getElementById('tengfeiPlayIconSvg')
    79.   };
    80.   const audio = new Audio();

    82.   function calcCapsuleMask() {
    83.     if(playerState.collapsed) return;
    84.     const lyricRect = elements.lyricsScroll.getBoundingClientRect();
    85.     const parentRect = elements.lyricArea.getBoundingClientRect();
    86.     let left = lyricRect.right - parentRect.left; // 歌词区右边到父级左边
    87.     elements.lyricsMask.style.left = left + 'px';
    88.     elements.lyricsMask.style.right = '0';
    89.     elements.lyricsMask.style.top = '0';
    90.     elements.lyricsMask.style.bottom = '0';
    91.   }
    92.   function triggerMaskUpdate() {
    93.     setTimeout(calcCapsuleMask, 1);
    94.   }
    95.   window.addEventListener('resize', triggerMaskUpdate);

    97.   function setGradientBackground(coverUrl) {
    98.     elements.albumCover.src = coverUrl || "https://via.placeholder.com/40/47484c/fff?text=音乐";
    99.     elements.albumCover.onerror = () => {
    100.       elements.albumCover.src="https://via.placeholder.com/40/47484c/fff?text=音乐";
    101.       elements.playerContainer.style.background="rgba(60,66,64,0.93)";
    102.     }
    103.     const img = new Image();
    104.     img.crossOrigin="Anonymous";
    105.     img.src=coverUrl;
    106.     img.onload = () => {
    107.       try {
    108.         const canvas = document.createElement('canvas');
    109.         canvas.width = 10; canvas.height = 10;
    110.         const ctx = canvas.getContext('2d');
    111.         ctx.drawImage(img, 0, 0, 10, 10);
    112.         const data = ctx.getImageData(0,0,10,10).data;
    113.         let r=0,g=0,b=0,count=0;
    114.         for (let i=0;i<data.length;i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; count++; }
    115.         r=Math.floor(r/count); g=Math.floor(g/count); b=Math.floor(b/count);
    116.         let mainColor = tinycolor({ r,g,b });
    117.         if(mainColor.getBrightness()<60) mainColor=mainColor.lighten(20);
    118.         if(mainColor.getBrightness()>230) mainColor=mainColor.darken(12);
    119.         const dark = tinycolor(mainColor).darken(13).setAlpha(0.93).toRgbString();
    120.         const light = tinycolor(mainColor).lighten(3).setAlpha(0.90).toRgbString();
    121.         elements.playerContainer.style.transition="background 0.8s";
    122.         elements.playerContainer.style.background=`linear-gradient(135deg,${light},${dark} 95%)`;
    123.       } catch(e){
    124.         elements.playerContainer.style.background="rgba(60,66,64,0.93)";
    125.       }
    126.     }
    127.   }
    128.   async function fetchPlaylist() {
    129.     try {
    130.       const res = await fetch('https://music.3e0.cn/?server=tencent&type=playlist&id=3771408184');
    131.       const playlist = await res.json();
    132.       if(Array.isArray(playlist)&&playlist.length>0) {
    133.         playerState.playlist = playlist;
    134.         loadSong(0);
    135.       }
    136.       else elements.songTitle.textContent = '获取播放列表失败';
    137.     } catch(e){
    138.       elements.songTitle.textContent = '获取播放列表出错';
    139.     }
    140.   }
    141.   function loadSong(index) {
    142.     if(index < 0 || index >= playerState.playlist.length) return;
    143.     const song = playerState.playlist[index];
    144.     playerState.currentIndex = index;
    145.     elements.songTitle.textContent = song.name || '未知歌曲';
    146.     elements.songTitle.title = song.name || '未知歌曲';
    147.     setGradientBackground(song.pic);
    148.     audio.src = song.url || '';
    149.     audio.load();
    150.     fetchLyrics(song.lrc || song.lyricsUrl || song.lrcUrl);
    151.     setTimeout(() => {
    152.       if (playerState.collapsed) {
    153.         let titleW = getTextWidth(elements.songTitle.textContent, window.getComputedStyle(elements.songTitle));
    154.         let calcW = 32 + 9 + Math.max(titleW,40) + 2*10 + 18;
    155.         calcW = Math.max(126, Math.min(calcW, 260));
    156.         elements.playerContainer.style.width = calcW + 'px';
    157.       }
    158.       triggerMaskUpdate();
    159.     }, 50);
    160.   }
    161.   function getTextWidth(text, style) {
    162.     const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    163.     const context = canvas.getContext("2d");
    164.     context.font = [
    165.       style.fontWeight,
    166.       style.fontSize,
    167.       style.fontFamily
    168.     ].join(' ');
    169.     return context.measureText(text).width;
    170.   }

    172.   let lyricMaxPixel = 0;
    173.   let lyricFontSize = 11.3;
    174.   let lyricGapAuto = 14;
    175.   let titleFontSize = 13;
    176.   let titleMaxWidth = 118;
    177.   let lastLyricWidth = 0;

    179.   function updateLyricLayout() {
    180.     if(playerState.collapsed) return;
    181.     if(!playerState.lyrics || playerState.lyrics.length==0) return;
    182.     let maxLyric = "";
    183.     for(const item of playerState.lyrics)
    184.       if(item.text && item.text.length > maxLyric.length) {
    185.         maxLyric = item.text;
    186.       }
    187.     let isEnglish = /[a-zA-Z]{2}/.test(maxLyric);
    188.     let lyricLen = maxLyric.length;
    189.     let fontSize = 12.4, lyricsWidth = 150;
    190.     let gap = 14;
    191.     let titleSize = 13;
    192.     let titleWidthMin = 60, titleWidthMax = 148, titleWidthBase = 120;
    193.     if(isEnglish || lyricLen > 22) {
    194.       fontSize = 10.6; lyricsWidth = 204; gap = 9; titleSize = 12.1; titleWidthBase = 92;
    195.     } else if(lyricLen > 16) {
    196.       fontSize = 11.4; lyricsWidth = 162; gap = 12; titleSize = 12.35; titleWidthBase = 105;
    197.     } else if(lyricLen > 11) {
    198.       fontSize = 12.2; lyricsWidth = 146; gap = 15; titleSize = 12.8; titleWidthBase = 115;
    199.     } else {
    200.       fontSize = 13.2; lyricsWidth = 92+lyricLen*4.5; gap = 18; titleSize = 13.1; titleWidthBase = 128;
    201.     }
    202.     lyricsWidth = Math.min(lyricsWidth, 226);
    203.     let maxW = Math.max(titleWidthMin, Math.min(titleWidthBase, 0.72*lyricsWidth));
    204.     elements.lyricsScroll.style.fontSize = fontSize + "px";
    205.     elements.lyricsScroll.style.maxWidth = lyricsWidth + "px";
    206.     lyricMaxPixel = lyricsWidth;
    207.     lyricFontSize = fontSize;
    208.     lastLyricWidth = lyricsWidth;
    209.     elements.lyricArea.style.marginLeft = gap + "px";
    210.     lyricGapAuto = gap;
    211.     titleMaxWidth = Math.max(titleWidthMin, Math.min(titleWidthMax, titleWidthBase, elements.playerContainer.clientWidth-lyricsWidth-80-32-10-10));
    212.     elements.songTitle.style.maxWidth = titleMaxWidth + "px";
    213.     elements.songTitle.style.fontSize = titleSize + "px";
    214.     titleFontSize = titleSize;
    215.     triggerMaskUpdate();
    216.   }
    217.   async function fetchLyrics(url) {
    218.     try {
    219.       if(!url){ showLyrics('暂无歌词'); triggerMaskUpdate(); return; }
    220.       const response = await fetch(url);
    221.       const text = await response.text();
    222.       parseLyrics(text);
    223.     } catch (error) {
    224.       showLyrics('歌词加载失败');
    225.       triggerMaskUpdate();
    226.     }
    227.   }
    228.   function parseLyrics(text) {
    229.     if(!text){ showLyrics('暂无歌词'); triggerMaskUpdate(); return;}
    230.     const lines = text.split('\n');
    231.     const lyrics = [];
    232.     const regexs = [
    233.       /\[(\d+):(\d+)\.(\d+)\](.*)/,
    234.       /\[(\d+):(\d+)\](.*)/
    235.     ];
    236.     for(let line of lines){
    237.       let match = line.match(regexs[0]);
    238.       if(match){
    239.         let m=parseInt(match[1]), s=parseInt(match[2]), ms=parseInt(match[3]);
    240.         let time = m*60 + s + ms/100;
    241.         let lyricText = match[4].trim();
    242.         if(lyricText) lyrics.push({time, timeEnd: time+2, text: lyricText});
    243.         continue;
    244.       }
    245.       match = line.match(regexs[1]);
    246.       if(match){
    247.         let m = parseInt(match[1]), s = parseInt(match[2]);
    248.         let time = m*60 + s;
    249.         let lyricText = match[3].trim();
    250.         if(lyricText) lyrics.push({time, timeEnd: time+2, text: lyricText});
    251.       }
    252.     }
    253.     for (let i=0;i<lyrics.length-1;i++) {
    254.       lyrics[i].timeEnd = lyrics[i+1].time-0.1;
    255.     }
    256.     playerState.lyrics = lyrics;
    257.     playerState.currentLyricIndex = 0;
    258.     updateLyricLayout();
    259.     showLyricsAnimated(0, false);
    260.     triggerMaskUpdate();
    261.   }
    262.   function showLyricsAnimated(idx, animate=true) {
    263.     const lyrics = playerState.lyrics || [];
    264.     const cur = lyrics[idx] ? lyrics[idx].text : '';
    265.     const nxt = lyrics[idx+1] ? lyrics[idx+1].text : '';
    266.     const container = elements.lyricsScroll;
    267.     container.innerHTML = '';
    268.     const lineCur = document.createElement('div');
    269.     lineCur.className = 'lyrics-line lyrics-current';
    270.     lineCur.textContent = cur || '';
    271.     lineCur.style.opacity = "1";
    272.     lineCur.style.transition = "opacity 0.34s cubic-bezier(.5,.7,.7,1)";
    273.     lineCur.style.willChange = "opacity";
    274.     lineCur.style.fontSize = lyricFontSize + "px";
    275.     const lineNxt = document.createElement('div');
    276.     lineNxt.className = 'lyrics-line lyrics-next';
    277.     lineNxt.textContent = nxt || '';
    278.     lineNxt.style.opacity = "0.45";
    279.     lineNxt.style.transition = "opacity 0.33s cubic-bezier(.54,.54,.7,1)";
    280.     lineNxt.style.willChange = "opacity";
    281.     lineNxt.style.fontSize = Math.max(9, lyricFontSize*0.77) + "px";
    282.     container.appendChild(lineCur);
    283.     container.appendChild(lineNxt);
    284.     if(animate){
    285.       lineCur.style.opacity = "0";
    286.       setTimeout(()=>{ lineCur.style.opacity="1"; }, 12);
    287.       lineNxt.style.opacity = "0.15";
    288.       setTimeout(()=>{ lineNxt.style.opacity="0.45"; }, 33);
    289.     }
    290.     triggerMaskUpdate();
    291.   }
    292.   function updateLyrics() {
    293.     if (!playerState.lyrics || playerState.lyrics.length === 0) return;
    294.     const currentTime = audio.currentTime + playerState.lyricOffset;
    295.     const lyrics = playerState.lyrics;
    296.     let newIndex = playerState.currentLyricIndex;
    297.     let found = false;
    298.     for(let i=0; i<lyrics.length; i++){
    299.       if(currentTime >= lyrics[i].time && currentTime < lyrics[i].timeEnd) {
    300.         newIndex = i; found = true; break;
    301.       }
    302.     }
    303.     if(!found && currentTime < lyrics[0].time) { newIndex = 0; }
    304.     else if(!found) { newIndex = lyrics.length-1; }
    305.     if(newIndex !== playerState.currentLyricIndex) {
    306.       showLyricsAnimated(newIndex, true);
    307.       playerState.currentLyricIndex = newIndex;
    308.     } else if(playerState.lyrics && elements.lyricsScroll.children.length===2){
    309.       let nxt = lyrics[newIndex+1] ? lyrics[newIndex+1].text : '';
    310.       elements.lyricsScroll.children[1].textContent = nxt;
    311.     }
    312.     triggerMaskUpdate();
    313.   }
    314.   function togglePlay(force) {
    315.     if(force==="play"){
    316.       audio.play().catch(()=>{});
    317.       playerState.isPlaying=true;
    318.       setPauseIcon(true);
    319.       elements.playerContainer.classList.add('playing');
    320.     }else if(force==="pause"){
    321.       audio.pause();
    322.       playerState.isPlaying=false;
    323.       setPauseIcon(false);
    324.       elements.playerContainer.classList.remove('playing');
    325.       collapsePlayer();
    326.     }else{
    327.       if(audio.paused)  togglePlay("play");
    328.       else togglePlay("pause");
    329.     }
    330.   }
    331.   function nextSong() {
    332.     let idx = (playerState.currentIndex+1)%playerState.playlist.length;
    333.     loadSong(idx); if(playerState.isPlaying) audio.play();
    334.   }
    335.   function prevSong() {
    336.     let idx = (playerState.currentIndex-1+playerState.playlist.length)%playerState.playlist.length;
    337.     loadSong(idx); if(playerState.isPlaying) audio.play();
    338.   }
    339.   elements.playPauseBtn.addEventListener('click', e=>{
    340.     e.stopPropagation(); togglePlay();
    341.   });
    342.   elements.nextBtn.addEventListener('click', e=>{
    343.     e.stopPropagation(); nextSong();
    344.   });
    345.   elements.prevBtn.addEventListener('click', e=>{
    346.     e.stopPropagation(); prevSong();
    347.   });
    348.   function collapsePlayer() {
    349.     playerState.collapsed = true;
    350.     elements.playerContainer.classList.add('collapsed');
    351.     elements.playerContainer.style.transition="width 0.59s cubic-bezier(.49,.37,.36,.97), max-width 0.36s, min-width 0.32s";
    352.     elements.playerContainer.style.width = '';
    353.     elements.songTitle.style.maxWidth = '118px';
    354.     elements.songTitle.style.fontSize = '13px';
    355.     audio.pause();
    356.     elements.lyricsScroll.style.fontSize = "11.3px";
    357.     elements.lyricsScroll.style.maxWidth = "150px";
    358.     elements.lyricArea.style.marginLeft = "14px";
    359.     setTimeout(() => {
    360.       elements.songTitleArea.style.opacity = 1;
    361.       elements.lyricArea.style.opacity = 0;
    362.       elements.lyricsScroll.style.opacity = 0;
    363.       elements.controls.style.opacity = 0;
    364.     }, 20);
    365.     elements.lyricsMask.style.width = "0px";
    366.     elements.lyricsMask.style.left = "";
    367.     elements.lyricsMask.style.opacity = "0";
    368.   }
    369.   function expandPlayer() {
    370.     playerState.collapsed = false;
    371.     elements.playerContainer.classList.remove('collapsed');
    372.     elements.playerContainer.style.transition="width 0.68s cubic-bezier(.51,.33,.38,1.18), max-width 0.45s";
    373.     elements.playerContainer.style.width = '340px';
    374.     elements.songTitleArea.style.opacity = 1;
    375.     elements.lyricArea.style.opacity = 1;
    376.     elements.lyricsScroll.style.opacity = 1;
    377.     elements.controls.style.opacity = 1;
    378.     setTimeout(()=>{togglePlay('play');},130);
    379.     setTimeout(()=>{updateLyricLayout();
    380.       elements.lyricArea.style.opacity=1;
    381.       elements.lyricsScroll.style.opacity=1;
    382.       elements.controls.style.opacity=1;
    383.       triggerMaskUpdate();
    384.     },120);
    385.   }
    386.   elements.playerContainer.addEventListener('click', function(e){
    387.     if ([elements.playPauseBtn, elements.prevBtn, elements.nextBtn,elements.playIconSvg].includes(e.target)) return;
    388.     if (playerState.collapsed) { expandPlayer(); }
    389.     else { collapsePlayer(); }
    390.   });
    391.   audio.addEventListener('timeupdate', updateLyrics);
    392.   audio.addEventListener('ended', ()=>{ nextSong(); });

    394.   fetchPlaylist();
    395.   collapsePlayer();
    396.   if(window.matchMedia('(any-pointer: coarse)').matches){
    397.     elements.prevBtn.style.display = elements.nextBtn.style.display = elements.playPauseBtn.style.display = 'none';
    398.   }

    400.   setTimeout(triggerMaskUpdate, 200);
    401. })();
    402. </script>
    复制代码


    【小飞侠提醒您：搜索时输入t1608代号，方便好记直达本帖！】
    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：无钉推群：BAYR2383 站长QQ：3388700000

    ❯

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-5-11 08:50 , Processed in 0.072959 second(s), 67 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表