亦是金 发表于 2024-1-24 16:42
亦是金老师厉害，知道这么多转换方法{:4_199:}
马黑黑 发表于 2024-1-24 17:40
那样挺好
这个怎么加不了歌词，我本来想用那个加歌词的 lrc.js 的插件，以为课次可以很简单滴加入呢，结果不行{:4_173:}
红影 发表于 2024-1-24 19:50
这个怎么加不了歌词，我本来想用那个加歌词的 lrc.js 的插件，以为课次可以很简单滴加入呢，结果不行{:4_ ...
会加就行
红影 发表于 2024-1-24 19:48
狐狸变的美女都很美的啊
为什么不多变点帅哥呢{:4_189:}
红影 发表于 2024-1-24 19:49
跟在后面学很简单的，师兄若是去学了，肯定做得更好呢
一是学不会，二是怕费时太多。
@起个网名好难 问好老师！记得老师曾经分享过网易云歌曲获取LRC的方法。不知酷我网上歌曲的同步歌词怎样获取LRC的？{:4_180:}
亦是金 发表于 2024-1-24 20:22
@起个网名好难 问好老师！记得老师曾经分享过网易云歌曲获取LRC的方法。不知酷我网上歌曲的同步歌词怎样 ...
电脑上安装个酷我音乐，用它找需要的歌播放一下就可以在电脑的指定目录里找到对应的lrc了。我电脑里是这样的
马黑黑 发表于 2024-1-24 19:54
会加就行
我试了一下，歌词无法出来啊，按钮也不动{:4_203:}
红影 发表于 2024-1-24 21:11
我试了一下，歌词无法出来啊，按钮也不动
那肯定是用的不对
樵歌 发表于 2024-1-24 20:09
为什么不多变点帅哥呢
两性的差异决定的啊，为博美人一笑，男人可以倾家荡产甚至江山都不要了。可美男呢，想想潘安那么帅，喜欢他的女子最多抛点果子给他吃，就算得到太多的果子也不值几个钱啊{:4_170:}
樵歌 发表于 2024-1-24 20:10
一是学不会，二是怕费时太多。
时间本来就是要费掉的啊，否则留着也是浪费{:4_189:}
亦是金 发表于 2024-1-24 20:22
@起个网名好难 问好老师！记得老师曾经分享过网易云歌曲获取LRC的方法。不知酷我网上歌曲的同步歌词怎样 ...
网易云的歌词又是怎么来的呢？
本帖最后由 亦是金 于 2024-1-24 21:59 编辑
起个网名好难 发表于 2024-1-24 20:42
电脑上安装个酷我音乐，用它找需要的歌播放一下就可以在电脑的指定目录里找到对应的lrc了。我电脑里是这 ...
谢谢老师指点，我去试试！谢谢老师！{:4_180:}
报告老师，按照老师的指点，我成功了！谢谢老师！{:4_190:}
马黑黑 发表于 2024-1-24 21:14
那肯定是用的不对
有可能，空了我再试试{:4_187:}
本帖最后由 亦是金 于 2024-1-24 22:09 编辑 <br /><br />红影 发表于 2024-1-24 21:22
网易云的歌词又是怎么来的呢？
记得这是难难老师的发现的部分内容，我复制到文本上保存的：<br>
现在有更简单获取LRC的方法。直接在浏览器上发请求就行了，例如《汪洋中的一条船》id是181842，试试
https://music.163.com/api/song/lyric?id=181842&lv=1
<br><br>
风雨无阻<br>
https://music.163.com/#/song?id=187797<br>
https://music.163.com/api/song/lyric?id=187797&lv=1<br>
<br><br>
{"sgc":false,"sfy":false,"qfy":false,"lyricUser":{"id":605321,"status":99,"demand":0,"userid":547896341,"nickname":"UFoundMonster","uptime":1583488338148},"lrc":{"version":43,"lyric":" 作词 : 李子恒\n 作曲 : 李子恒\n 编曲 : 包小松\n 制作人 : 周华健/刘志宏\n\n 给你我的全部\n 你是我今生唯一的赌注\n 只留下一段岁月\n 让我无怨无悔全心的付出\n 怕你忧伤 怕你哭\n 怕你孤单 怕你糊涂\n 红尘千山万里路\n 我可以朝朝暮暮\n 给你一条我的路\n 你是我一生不停的脚步\n 让我走出一片天空\n 让你尽情飞舞 放心的追逐\n 爱是漫长的旅途\n 梦有快乐 梦有痛苦\n 悲欢离合人间路\n 我可以缝缝补补\n 提着昨日种种千辛万苦\n 向明天换一些美满和幸福\n 爱你够不够多 对你够不够好\n 可以要求 不要不在乎\n 不愿让你看见 我的伤处\n 是曾经无悔的风雨无阻\n 拥有够不够多 梦的够不够好\n 可以追求 不认输\n\n 给你一条我的路\n 你是我一生不停的脚步\n 让我走出一片天空\n 让你尽情飞舞 放心的追逐\n 爱是漫长的旅途\n 梦有快乐 梦有痛苦\n 悲欢离合人间路\n 我可以缝缝补补\n 提着昨日种种千辛万苦\n 向明天换一些美满和幸福\n 爱你够不够多 对你够不够好\n 可以要求 不要不在乎\n 不愿让你看见 我的伤处\n 是曾经无悔的风雨无阻\n 拥有够不够多 梦的够不够好\n 可以追求 不认输\n 提着昨日种种千辛万苦\n 向明天换一些美满和幸福\n 爱你够不够多 对你够不够好\n 可以要求 不要不在乎\n 不愿让你看见 我的伤处\n 是曾经无悔的风雨无阻\n 拥有够不够多 梦的够不够好\n 可以追求 不认输\n\n 监制：STARS FERRY 摆渡人制作有限公司\n 吉他：江建民 / 花比傲\n 合声编写：黄秀侦\n 合声：黄秀侦 / 李宝琦\n 录音工程师：黄卓叡 (白金) / 林挥斌 (WINGS) / 孙仲舒 (STAR FERRY MUSIC) / RANDY HO (唐楼)\n 混音师：袁家杨 (唐楼)\n 母带后期处理录音师：PERERSON WANG (HK)\n 录音室：白金 / WINGS / STAR FERRY MUSIC (TPE) / 唐楼 (HK)\n 混音室：白金 / 唐楼 (HK)\n 母带后期处理录音室：ULTIMATE ONE (HK)\n 基本轨录音工程：孙仲舒\n 1994 ROCK RECORDS&TAPES CO.,LTD.\n"},"code":200}
红影 发表于 2024-1-24 22:02
有可能，空了我再试试
好。注意一下主帖元素id名
亦是金 发表于 2024-1-24 22:05
本帖最后由 亦是金 于 2024-1-24 22:09 编辑
记得这是难难老师的发现的部分内容，我复制到文本上保存 ...
谢谢，这个真好，得到这样的歌词，到黑黑的歌词里转化一下，再微调一下，肯定比自己去做快多了{:4_199:}
马黑黑 发表于 2024-1-24 22:08
好。注意一下主帖元素id名
这个我已经注意了，不知道为什么不行。今天没时间试了，需要早点下，明天的事忙好后我再仔细看看。
红影 发表于 2024-1-24 22:29
这个我已经注意了，不知道为什么不行。今天没时间试了，需要早点下，明天的事忙好后我再仔细看看。
那就是JS没有组织好，这里面有些时候还是需要技巧的
本帖最后由 起个网名好难 于 2024-1-24 22:58 编辑 <br /><br />红影 发表于 2024-1-24 21:11
我试了一下，歌词无法出来啊，按钮也不动
<style>
#mydiv { position: relative; margin: 70px 0 0 calc(50% - 561px); width: 960px; height: 600px; background: url('https://pic.imgdb.cn/item/65b07c1b871b83018a1e8a09.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #333; overflow: hidden; cursor:pointer; --x0: 0; }
#mydiv::before { position: absolute; left:10px; top: 30px;content: ''; width: 693px; height: 390px; background: url('https://pic.imgdb.cn/item/65b07c60871b83018a1f3e37.jpg') no-repeat center/cover; mix-blend-mode: luminosity;
clip-path: polygon(0 var(--x0), calc(var(--x0) * 2) 0, 100% var(--x0), 100% calc(100% - var(--x0)), calc(var(--x0) * 2) 100%,0 calc(100% - var(--x0))); transition: all .6s; }
#mydiv:hover::before { mix-blend-mode: unset; transform: scale(.6) translate(-220px,-160px); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%); pointer-events: none; }
.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:20%;color:hsl(0,20%,80%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred; background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
.lrcShow::before{color:transparent;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);}
</style>
<div id="mydiv" title="播放/暂停">
<!-- audio id="aud" src="https://music.163.com/song/media/outer/url?id=1855978221" autoplay loop></audio -->
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417fd483ea3.mp4" loop></video>
<div class="lrcShow" data-lrc="点击启动播放">
</div></div>
<script>
{
let lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);let lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
let lrctxt = `
情狐 - 花僮 (Ruby)
词：张北北
曲：张北北
编曲：王中易/高胜
混音：王中易/高胜
母带：李飞
千年的等待
只为今世的遇见
红尘中的回眸
是落寞的起点
修炼几千年
深藏几许的情缘
尘世度劫只为
凝心中的莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
千年的等待
只为今世的遇见
红尘中的回眸
是落寞的起点
修炼几千年
深藏几许的情缘
尘世度劫只为
凝心中的莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
`;
//
let opts = {
lrcTxt:lrctxt,
audioURL:"https://mp3.t57.cn:7087/kwlink_d.php?id=25249088",
}
let lrcPlayer = new lrcPlayerY(opts);
/***---------------------------------------------------------****/
let step = 1, x0 = 0; // , change = true;
let mState = () => lrcPlayer.mObj.paused ? vid.pause() : vid.play();
/**let clipBg = () => {
if(!change) return;
x0 += step;
if(x0 > 100 || x0 < 0) {
step = -step;
change = false;
setTimeout( () => change = true, 2000);
}
mydiv.style.setProperty('--x0', x0 + '%');
};**/
setInterval(() => {
if(!lrcPlayer.mObj.paused) {
x0 += step;
if(x0 > 100 || x0 < 0) {
step = -step;
//change = false;
}
mydiv.style.setProperty('--x0', x0 + '%');
}
},200);
mydiv.addEventListener('click', mState, false);
//aud.addEventListener('playing', mState, false);
//aud.addEventListener('pause', mState, false);
//aud.addEventListener('timeupdate', clipBg, false);
}
</script>