论坛 › 欢乐水吧 › 橘子

马黑黑 发表于 2023-2-19 10:35

橘子

本帖最后由 马黑黑 于 2023-2-19 11:08 编辑 <br /><br /><style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: lightgreen url('https://638183.freep.cn/638183/t23/webp/orange.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#mplayer {
        position: absolute;
        width: 160px;
        height: 160px;
        right: 200px;
        top: 60%;
        border-radius: 50%;
        cursor: pointer;
        animation: rot 8s linear infinite;
}
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 5px;
        font: bold 2em sans-serif;
        color: snow;
        white-space: pre;
        -webkit-background-clip: text;
        filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        filter: inherit;
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <img id="mplayer" src="https://638183.freep.cn/638183/t23/1/orange.png" alt="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950528144.mp3" loop autoplay></audio>
</div>

<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
Tizzy T / 洪一诺 - 橘子
你从我身边经过 橘子味
我开始到处打听 你是谁
我感觉有点微醺 这第几杯
她们争先恐后 我安静地欣赏你的美
DJ放着舞曲 你小声跟唱
衣服漂亮是因为它穿在你身上
像在漆黑的夜晚走进一条深巷
我要的 你都有 没有让我失望
你没有看我怎么知道我在看你
现在拉近我们的距离就不到半米
该怎么解开你的emem 这是个难题
我喜欢你的温柔 也喜欢你的叛逆
你出现我的内心 开始电闪又雷鸣
我能够为你做到的 是偏袒且坚定
快来到我这里 让我填满你空虚
当我看着你的时候 想在对你说
I don\'t know what you\'ve heard about me
没有什么了不起
明明你早已经动了心
干嘛假装你不在意
So baby what you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
来吧 跳进这场派对
告诉我 u want some more
What you gonna do
What you gonna do
What you gonna do
当我往你那边看
你知道我在想什么
一杯特调我是你的加冰
一块饼干你是我的夹心
受到惊讶我来给你压惊
哪都别去请静候我的佳音
Pretty girl 请你在我的怀里躺好
你的前任坟头早就已经长草
现在时间地点气氛全都刚好
你想要的那杯冰茶来自长岛
You make me to the left
You make me to the right
给我一个答案请别再让我猜
我偶尔喜欢装酷没有在跟你拽
你看中那些名牌我都会替你买
为你我从east side跑到了west side
你怎么能狠心来把我推开
别在这种时候跟我聊未来
就算是个错误我也不悔改
靠近你 我听见你的呼吸
周围的人全都模糊不清
紧紧地拥抱
听我的心跳
你一直被需要
I don\'t know what you\'ve heard about me
没有什么了不起
明明你早已经动了心
干嘛假装你不在意
So baby what you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
来吧 跳进这场派对
告诉我 u want some more
What you gonna do
What you gonna do
What you gonna do
当我往你那边看
你知道我在想什么
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
`;

/*变量 ：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 lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

马黑黑 发表于 2023-2-19 10:36

本帖最后由 马黑黑 于 2023-2-19 11:08 编辑

帖子代码
<style>
#papa {
      margin: -80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: lightgreen url('https://638183.freep.cn/638183/t23/webp/orange.webp') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
}
#mplayer {
      position: absolute;
      width: 160px;
      height: 160px;
      right: 200px;
      top: 60%;
      border-radius: 50%;
      cursor: pointer;
      animation: rot 8s linear infinite;
}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 5px;
      font: bold 2em sans-serif;
      color: snow;
      white-space: pre;
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      filter: inherit;
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <img id="mplayer" src="https://638183.freep.cn/638183/t23/1/orange.png" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950528144.mp3" loop autoplay></audio>
</div>

<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
Tizzy T / 洪一诺 - 橘子
你从我身边经过 橘子味
我开始到处打听 你是谁
我感觉有点微醺 这第几杯
她们争先恐后 我安静地欣赏你的美
DJ放着舞曲 你小声跟唱
衣服漂亮是因为它穿在你身上
像在漆黑的夜晚走进一条深巷
我要的 你都有 没有让我失望
你没有看我怎么知道我在看你
现在拉近我们的距离就不到半米
该怎么解开你的emem 这是个难题
我喜欢你的温柔 也喜欢你的叛逆
你出现我的内心 开始电闪又雷鸣
我能够为你做到的 是偏袒且坚定
快来到我这里 让我填满你空虚
当我看着你的时候 想在对你说
I don\'t know what you\'ve heard about me
没有什么了不起
明明你早已经动了心
干嘛假装你不在意
So baby what you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
来吧 跳进这场派对
告诉我 u want some more
What you gonna do
What you gonna do
What you gonna do
当我往你那边看
你知道我在想什么
一杯特调我是你的加冰
一块饼干你是我的夹心
受到惊讶我来给你压惊
哪都别去请静候我的佳音
Pretty girl 请你在我的怀里躺好
你的前任坟头早就已经长草
现在时间地点气氛全都刚好
你想要的那杯冰茶来自长岛
You make me to the left
You make me to the right
给我一个答案请别再让我猜
我偶尔喜欢装酷没有在跟你拽
你看中那些名牌我都会替你买
为你我从east side跑到了west side
你怎么能狠心来把我推开
别在这种时候跟我聊未来
就算是个错误我也不悔改
靠近你 我听见你的呼吸
周围的人全都模糊不清
紧紧地拥抱
听我的心跳
你一直被需要
I don\'t know what you\'ve heard about me
没有什么了不起
明明你早已经动了心
干嘛假装你不在意
So baby what you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
来吧 跳进这场派对
告诉我 u want some more
What you gonna do
What you gonna do
What you gonna do
当我往你那边看
你知道我在想什么
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
What you gonna do
`;

