播放器专用

admin · 发表于 3 天前

admin · 发表于 3 天前

作词 : 阎肃
作曲 : 何占豪
梁祝《化蝶》-彭丽媛
词：阎肃
曲：陈钢/何占豪
碧草青青花盛开
彩蝶双双久徘徊
千古传颂生生爱
山伯永恋祝英台
同窗共读整三载
促膝并肩两无猜
十八相送情切切
谁知一别在楼台
楼台一别恨如海
泪染双翅身化彩蝶翩翩花丛来
历尽磨难真情在
天长地久不分开
天长地久不分开
不分开

[
[30, "梁祝《化蝶》"],
[40, "作词阎肃作曲何占豪"],
[50, "演唱彭丽媛"],
[57.2, "碧草青青花盛开"],
[65.52, "彩蝶双双九徘徊"],
[73.28, "千古传颂"],
[77.68, "生生爱"],
[81.84, "山伯永恋祝英台"],
[86.16, "同窗共读整三载"],
[104.36, "促膝并肩两无猜，"],
[112, "十八相送"],
[116.32, "情切切"],
[120.56, "谁知一别在楼台"],
[157.04, "楼台一别恨如海"],
[159.28, "泪染双翅身化彩蝶翩翩花丛来"],
[169.4, "历尽磨难真情在天长地久不分开"]
]

admin · 发表于 3 天前

jimeng-2025-06-18-11-古代仙山景下上有仙人，雾气绕绕飘，隐约宫臀美，高，宏伟，大.jpeg

admin · 发表于昨天 08:24

小播还是元素旋转（第 15 行代码）：6 个元素，容器 player，元素类名 son（对应CSS .son {} 选择器，第 4 行代码）。具体构图思路楼下谈。

admin · 发表于昨天 17:04

  <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放器</title>
<style>
      #papa {
         margin: auto;
         width: 1024px;
         height: 576px;
         background: url('https://cccimg.com/view.php/420c68ed9d148740f26c46230696dc23.gif') no-repeat center/cover;
         box-shadow: 3px 3px 20px #000;
         overflow: hidden;
         position: relative;
         z-index: 1;
      }
      #mypic {
         position: absolute;
         width: 60px;
         cursor: pointer;
         animation: rot 6s infinite linear;
         animation-play-state: var(--state, paused);
      }
      @keyframes rot { to { transform: rotate(360deg); } }
      .lrc-container {
         position: absolute;
         left: 50%;
         transform: translate(-50%);
         bottom: 10px;
         width: 80%;
         text-align: center;
         color: white;
         font-size: 28px;
         text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
         background-color: rgba(0,0,0,0.3);
         padding: 5px;
         border-radius: 5px;
         transition: opacity 0.3s;
      }
      .lrc-container.fade {
         opacity: 0.7;
      }
</style>
</head>
<body>
<div id="papa">
      <img id="mypic" src="https://cccimg.com/view.php/87dc6bc6ebb811c5fc565dcab9998dcc.png" alt="音乐图标" />
      <audio id="aud" src="https://cccimg.com/view.php/e01001a81d866af0701de0170eb66ce5.mp3" autoplay loop></audio>
</div>

