亚伦影音工作室 发表于 2025-3-20 14:43

原生LRC歌词播放器[修改马老播放器]

本帖最后由 亚伦影音工作室 于 2025-3-23 20:18 编辑 <br /><br /><style>
#papa {
        margin: 80px 0 0 calc(50% - 721px);
        width: 1280px;
        height: 680px;
        box-shadow: 4px 8px 28px gray;
        background:radial-gradient(circle,transparent, rgba(10,40,18)100%),url('https://pic1.imgdb.cn/item/671d8d6ed29ded1a8cbe9b99.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
      #mplayer { --prg: 0%; margin: 600px 820px auto; padding: 6px;width: 350px;   position: absolute; color: #fff;}
      #lrcDiv { padding: 0px 0; width: 550px; height: 130px; overflow: hidden; text-align: center; box-sizing: border-box; position: absolute;top: 200px;left: 92px;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)}
      #lrcDiv > p { margin:20px auto; padding: 0; color: #eee;font: normal 22px 华文行楷; transition: .1s; }
      #lrcDiv p.hlight {color: transparent;font: normal 30px 华文行楷;background: linear-gradient(45deg, #fff202 31%,#5BF61A 50%,#fff000 77%);-webkit-background-clip: text; }
      #btns-area { width: 100%; display: flex; justify-content: space-between; }
      #btn-play { width: 20px; height: 20px; cursor: pointer; position: relative; }
      #btn-play::after { position: absolute; content: ''; width: 100%; height: 100%; background: red; clip-path: var(--clip); }
      #progDiv { width: 100%; height: 10px; background: linear-gradient(to right, red var(--prg), gray var(--prg), gray 0) no-repeat 0 50% / 100% 2px; cursor: pointer; }
      .play { --clip: polygon(10% 0, 100% 50%, 10% 100%); }
      .pause { --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0); }
</style>
<div id="papa">
<div id="lrcDiv"></div>
<div id="mplayer">
      
      <div id="btns-area">
                <div id="time1">00:00</div>
                <div id="btn-play" class="pause"></div>
                <div id="time2">00:00</div>
      </div>
      <div id="progDiv"></div>
</div>
</div>
<audio src="https://s2.ananas.chaoxing.com/sv-w9/audio/aa/86/1c/0b67d75bfbc0fd65f67e601491c458ef/audio.mp3" autoplay loop></audio>

<script>
const mplayer = document.querySelector('#mplayer');
const aud = document.querySelector('audio');
const lrcDiv = document.querySelector('#lrcDiv');
const progDiv = document.querySelector('#progDiv');
const btnPlay = document.querySelector('#btn-play');
const vids = document.querySelectorAll('video');

let lrcAr = [];

//处理LRC歌词
const getLrcAr = (text) => {
      const ar = text.trim().split('\n');
      ar.sort();
      var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
      ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
                let p = document.createElement('p');
                p.innerText = result.trim();
                lrcDiv.appendChild(p);
      });
};

//渲染播放器
const updatePlayerDatas = () => {
      const hh = lrcDiv.offsetHeight / 5 + 20;
      const prg = (aud.currentTime / aud.duration) * 100;
      time1.innerText = formatTime(aud.currentTime);
      time2.innerText = formatTime(aud.duration);
      mplayer.style.setProperty('--prg', prg + '%');
      for (let i = 0; i < lrcAr.length; i ++) {
                const lrc = {time: lrcAr, text: lrcAr};
                const next = i < lrcAr.length - 1 ? lrcAr : null;
                const p = lrcDiv.children;
                if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
                        p.classList.add('hlight');
                        lrcDiv.scroll({left: 0, top: p.offsetTop - hh, behavior: 'smooth'});
                } else {
                        p.classList.remove('hlight');
                }
      }
};

//时间格式化输出
const formatTime = (seconds) => {
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

//联动管控机制
const mState = () => {
      if (aud.paused) {
                btnPlay.className = 'play';
                btnPlay.title = '点击播放';
                playvids(false);
      } else {
                btnPlay.className = 'pause';
                btnPlay.title = '点击暂停';
                playvids(true);
      }
};

//播放视频
const playvids = (flag) => {
      if(!vids) return;
      vids.forEach(vid => flag ? vid.play() : vid.pause());
};

//进度条操作
progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

const lrc = `陪你千山万水 (DJ何鹏版) - 樊少华&唐薇
词：樊少华
曲：樊少华
（未经许可,不得翻唱或使用）
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔`;

getLrcAr(lrc);
aud.addEventListener('timeupdate', updatePlayerDatas);
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

梦油 发表于 2025-3-20 16:57

欣赏佳作，问候亚伦。

杨帆 发表于 2025-3-20 20:18

简洁、大气、灵敏！谢谢马老师，谢谢亚伦老师{:4_191:}

红影 发表于 2025-3-20 20:58

漂亮，黑黑也做了歌词和播放器的分离呢。
亚伦老师的这个歌词同步也好看{:4_187:}
页: [1]
查看完整版本: 原生LRC歌词播放器[修改马老播放器]