亚伦影音工作室 发表于 2023-7-20 22:43

小兔子乖乖播放器【马老源码改变】现在就是最好的时候 - 花僮

本帖最后由 亚伦影音工作室 于 2023-7-29 16:54 编辑 <br /><br /><style>
#papa{margin: 10px -300px ;
width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://www.kumeiwp.com/sub/filestores/2023/02/02/c52ebbf1d81561a7d97939f3bf1dee54.jpg') no-repeat center/cover;
position: relative;z-index: 12345;}
:root { --state: running; --prg: 0%; --delay: 0s; }
.mydiv {width: 100%; height: 100%;   overflow: hidden; z-index: 10; display: grid; place-items: center; position: relative; }
.heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
.heart:nth-of-type(2) { --delay: -2.5s; }
#mplayer { position: absolute; bottom: 10px; width: 200px; height: 40px; background: linear-gradient(to right,red var(--prg),#FFFFFF 0) repeat-x 0 50% / 100% 2px; }
#mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
#mplayer::before { content: attr(data-cu); left: -50px;color: #FFFFFF; }
#mplayer::after { content: attr(data-du); right: -50px;color: #FFFFFF; }
#btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 24px; font: normal 2.2em/0em serif; cursor: pointer; animation: swing .3s infinite linear var(--state); color:#ffFFFF;}
@keyframes swing {from { transform: rotate(-10deg) skew(0deg); } to { transform: rotate(10deg) skew(0deg); } }
@keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;
        left: 50%;z-index: 20;
        transform: translate(-50%);
        top: 80%;
        font:normal 3.5em 华文隶书;
        color: #0000;
        white-space: pre;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 0%;letter-spacing: 15px; color:#000090;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; }   }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing: 15px;color:#ff0000; }}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 3em华文隶书; opacity: 1; cursor: pointer; z-index: 111}

</style>
<div id='papa'>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
<div class="mydiv">
    <span class="heart">&#128158;</span>
    <span class="heart">&#127809;</span>
    <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
            <div id="btnplay" title="暂停/播放">&#128048;</div>
</div>
    <audio id="aud" src="https://www.qqmc.com/mp3/music287087213.mp3" loop autoplay></audio>
</div>
</div>
<script>
(function() {
    let root = document.querySelector(':root');
    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 = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    aud.addEventListener('pause', mState, false);
    aud.addEventListener('play', mState, false);
    aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();


(function() {
/*原始lrc歌词*/
let lrcStr = `
现在就是最好的时候 - 花僮
词：公子
曲：花僮
编曲：韩俊平
和声：宋马超
混音：CuTTleFiSh
母带：CuTTleFiSh
制作人：亚伦
出品人：亚伦
OP: 亚伦影音传媒
山本来没有名字
路也本来没有尽头
书中看过的真理
只有岁月才能参透
人生多少个路口
怎么选择都要放手
哪边都烟火弥漫
哪边都有漫天星宿
我们空着手
有幸来这世上走一走
笑和泪最后都是丰收
失去拥有千帆过境
你在我的左右
我们有幸来这世上走一走
对或错都会让人成熟
过去和以后都不念
现在就是最好的时候
人生多少个路口
怎么选择都要放手
哪边都烟火弥漫
哪边都有漫天星宿
我们空着手
有幸来这世上走一走
笑和泪最后都是丰收
失去拥有千帆过境
你在我的左右
我们有幸来这世上走一走
对或错都会让人成熟
过去和以后都不念
现在就是
我们空着手
有幸来这世上走一走
笑和泪最后都是丰收
失去拥有千帆过境
你在我的左右
我们有幸来这世上走一走
对或错都会让人成熟
过去和以后都不念
现在就是最好的时候`;

/*变量 ：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 = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        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,]s?/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 * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        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) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

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

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

亚伦影音工作室 发表于 2023-7-20 22:53

本帖最后由 亚伦影音工作室 于 2023-7-20 22:54 编辑

特点是利用特殊符号为按钮或动画不容易失效，也免去了上传的带来的不便！希望朋友们改进参考！

醉美水芙蓉 发表于 2023-7-20 22:53

醉美水芙蓉 发表于 2023-7-20 22:55

红影 发表于 2023-7-20 23:08

亚伦老师厉害，这么快就做出来了，这小兔子真可爱{:4_199:}

红影 发表于 2023-7-20 23:08

歌词同步很有特色{:4_199:}

马黑黑 发表于 2023-7-21 07:35

漂亮，可爱系的小播

樵歌 发表于 2023-7-21 10:44

特别漂亮顺眼！
页: [1]
查看完整版本: 小兔子乖乖播放器【马老源码改变】现在就是最好的时候 - 花僮