<script>
      // 标准格式的歌词数据（时间单位：秒）
      let geci = [
         { time: 0.00, text: "芍药花开" },
         { time: 5.30, text: "LRC歌词编制：shuangzi" },
         { time: 13.00, text: "真以为方幻幻兮是与女方鼎见兮女曰" },
         { time: 23.00, text: "观乎" },
         { time: 24.00, text: "是曰" },
         { time: 26.00, text: "寄促且往" },
         { time: 28.00, text: "观乎惟之外" },
         { time: 31.00, text: "寻虚且乐" },
         { time: 33.00, text: "为士与女饮其相续赠之以芍药" },
         { time: 57.00, text: "百花争艳中" },
         { time: 60.00, text: "漫山芍药红" },
         { time: 65.00, text: "顾盼一瞬间" },
         { time: 68.00, text: "怦然已心动" },
         { time: 73.00, text: "都夸牡丹鲜艳怎知芍药雍容" },
         { time: 80.00, text: "谁能解读花语心有灵犀相通" },
         { time: 91.00, text: "啊......." },
         { time: 94.00, text: "芍药花开" },
         { time: 99.00, text: "啊......." },
         { time: 102.00, text: "芍药花开......" },
         { time: 106.00, text: "嫣然一笑风情万种" },
         { time: 113.00, text: "年年岁岁" },
         { time: 118.00, text: "佳期如梦" },
         { time: 124.00, text: "入梦" },
         { time: 144.00, text: "绿萼着红装" },
         { time: 147.00, text: "芍药掩芳容" },
         { time: 150.00, text: "相谑戏花影" },
         { time: 155.00, text: "尽在不言中" },
         { time: 159.00, text: "都爱牡丹富贵" },
         { time: 163.00, text: "怎知芍药意浓" },
         { time: 167.00, text: "从来花中姊妹" },
         { time: 170.00, text: "偏偏芍药情重" },
         { time: 177.00, text: "啊......." },
         { time: 180.00, text: "啊......芍药花开." },
         { time: 193.00, text: "一笑相逢把酒临风" },
         { time: 199.00, text: "岁岁年年" },
         { time: 204.00, text: "此情与共" },
         { time: 211.00, text: "与共....." },
         { time: 215.00, text: "啊......" },
         { time: 218.00, text: "芍药花开" },
         { time: 222.00, text: "啊.....芍药花开" },
         { time: 230.00, text: "一笑相逢把酒临风" },
         { time: 237.00, text: "岁岁年年此情与共" },
         { time: 240.00, text: "与共......." },
         { time: 252.00, text: "啊......此情与共" },
         { time: 260.00, text: "与共....." }
      ];

      // 获取音频元素和创建歌词容器
      const audio = document.getElementById('aud');
      const lrcContainer = document.createElement('div');
      lrcContainer.className = 'lrc-container';
      document.getElementById('papa').appendChild(lrcContainer);

      // 当前显示的歌词索引
      let currentLine = -1;

      // 更新歌词显示
      function updateLrc() {
         const currentTime = audio.currentTime;

         // 查找当前应该显示的歌词行
         let newLine = -1;
         for (let i = 0; i < geci.length; i++) {
            if (i === geci.length - 1 || (currentTime >= geci.time && currentTime < geci[i+1].time)) {
                  newLine = i;
                  break;
            }
         }

         // 如果需要更新歌词
         if (newLine !== currentLine) {
            // 添加淡入淡出效果
            lrcContainer.classList.add('fade');
            setTimeout(() => {
                  currentLine = newLine;
                  if (newLine >= 0) {
                     lrcContainer.textContent = geci[newLine].text;
                  } else {
                     lrcContainer.textContent = '';
                  }
                  lrcContainer.classList.remove('fade');
            }, 150);
         }
      }

      // 监听音频时间更新事件
      audio.addEventListener('timeupdate', updateLrc);

      // 监听音频播放/暂停事件，控制图片旋转
      const mypic = document.getElementById('mypic');
      audio.addEventListener('play', () => {
         mypic.style.setProperty('--state', 'running');
      });
      audio.addEventListener('pause', () => {
         mypic.style.setProperty('--state', 'paused');
      });

      // 点击图片切换播放/暂停状态
      mypic.addEventListener('click', () => {
         if (audio.paused) {
            audio.play();
         } else {
            audio.pause();
         }
      });

      // 初始化歌词显示
      updateLrc();
</script>
</body>
</html>

admin · 发表于 23 分钟前

<div style="position: relative; width: 100%; display: flex; justify-content: center; margin-top: -20px;">
<style>
#papa {
margin: 180px 0 20px;
background:#800 url('') no-repeat center/cover;
width: 1164px;
height: 700px;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
z-index: 1;
position: relative;
display: grid;
place-items: center;
}

#mdiv {
z-index: 10;
--size: 80px; /* 增加播放按钮大小 */
--color: teal;
position: absolute; /* 修改为绝对定位 */
left: 50%; /* 水平居中 */
top: 50%; /* 垂直居中 */
transform: translate(-50%, -50%); /* 精确居中 */
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
cursor: pointer;
}

#mdiv::before, #mdiv::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
border-color: var(--color) transparent;
border-radius: 100% 100% 100% 100%;
filter: none; /* 移除播放按钮阴影 */
}

#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }

#vid {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
display: none; /* 隐藏空的视频元素 */
}

#vido {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

#fullscreen {
position: absolute;
top: 30px;
right: 30px;
font: normal 2em/0em 楷体;
color: #fff; /* 修改为白色，提高可见性 */
background: rgba(0,0,0,0.5); /* 添加半透明背景 */
padding: 10px 15px; /* 添加内边距 */
border-radius: 5px; /* 圆角 */
opacity: 0.8;
cursor: pointer;
z-index: 111;
}

