论坛 › 欢乐水吧 › 晚秋

红芍药 发表于 2022-9-18 20:36

晚秋

本帖最后由 红芍药 于 2022-9-18 21:45 编辑 <br /><br /><style>
#papa { left: -214px; width: 1120px; height: 760px; background: tan url('http://www.bohann.net/data/attachment/forum/202209/18/202649mqh925f2ysc0i9fh.png ') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 20px; bottom: 0px; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: white;opacity: .75; }
#lrc { --dur: 6s; position: absolute; top: 10px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, darkred, gold, orange, snow) 100% 0 / 200% 100%; background-clip: text; -webkit-background-clip: text; }
@keyframes bgMerg1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMerg2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>

<div id="papa">
      <div id="lrc">lrc</div>
      <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
      </div>
</div>

<script>
let lrcAr = [
      ['0.00','毛宁- 晚秋'],
      ['26.80','在这个陪着枫叶飘零的晚秋'],
      ['32.87','才知道你不是我一生的所有'],
      ['38.69','蓦然又回首是牵强的笑容 '],
      ['44.42','那多少往事飘散在风中'],
      ['50.82','怎么说相爱却注定要分手 '],
      ['56.16','怎么能让我相信那时一场梦'],
      ['62.00','情缘去难留我抬头望天空'],
      ['67.96','想起你说爱我到永久'],
      ['74.00','心中藏着多少爱和愁 '],
      ['79.61','想要再次握住你的手'],
      ['85.21','温暖你走后冷冷的清秋'],
      ['90.78','相逢也只是在梦中'],
         ['97.83','一'],
      ['120.83',' 怎么说相爱却注定要分手'],
      ['125.01','怎么能让我相信那时一场梦 '],
      ['131.10','情缘去难留我抬头望天空']
];
let aud = new Audio() ,lrcKey = 0, flag = true;
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=5280042.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      prog.style.background= 'linear-gradient(90deg, orange, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
      prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) {
                        if(lrcKey == j) {
                              showLrc();
                        } else {
                              continue;
                              
                        }
                }
      }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let showLrc = () => {
      let time= 6;
      if(lrcKey < lrcAr.length - 1) {
                time = lrcAr - lrcAr;
                lrc.style.animation = (lrcKey % 2 == 0 ? 'bgMerg1 ' : 'bgMerg2 ') + time + 's linear forwards';
      }
      lrc.innerText = lrcAr;
      lrcKey += 1;
      if(lrcKey >= lrcAr.length) lrcKey = 0;
}
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;
}
</script>

红芍药 发表于 2022-9-18 20:37

@马黑黑 黑黑老师指点一下歌词同步的技巧。。{:4_204:}{:4_204:}

东篱闲人 发表于 2022-9-18 20:38

构想很好，有创新，有思路。。。。{:5_116:}

东篱闲人 发表于 2022-9-18 20:39

效果不太好，没有达到你想要的结果。。。{:5_117:}

红芍药 发表于 2022-9-18 20:39

东篱闲人 发表于 2022-9-18 20:38
构想很好，有创新，有思路。。。。

歌词后来同步不了，不知啥原因？你给指点一下下{:4_173:}

加林森 发表于 2022-9-18 20:40

浪漫行，，，挺好的！{:4_199:}

红芍药 发表于 2022-9-18 20:40

东篱闲人 发表于 2022-9-18 20:39
效果不太好，没有达到你想要的结果。。。

你指导一下我

红芍药 发表于 2022-9-18 20:42

加林森 发表于 2022-9-18 20:40
浪漫行，，，挺好的！

队长，晚上好。还是不太熟练。{:4_173:}

东篱闲人 发表于 2022-9-18 20:45

红芍药 发表于 2022-9-18 20:39
歌词后来同步不了，不知啥原因？你给指点一下下

这个代码本来就应该是不完全同步。。。

红芍药 发表于 2022-9-18 20:47

东篱闲人 发表于 2022-9-18 20:45
这个代码本来就应该是不完全同步。。。

黑黑老师是同步的。

东篱闲人 发表于 2022-9-18 20:49

红芍药 发表于 2022-9-18 20:40
你指导一下我

做照片就应该做一个完整的照片效果，留好天地四周，你别把照片的花边给剪了啊。。{:5_106:}

俺理解你想要的应该是这样的效果：

https://pic.imgdb.cn/item/632713e016f2c2beb196ab5a.jpg

红芍药 发表于 2022-9-18 20:50

东篱闲人 发表于 2022-9-18 20:49
做照片就应该做一个完整的照片效果，留好天地四周，你别把照片的花边给剪了啊。。

俺理解你 ...

你老说的没错，本来是有花边的，一上传到代码里就成这样了。{:4_201:}

东篱闲人 发表于 2022-9-18 20:53

本帖最后由 东篱闲人 于 2022-9-18 20:55 编辑

红芍药 发表于 2022-9-18 20:50
你老说的没错，本来是有花边的，一上传到代码里就成这样了。
那就是你代码的长宽参数错误了。。。宽：1080 高：710

红芍药 发表于 2022-9-18 20:54

