《印象》 曼丽 （根据马黑黑教程同步歌曲与歌词）
本帖最后由 加林森 于 2022-2-17 23:16 编辑 <br /><br /><style>#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/620dc9da2ab3f51d919f46f1.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 10px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#lrcDiv { position: relative; top: 20px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 2px #000; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="gcDiv">
<!-- 播放器开始 -->
<div id="paDiv">
<div id="btn-ro">·</div><!-- 播放按钮 -->
<div id="jindu"><div id="jd-go"></div></div>
</div>
<!-- 播放器结束 -->
<div id="lrcDiv">歌词同步显示</div>
</div>
</div>
<script language="javascript">
var lrcAr=[
["00:00.65","印象 - 曼里"],
["00:07.41","词:王潮 "],
["00:13.29","曲:喜多"],
["00:18.56","感谢老黑分享教程"],
["00:36.22","谁令我当晚举止失常"],
["00:42.22","难自禁望君您能见谅"],
["00:48.55","但觉万分紧张 皆因跟你遇上"],
["00:54.81","谁令我突然充满幻想"],
["01:00.94","谁令我音韵脑际飘扬"],
["01:06.89","撩动我内心爱情酝酿"],
["01:13.02","为我拨开忧伤 找得失去乐畅"],
["01:19.47","谁令我彷似初恋再尝"],
["01:25.24","我心中蕴藏 爱意千百丈"],
["01:31.31","怎许相依恋 永远心相向"],
["01:37.45","结伴上天际 似燕子飞翔"],
["01:43.52","一起去编写动听乐章"],
["01:52.73","谁令我朝晚苦苦思量"],
["01:58.86","长在我梦境永恒照亮"],
["02:05.12","令我万千猜想 分不清去向"],
["02:11.45","留下了这个深刻印象"],
["02:19.44","歌词同步编辑：加林森"],
["02:42.49","我心中蕴藏 爱意千百丈"],
["02:48.43","怎许相依恋 永远心相向"],
["02:54.69","结伴上天际 似燕子飞翔"],
["03:00.76","一起去编写动听乐章"],
["03:09.96","谁令我朝晚苦苦思量"],
["03:16.04","长在我梦境永恒照亮"],
["03:22.42","令我万千猜想 分不清去向"],
["03:28.56","留下了这个深刻印象"],
["03:34.69","留下了这个深刻印象"],
["03:49.33","谢谢欣赏"],
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "https://www.joy127.com/url/85785.mp3";
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步显示歌词
aud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
}
}
</script>
恭喜队长做成功了，歌曲也好听。只是歌词时间可能有问题，和演唱歌曲并不同步呢{:4_187:} 你不能用黑黑的那首《听闻远方有你》的时间，两首歌曲节奏不一样的，要用这首个的歌词时间。 红影 发表于 2022-2-17 13:03
恭喜队长做成功了，歌曲也好听。只是歌词时间可能有问题，和演唱歌曲并不同步呢
我也发现这个问题了。我得再去修改了。 红影 发表于 2022-2-17 13:05
你不能用黑黑的那首《听闻远方有你》的时间，两首歌曲节奏不一样的，要用这首个的歌词时间。
好的，知道了。 好听。 樵歌 发表于 2022-2-17 13:40
好听。
谢谢，还在学习中。 加林森 发表于 2022-2-17 13:33
我也发现这个问题了。我得再去修改了。
嗯嗯，找个或者做个这首歌的lrc,替换进去就可以了{:4_204:} 红影 发表于 2022-2-17 15:14
嗯嗯，找个或者做个这首歌的lrc,替换进去就可以了
这个我还找了好久，到现在还没有找到呢。真晕。 加林森 发表于 2022-2-17 15:15
这个我还找了好久，到现在还没有找到呢。真晕。
有歌词和乐曲的话，可以自己做lrc 歌词的。 红影 发表于 2022-2-17 15:44
有歌词和乐曲的话，可以自己做lrc 歌词的。
哦，还可以这样啊。谢谢红影提醒。{:4_187:} 加林森 发表于 2022-2-17 15:47
哦，还可以这样啊。谢谢红影提醒。
有一个很小的软件，可以自己做的，只要听着歌曲在歌词地方敲击，就自动记录时间，复制就得到lrc歌词了 红影 发表于 2022-2-17 16:55
有一个很小的软件，可以自己做的，只要听着歌曲在歌词地方敲击，就自动记录时间，复制就得到lrc歌词了
什么名字的软件？ 加林森 发表于 2022-2-17 17:08
什么名字的软件？
我记不住名字，我去找找。 红影 发表于 2022-2-17 19:43
我记不住名字，我去找找。
好的好的 不错不错~~歌词同步~~PP也很漂亮~~{:4_187:} 杨柳青 发表于 2022-2-17 22:57
不错不错~~歌词同步~~PP也很漂亮~~
嗯嗯 加林森 发表于 2022-2-17 23:10
嗯嗯
{:4_208:} 本帖最后由 加林森 于 2022-2-18 10:39 编辑 <br /><br />杨柳青 发表于 2022-2-17 23:13
好听吧
队长太棒了，这个歌词同步都出来了，向队长学习!{:4_187:}
页:
[1]
2