/*变量 ：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 lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

红影 发表于 2023-2-19 11:32

原始歌词的具体运用，又可以照着做了{:4_173:}

红影 发表于 2023-2-19 11:33

这个剖开的橘子图片播放器真有趣{:4_173:}

梦油 发表于 2023-2-19 11:58

你制作得太成功了。我都流口水了。

马黑黑 发表于 2023-2-19 12:07

梦油 发表于 2023-2-19 11:58
你制作得太成功了。我都流口水了。

吃一口{:5_106:}

马黑黑 发表于 2023-2-19 12:09

红影 发表于 2023-2-19 11:32
原始歌词的具体运用，又可以照着做了

先看看有木有问题

马黑黑 发表于 2023-2-19 12:09

红影 发表于 2023-2-19 11:33
这个剖开的橘子图片播放器真有趣

流口水木有

醉美水芙蓉 发表于 2023-2-19 12:46

梦油 发表于 2023-2-19 12:47

马黑黑 发表于 2023-2-19 12:07
吃一口

看着图，两腮酸甜酸甜的。

小辣椒 发表于 2023-2-19 12:51

哇瑟~~~黑黑这么忙还是推出了这个原始歌词同步{:4_178:}

马黑黑 发表于 2023-2-19 12:51

梦油 发表于 2023-2-19 12:47
看着图，两腮酸甜酸甜的。

{:4_170:}

小辣椒 发表于 2023-2-19 12:51

又有钱，小辣椒眼睛又一亮

马黑黑 发表于 2023-2-19 12:51

醉美水芙蓉 发表于 2023-2-19 12:46
老师的播放器太漂亮了！

一般一般

小辣椒 发表于 2023-2-19 12:52

黑黑果然是艺术系出来的，整个图图太配套了{:4_178:}

小辣椒 发表于 2023-2-19 12:53

无论背景图 小圆播放器歌曲都是同类型的，厉害{:4_199:}

马黑黑 发表于 2023-2-19 12:53

小辣椒 发表于 2023-2-19 12:52
黑黑果然是艺术系出来的，整个图图太配套了

我的图画老师是体育老师兼任的{:4_170:}

小辣椒 发表于 2023-2-19 12:55

我会认识学习的，但网络的歌词同步还是感觉不靠谱，小辣椒先以前玩过的歌词做一次

马黑黑 发表于 2023-2-19 12:55

小辣椒 发表于 2023-2-19 12:53
无论背景图 小圆播放器歌曲都是同类型的，厉害

还不太差{:4_173:}

醉美水芙蓉 发表于 2023-2-19 12:55

查看完整版本: 橘子