论坛 › 欢乐水吧 › 黑黑老师播放器测试

亚伦影音工作室 发表于 2025-2-23 21:15

黑黑老师播放器测试

本帖最后由 亚伦影音工作室 于 2025-4-14 23:22 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 670px); background:url('https://img4.oldkids.cn/upload/2021/04/13/photo_0_20210413195707991.gif') no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}
#dt{
      position:absolute;
      width: 100%;
      height: 100%;
      top:0%;
   left: 0%;    }
#dt img{width: 100%;
      height: 100%;
    }
#dhgc{position:absolute;width:100%;
    height: 80px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 8% 0px;
}
    .lrc { position: absolute; width:100%; height:100%;margin: 0px 0px; color: #000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
    .lrc #ul { width: 100%;list-style: none; margin: 0; display: flex; flex-direction: column; align-items: center; }
    .lrc #ul li {font:300 3.8em 华文隶书;list-style-type: none; text-align: center; padding: 0 10px; height: 80px; line-height: 80px; cursor: pointer; }
   .lrc #ul li span { margin: 0px 10px; }
    .lrc #ul li span.active {color:#ff0000; margin: 0px 0px; }
#bfq{height: 40px; width:96%; position: relative;left: 0%; top: 45%;overflow: hidden; background:url('https://pic1.imgdb.cn/item/66c40607d9c307b7e912340a.png') no-repeat center/cover; border-radius: 6px;box-shadow: 0px 0px 0px 0.25px #fff;}


        #mboard { height: 40px; width:100%;justify-content: center; align-items: center; gap: 8px; position: absolute;display: flex;left: -5%;}
        #mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
        #tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
        #volwrap { position: absolute; width: 120px; height: 40px; right: -40px; display: grid; place-items: center; background: none; border-radius: 20px; }
        input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 5 11 5 0 / 0px 0px 0 2000px;
}

        #btnMute:hover ~ #volwrap ;
        #volume { position: absolute; width: 40px; height: 2px;display: none; }
        #prog { --track:#eee; --prog: #ff0000; --prg: 0%; width: 900px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;}
</style>
<div id="papa">
<div id="dt">
<img src="https://img4.oldkids.cn/upload/2021/04/13/photo_0_20210413195707991.gif"id="IMG" />
</div>
<div id="dhgc"><div class="lrc">
    <ul id="ul"></ul>
      </div>
</div>
<div id="bfq">
<div id="mboard">
        <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
        <span id="tMsg1">00:00</span>
        <span id="prog"></span>
        <span id="tMsg2">00:00</span>
        <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
        <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
</div>
</div>

</div>
<p><audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2025/02/21/01.mp3" autoplay loop></audio></p>

<script>
       
var lastVolume = 1, muted = false;

var imgAr = [
        'https://638183.freep.cn/638183/web/icon/play.svg',
        'https://638183.freep.cn/638183/web/icon/pause.svg',
        'https://638183.freep.cn/638183/web/icon/unmuted.svg',
        'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
        if(lastVolume === 0) return;
        muted = !muted;
        muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
        btnPlay.src = aud.paused ? imgAr : imgAr;
        btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
        if(!e.altKey) return;
        switch (e.keyCode) {
                case 88:
                        btnPlay.click();
                        break;
                case 74:
                        setMute();
                        break;
                case 187: case 107:
                        aud.volume = setVolume(aud.volume + 0.1);
                        lastVolume = aud.volume;
                        break;
                case 189: case 109:
                        aud.volume = setVolume(aud.volume - 0.1);
                        lastVolume = aud.volume;
                        break;
                default:
                        return;
        }
});

aud.onplaying = aud.onpause = () => mState();

aud.ontimeupdate = () => {
        prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
        tMsg1.innerText = s2m(aud.currentTime);
        tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
        btnMute.src = aud.volume === 0 ? imgAr : imgAr;
        volume.value = aud.volume;
}

btnPlay.onclick = () => aud.paused ? (aud.play(),image.play() ): (aud.pause(),image.stop());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)';
</script>