东篱闲人 发表于 2022-9-18 20:53
那就是你代码的长宽参数错误了。。。

修改了好几回就是改不了。

东篱闲人 发表于 2022-9-18 20:56

红芍药 发表于 2022-9-18 20:54
修改了好几回就是改不了。

宽：1080 高：710

红芍药 发表于 2022-9-18 20:58

东篱闲人 发表于 2022-9-18 20:53
那就是你代码的长宽参数错误了。。。宽：1080 高：710

就是这个数字啊

红芍药 发表于 2022-9-18 20:59

东篱闲人 发表于 2022-9-18 20:56
宽：1080 高：710

是按照这个参数编辑的。{:4_201:}

东篱闲人 发表于 2022-9-18 21:01

红芍药 发表于 2022-9-18 20:59
是按照这个参数编辑的。

你发下代码俺 看看。

红芍药 发表于 2022-9-18 21:03

东篱闲人 发表于 2022-9-18 21:01
你发下代码俺 看看。

<style>
#papa { left: -214px; width: 1080px; height: 710px; background: tan url('http://www.bohann.net/data/attachment/forum/202209/18/202649mqh925f2ysc0i9fh.png ') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 20px; bottom: 0px; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: white;opacity: .75; }
#lrc { --dur: 6s; position: absolute; top: 10px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, darkred, gold, orange, snow) 100% 0 / 200% 100%; background-clip: text; -webkit-background-clip: text; }
@keyframes bgMerg1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMerg2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>

<div id="papa">
      <div id="lrc">lrc</div>
      <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
      </div>
</div>

<script>
let lrcAr = [
      ['0.00','毛宁- 晚秋'],
      ['26.62','在这个陪着枫叶飘零的晚秋'],
      ['32.67','才知道你不是我一生的所有'],
      ['38.69','蓦然又回首是牵强的笑容 '],
      ['44.42','那多少往事飘散在风中'],
      ['50.82','怎么说相爱却注定要分手 '],
      ['56.16','怎么能让我相信那时一场梦'],
      ['62.00','情缘去难留我抬头望天空'],
      ['67.96','想起你说爱我到永久'],
      ['74.00','心中藏着多少爱和愁 '],
      ['79.61','想要再次握住你的手'],
      ['85.21','温暖你走后冷冷的清秋'],
      ['90.78','相逢也只是在梦中'],
         ['97.83','一'],
      ['120.83',' 怎么说相爱却注定要分手'],
      ['125.01','怎么能让我相信那时一场梦 '],
      ['131.10','情缘去难留我抬头望天空']
];
let aud = new Audio() ,lrcKey = 0, flag = true;
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=5280042.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      prog.style.background= 'linear-gradient(90deg, orange, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
      prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) {
                        if(lrcKey == j) {
                              showLrc();
                        } else {
                              continue;
                              
                        }
                }
      }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let showLrc = () => {
      let time= 6;
      if(lrcKey < lrcAr.length - 1) {
                time = lrcAr - lrcAr;
                lrc.style.animation = (lrcKey % 2 == 0 ? 'bgMerg1 ' : 'bgMerg2 ') + time + 's linear forwards';
      }
      lrc.innerText = lrcAr;
      lrcKey += 1;
      if(lrcKey >= lrcAr.length) lrcKey = 0;
}
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;
}
</script>

马黑黑 发表于 2022-9-18 21:06

红芍药 发表于 2022-9-18 20:37
@马黑黑 黑黑老师指点一下歌词同步的技巧。。

你这帖子所使用的模板和歌词都是比较老旧的，当时对逐字同步的处理方法相对落后。请参考以下代码：
<style>
        #papa { left: -214px; width: 1024px; height: 640px; background: #ccc; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
        #mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
        #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
        #mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
        #btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
        #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
        #btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
        #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
        #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, black, blue 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: olive; opacity: .75; }
        #lrc { position: absolute; right: 20px; top: 20px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, purple, orange) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; }
        #plane {position: absolute;left: 60px;top: 0;width: 100px;offset-distance: 0;offset-path: path("M0 20 Q300 80, 600 200 T1000 100");animation: move 8s linear infinite;}
        @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
        @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
        @keyframes move { to { offset-distance: 100%;} }
</style>

<div id="papa">
        <img id="plane" src="./pic/plane.png" alt="" />
        <div id="lrc">花潮lrc在线</div>
        <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
        </div>
</div>

<script>
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];
let mKey = 0, mSeek = false, mFlag = true;
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=68288.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());

aud.addEventListener('timeupdate', () => {
        prog.style.background= 'linear-gradient(90deg, black, blue ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
        prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) {
                        if(mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');

let showLrc = (time) => {
        lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
        lrc.innerHTML = lrcAr;
        mKey += 1;
        mFlag = !mFlag;
}

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 mtime = lrcAr - (aud.currentTime - lrcAr);
        showLrc(mtime);
}

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;
}
</script>其中的歌词数据构成，请仔细看一下，每一句都多出一个数字，这个数字是每次歌词从第一个字到唱完或差不多唱完最后一个字的用时（秒），这样，逐字同步的效果就比较明显了。

查看完整版本: 晚秋