/* 新增编辑按钮样式 */
#editButton {
position: absolute;
bottom: 30px;
right: 30px;
background: rgba(0,0,0,0.7);
color: white;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
z-index: 100;
font-size: 16px;
}

/* 修改后的歌词样式 */
#lrc {
position: absolute;
z-index: 6;
left: 50%;
top: 95%; /* 调整歌词位置 */
transform: translate(-50%, -50%);
font: bold 2.5em 华文新魏;
/* 移除原有复杂样式，改用纯颜色显示 */
color:#fffffb; /* 红色文字（可自定义颜色） */
text-align: center;
width: 90%;
/* 移除所有阴影效果 */
text-shadow: none;
background: none; /* 移除背景渐变 */
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes cover1 { to { clip-path: inset(0 0 0 0); } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="papa">
<div id="mdiv" title="播放/暂停"></div>
<div id="lrc" title="歌词显示"></div>
<span id="fullscreen">全屏欣赏</span>
<button id="editButton">编辑</button>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3956400.mp3" autoplay loop></audio>
<video id="vid" src=" " autoplay loop muted></video>
<video id="vido" src="https://cccimg.com/view.php/db54a0e31a1108f9cda4553699e4fda4.mp4" autoplay loop muted></video>
</div>

<script>
// 脚本部分无需修改，仅样式影响视觉效果
mdiv.onclick = () => aud.paused ?( aud.play(),vido.play()):(aud.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mdiv.style.animationPlayState = 'paused');

let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};

// 编辑按钮点击事件
document.getElementById('editButton').addEventListener('click', function() {
alert('编辑功能已触发！');
});
</script>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `[00:00.000] 我们是共产主义接班人：少年合唱团

[00:05.300]LRC歌词编制：shuangzi

[00:10.980]我们是共产主义接班人

[00:18.580]继承革命先辈的光荣传统

[00:24.630]爱祖国爱人民

[00:28.770]鲜艳的红领巾飘扬在前胸

[00:35.360]不怕困难不怕敌人

[00:39.580]顽强学习坚决斗争

[00:43.600]向着胜利勇敢前进

[00:47.400]向着胜利勇敢前进前进

[00:51.250]向着胜利勇敢前进

[00:55.930]我们是共产主义接班人

[01:00.789]

[01:01.070]我们是共产主义接班人

[01:08.829]沿着革命先辈的光荣路程

[01:15.079]爱祖国爱人民

[01:19.319]少先队员是我们骄傲的名称

[01:25.769]时刻准备建立功勋

[01:30.188]要把敌人消灭干净

[01:34.450]为着理想勇敢前进

[01:38.760]为着理想勇敢前进前进

[01:42.379]为着理想勇敢前进

[01:46.910]我们是共产主义接班人

[01:53.290]`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j < ar.length - 1; j ++) {
         if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item; });
      return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let calcRule = [60,1,0.001];
      for(x of text.split('\n')) {
         let ar = [];
         let re = /\d+[\.:]\d+([\.:]\d+)?/g;
         let geci = x.replace(re,'');
         if(geci) {
            geci = geci.replace(/[\[\]\'\"\t,]/g,'');
            let time = x.match(re);
            if(time != null) {
                  for(y of time) {
                     let tmp = y.match(/\d+/g);
                     let sec = 0;
                     for(z in tmp) sec += tmp[z] * calcRule[z];
                     ar[0] = [parseFloat(sec.toFixed(2)), geci];
                     lrcAr.push(ar[0]);
                  }
            }
         }
      }
      lrcAr.sort((a,b) => a[0] - b[0]);
      return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr[mKey][1];
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
         if (aud.currentTime <= lrcAr[j][0]) {
            mKey = j - 1;
            break;
         }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
      showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
         sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state', 'running'), mdiv.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
         if (aud.currentTime >= lrcAr[j][0]) {
            cKey = j;
            if (mKey === j) showLrc(lrcAr[j][2]);
            else continue;
         }
      }
});

aud.addEventListener('pause', () => mState()); /*监听暂停事件*/
aud.addEventListener('play', () => mState()); /*监听播放事件*/
aud.addEventListener('seeked', () => calcKey()); /*监听查询事件*/

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
</div>
<div style="height:660px;"></div>

admin · 发表于 12 分钟前

admin · 发表于 11 分钟前

admin · 发表于 11 分钟前

admin · 发表于 10 分钟前

		自动登录	找回密码
密码			立即注册

播放器专用

浏览过的版块