<script>
let lrc = `飞 (DJ何鹏版)
作词：张世东
作曲：孙勇
演唱：龙梅子
我一路向北 不停地去追
看不清前方是雨
还是我的汗水
悄悄地把伤疤 当做胸徽
别再问我 到底是谁
梦想这条路 总百转千回
我不怕雨打风吹
就怕半途而废
勇敢的心 已不想墨守成规
倔强的人 更不愿急流勇退
我要飞飞飞 我要飞飞飞
挣脱这世俗 目光的包围
冲上云霄 挥舞热血的美
我的字典 写满无怨无悔
我要飞飞飞 我要飞飞飞
冲破这无边 长夜的漆黑
拥抱太阳 释放青春光辉
追梦路上 不需眼泪作陪
。。。。。。。
梦想这条路 总百转千回
我不怕雨打风吹
就怕半途而废
勇敢的心 已不想墨守成规
倔强的人 更不愿急流勇退
我要飞飞飞 我要飞飞飞
挣脱这世俗 目光的包围
冲上云霄 挥舞热血的美
我的字典 写满无怨无悔
我要飞飞飞 我要飞飞飞
冲破这无边 长夜的漆黑
拥抱太阳 释放青春光辉
追梦路上 不需眼泪作陪
我要飞飞飞 我要飞飞飞
挣脱这世俗 目光的包围
冲上云霄 挥舞热血的美
我的字典 写满无怨无悔
我要飞飞飞 我要飞飞飞
冲破这无边 长夜的漆黑
拥抱太阳 释放青春光辉
追梦路上 不需眼泪作陪
`;
let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
       for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var words = lrcData.trim().split('');
            let lineWords = [];
            let startTime = parseTime(lrcTime);
            let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
                (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
            words.forEach((word, index) => {
                lineWords.push({ time: startTime + index * wordDuration, text: word });
            });
            result.push(lineWords);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) return i - 1;
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
      createElements();

      let containerHeight = container.clientHeight;
      let liHeight = 80;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;
      const visibleLines = 1;
      let prevIndex = -1;

      function setOffset() {
            let index = getIndex();
            if (index === -1) index = 0;

            let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
            ul.style.transform = `translateY(-${offset}px)`;

            if (prevIndex !== -1) {
                let prevLi = ul.children;
                if (prevLi) {
                  prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
                  prevLi.classList.remove('active');
                }
            }
            let currentLi = ul.children;
            if (currentLi) currentLi.classList.add('active');

            let currentTime = audio.currentTime;
            let currentLine = result;
            if (currentLine) {
                currentLine.forEach((wordObj, wordIndex) => {
                  let span = currentLi.children;
                  if (currentTime >= wordObj.time &&
                        (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                        span.classList.add('active');
                  } else {
                        span.classList.remove('active');
                  }
                });
                const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
                if (!currentLyric) return;
               
                let charIndex = 0;
                for (let j = 0; j < currentLine.length; j++) {
                  if (currentLine.time <= currentTime) {
                        charIndex = j + 1;
                  }
                }
            
            }
prevIndex = index;
      }
aud.addEventListener("timeupdate", setOffset);

</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      //
      var width = this.width, height = this.height;
      if (width && height) {
            // 洢
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvasС
            canvas.width = width;
            canvas.height = height;
            //
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            //
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                //
                this.removeAttribute('src');
                // canvas
                canvas.style.position = 'absolute';
                //
                this.parentElement.insertBefore(canvas, this);
                //
                this.style.opacity = '0';
                // 洢canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("IMG");
</script>

马黑黑 发表于 2025-2-23 22:26

{:4_199:}

小辣椒 发表于 2025-2-23 23:30

亚纶动作快的，这个播放器作业完成了

杨帆 发表于 2025-2-24 01:27

漂亮！完美{:4_176:}

庶民 发表于 2025-2-24 08:51

欣赏美好的东东

查看完整版本: 黑黑老师播放器测试