|
|
楼主 |
发表于 2025-4-15 12:08
|
显示全部楼层
本帖最后由 老谟深虑 于 2025-4-15 12:11 编辑
-
- <style>
- #bj{position: relative;width: 1100px;height: 700px; margin: 130px 0 50px calc(50% - 651px);;overflow:hidden;background:url('https://cccimg.com/view.php/224f9f294cdcf0b23fe03bdd8f3a4191.jpg')no-repeat center / cover;--state: paused;--opt: .2;border-radius: 1px;box-shadow: 0px 0px 0px 1px #fff,0px 0px 0px 3px #EE0B42; }
- #geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 51%; transform: translate(-50%);top: 60%;font:300 2.6em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);z-index: 6;display: none;cursor: pointer;}
- #geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
- @keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
- #mplayer { position: absolute; text-align: center; top: 85%; LEFT:33%;z-index: 60;color:#191970;}
- .hide{display: none;}
- #mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
- #mprog { width: 500px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
- #btnplay {width: 70px; height: 70px; cursor: pointer; animation: rotating 6s infinite linear var(--state);}
- @keyframes rotating { to { transform: rotate(360deg); } }
- .playbtn, .pausebtn,#world,#zs{border-radius: 4px;position: relative;
- color:#eee;background:#06075a;box-shadow: 0px 0px 0px 1px #999;
- padding: 4px 8px;
- font-size: 12px;
- border: none;
- cursor: pointer;margin: 8px 5px;left: 5%;
- }
- #全屏{ position: absolute;}
- #退出{ position: absolute;opacity:0;}
- </style>
- <style>
- #dhgc{position:absolute;width: 540px;
- height: 450px;z-index: 6;
- border: 0px solid white;cursor: pointer;
- overflow: hidden;margin: 8% 10px;
- }
- .lrc {position:absolute;width: 100%;
- height: 100%;
- border: 0px solid white;
- margin: 0px 0px;
- }
- .lrc #ul {width: 100%;
- padding: 0;list-style: none;transition: 0.3s all ease;
- margin: 0}
- .lrc #ul li {
- font-family:微软雅黑;
- font-size: 18px;
- color: #ccc;
- font-weight:100;
- transition: .3s all ease;
- list-style-type: none;
- text-align: center;display: block;
- width: 100%;
- margin: 0 auto;
- height: 50px;
- line-height: 35px;
- }
- .lrc #ul li.active{ font-size: 25px;
- color: #3790d0; font-weight:100;
- text-align: center; filter:drop-shadow(#000 1px 1px 0px);
- }
- </style>
- <div id="bj">
- <div id="mplayer" data-tt="00:00 00:00" >
- <img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/f3.png " title="播放/暂停" alt="" /><br>
- <input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
- </div>
- <audio id="audio" src="https://cccimg.com/view.php/3ac64961a736d9ed062389cbbbdb8dfc.mp3" loop autoplay></audio>
- <div id="geci"></div>
- <div id="dhgc"><div class="lrc" >
- <ul id="ul">
- </ul>
- </div>
- </div>
- <button class="playbtn" onclick="btn1()"title="klok歌词模式">klok歌词</button>
- <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
- <button id="world" onclick="btn3()"title="播放器模式">bfq隐藏</button>
- <button id="zs"onclick="btnClick()" title="屏展模式" >屏展模式</button>
- <div id="全屏"></div><div id="退出" ></div>
- </div>
- <script>
- let lrc = `[00:00.000]侯云 - 骑着二八闯天涯（DJ默涵版）
- [00:00.688]作词：宋友诚
- [00:00.946]作曲：大飞
- [00:02.360]骑着二八我勇闯天涯
- [00:16.089]骑着二八
- [00:23.524]听说世界很大我得去溜达
- [00:27.220]一辈子不能过得憋屈巴拉
- [00:31.064]还没亲眼瞧瞧人间的繁华
- [00:34.867]也想体验一把四海为家
- [00:38.762]听说时间很贵青春更无价
- [00:42.558]可该省就得省该花还得花
- [00:46.419]兜里没钱那咱就再咬咬牙
- [00:50.287]沿着国道318去趟拉萨
- [00:56.022]骑着二八我勇闯天涯
- [00:59.842]喝完青岛我吹瓶雪花
- [01:03.704]风浪越大我越要潇洒
- [01:07.524]心比天高我啥也不怕
- [01:11.356]骑着二八我勇闯天涯
- [01:15.192]什么烦恼我全都抛下
- [01:19.060]人生太短人间太复杂
- [01:22.886]尽情的绽放我的年华
- [01:44.099]听说时间很贵青春更无价
- [01:47.766]可该省就得省该花还得花
- [01:51.652]兜里没钱那咱就再咬咬牙
- [01:55.457]沿着国道318去趟拉萨
- [02:01.336]骑着二八我勇闯天涯
- [02:05.096]喝完青岛我吹瓶雪花
- [02:08.960]风浪越大我越要潇洒
- [02:12.754]心比天高我啥也不怕
- [02:16.623]骑着二八我勇闯天涯
- [02:20.449]什么烦恼我全都抛下
- [02:24.306]人生太短人间太复杂
- [02:28.163]尽情的绽放我的年华
- [02:33.961]骑着二八我勇闯天涯
- [02:37.695]喝完青岛我吹瓶雪花
- [02:41.617]风浪越大我越要潇洒
- [02:45.424]心比天高我啥也不怕
- [02:49.288]骑着二八我勇闯天涯
- [02:53.058]什么烦恼我全都抛下
- [02:56.978]人生太短人间太复杂
- [03:00.738]尽情的绽放我的年华
- `;
- audio.addEventListener("seeked", myFunction)
- audio.addEventListener("timeupdate", mylrc);
- let mKey = 0, mFlag = true;
- function 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));
- tmpAr.push(aver);
- tmpAr.forEach((item,key) => {
- ar[key][2] = item > aver ? aver : item;
- });
- return ar;
- };
- function getLrcAr(str) {
- str = str.trim();
- let lines = [], lrcAr = [];
- let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
- if(!str.match(reg)) return;
- lines = str.replace(reg,'$1-{}-$2').split('\n');
- for(k = 0; k < lines.length; k ++) {
- lrcAr[k] = [];
- for(j = 0; j < 3; j ++) {
- let tmpAr = lines[k].split('-{}-');
- lrcAr[k][j] = j === 0 ? toSecs(tmpAr[0]) : tmpAr[1];
- }
- }
- return lrcTime(lrcAr);
- };
- function toSecs (lrcTime) {
- let reg = /\d{2,}/g;
- let ar = lrcTime.match(reg);
- return ar[0]*60 + parseInt(ar[1]) + parseInt((ar[2])/1000);
- };
- function showLrc(time) {
- let name = mFlag ? 'cover1' : 'cover2';
- geci.innerHTML = lrcAr[mKey][1];
- geci.dataset.geci = lrcAr[mKey][1];
- geci.style.setProperty('--motion', name);
- geci.style.setProperty('--tt', time + 's');
- geci.style.setProperty('--state', 'running');
- mKey += 1;
- mFlag = !mFlag;
- };
- function myFunction() {
- for (j = 0; j < lrcAr.length; j++) {
- if (audio.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] - (audio.currentTime - lrcAr[mKey][0]);
- showLrc(time);
- };
- function mylrc() {
- for (j = 0; j < lrcAr.length; j++) {
- if (audio.currentTime >= lrcAr[j][0]) {
- cKey = j;
- if (mKey === j) showLrc(lrcAr[j][2]);
- else continue;
- }
- }
- }
- audio.addEventListener('play', playing,false);
- audio.addEventListener('pause', playing,false);
- function playing() {
- geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
- }
- let lrcAr = getLrcAr(lrc);
- </script>
- <script>
- var mseek = false;
- var mState = () => audio.paused ?
- ( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
- ( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
- 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;
- }
- audio.addEventListener('timeupdate', () => {
- if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
- mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
- });
- audio.addEventListener('pause', () => mState());
- audio.addEventListener('playing', () => mState());
- mprog.onmousedown = () => mseek = true;
- mprog.onmouseup = () => mseek = false;
- mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
- dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());
- </script>
- <script>
- // 最开始获取到的歌词列表是字符串类型（不好操作）
- let lrcArr = lrc.split('\n');
- // 接收修正后的歌词数组
- let result = [];
- // 获取所要用到的dom列表
- doms = {
- audio: document.querySelector("#audio"),
- ul: document.querySelector("#ul"),
- container: document.querySelector(".lrc")
- }
- // 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
- for (let i = 0; i < lrcArr.length; i++) {
- var lrcData = lrcArr[i].split(']');
- var lrcTime = lrcData[0].substring(1);
- var obj = {
- time: parseTime(lrcTime),
- word: lrcData[1]
- }
- result.push(obj);
- }
- // 将tiem转换为秒的形式
- function parseTime(lrcTime) {
- lrcTimeArr = lrcTime.split(":")
- return +lrcTimeArr[0] * 60 + +lrcTimeArr[1];
- }
- // 获取当前播放到的歌词的下标
- function getIndex() {
- let Time = doms.audio.currentTime;
- for (let i = 0; i < result.length; i++) {
- if (result[i].time > Time) {
- return i - 1;
- }
- }
- }
- // 创建歌词列表
- function createElements() {
- let frag = document.createDocumentFragment(); // 文档片段
- for (let i = 0; i < result.length; i++) {
- let li = document.createElement("li");
- li.innerText = result[i].word;
- frag.appendChild(li);
- }
- doms.ul.appendChild(frag);
- }
- createElements();
- // 获取显示窗口的可视高度
- let containerHeight = doms.container.clientHeight;
- // 获取歌词列表的可视高度
- let liHeight = doms.ul.children[0].clientHeight;
- // 设置最大最小偏移量，防止显示效果不佳
- let minOffset = 0;
- let maxOffset = doms.ul.clientHeight - containerHeight;
- // 控制歌词滚动移动的函数
- function setOffset() {
- let index = getIndex();
- // 计算滚动距离
- let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
- if (offset < minOffset) {
- offset = minOffset;
- };
- if (offset > maxOffset) {
- offset = maxOffset;
- };
- // 滚动
- doms.ul.style.transform = `translateY(-${offset}px)`;
- // 清除之前的active
- let li = doms.ul.querySelector(".active")
- if (li) {
- li.classList.remove("active");
- }
- // 为当前所唱到的歌词添加active
- li = doms.ul.children[index];
- if (li) {
- li.classList.add("active");
- }
- };
- // 当audio的播放时间更新时，触发该事件
- doms.audio.addEventListener("timeupdate", setOffset);
- </script>
- <script>
- function btn1() {
-
- document.getElementById('geci').style.display = 'block';
- document.getElementById('dhgc').style.display = 'none';
- }
-
- function btn2() {
- document.getElementById('geci').style.display = 'none';
- document.getElementById('dhgc').style.display = 'block';
- }
- function btn3(){
- var img=document.getElementById("mplayer");
- if(document.getElementById("world").innerHTML=="bfq隐藏"){
- mplayer.className="hide";
- document.getElementById("world").innerHTML="显示bfq";
- }else{
- mplayer.className="";
- document.getElementById("world").innerHTML="bfq隐藏";
- }
- }
- function btnClick() {
- var zs= document.getElementById("zs");
- if (this.isFullscreen()) {
- 全屏.style.opacity= '1'; 退出.style.opacity = '0';
- zs.style.cursor="ne-resize";
- exitFullScreen();
- } else {
- 全屏.style.opacity= '0'; 退出.style.opacity = '1';
- zs.style.cursor="se-resize";
- zs.style.visibility='visible';
- if (zs.requestFullscreen) {
- bj.requestFullscreen();
- } else if (zs.webkitRequestFullScreen) {
- zs.webkitRequestFullScreen();
- } else if (zs.mozRequestFullScreen) {
- bj.mozRequestFullScreen();
- } else if ( zs.msRequestFullscreen) {
- zs.msRequestFullscreen();
- }
- }
- }
- // 退出全屏
- function exitFullScreen() {
- let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
- if (exitFullScreen) {
- exitFullScreen.call(document);
- }
- }
- // 判断是否全屏
- function isFullscreen() {
- return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
- }
- </script>
|
|
发表于 2025-4-14 12:52
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-4-14 16:06
发表于 2025-4-14 19:54
