三首同步歌曲 《每当鼠标移动到画面上切换画面》
本帖最后由 亦是金 于 2024-3-30 20:32 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1852803">
<font size="5"><font color="DarkRed"> 用“起个网名好难”老师的（每当鼠标移动到画面上切换画面）代码，制作了一个播放器。谢谢老师分享！</font></font><br><br>
<div class="cont-area">
<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:30px;margin-LEFT: -310px;">
<style>
#oBlk {
width:1200px;height:700px;position:relative;
background:#c8faeb url(https://s1.ax1x.com/2023/03/02/ppFrXIP.jpg) no-repeat center / cover;
margin:auto;transition:all 2.5s;
overflow:hidden; border-radius:10px;
box-shadow:4px 4px 8px black;
}
</style>
<div id="oBlk"><div class="lrcShow" data-lrc="点击启动播放"></div></div>
<script>
let pics = [
"https://s1.ax1x.com/2023/03/02/ppFrXIP.jpg","https://s1.ax1x.com/2023/03/02/ppFrvPf.jpg","https://s1.ax1x.com/2023/03/02/ppFrxG8.jpg","https://s1.ax1x.com/2023/03/02/ppFrOat.jpg","https://s1.ax1x.com/2023/03/02/ppFrzRS.jpg","https://s1.ax1x.com/2023/03/02/ppFsSxg.jpg","https://s1.ax1x.com/2023/03/02/ppFsCrj.jpg","https://s1.ax1x.com/2023/03/02/ppFs9MQ.jpg","https://s1.ax1x.com/2023/03/02/ppFsFZn.jpg"
];
let idx = 0;
let oBlk = document.querySelector('#oBlk');
oBlk.addEventListener('mouseover', function () {
idx++; idx %= pics.length;
oBlk.style.backgroundImage = 'url(' + pics + ')';
});
</script>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:-680px;LEFT: 0px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《每当鼠标移动到画面上切换画面》</span>
<span style="color:#3d46f7;"><span style="font-size:24px;"></span></div>
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 100px;height: 50px; transform: translate(-850px, 400px); mix-blend-mode: multiply;" />
<div style="position: relative;width: 500px;height: 50px;top:-80px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>
</style>
<div style="position: relative; top:-710px;LEFT: 60px;z-index: 12435;">
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2.0em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:1.8em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:20%;bottom:-20px;width:120%;height:120px;margin:6px auto position:relative;<!--歌词位置-->}
#rdisk{position:absolute;left:5px;bottom:0px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;<!--光盘位置-->}
@keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(20deg) rotateZ(360deg);}100%{transform:rotateX(0deg) rotateY(20deg) rotate(0deg);}}
#ground3rd{
width:1000px;height:600px;
position:absolute;font-size:16px;
overflow:hidden;border-radius:0px;
margin:5px 0px 30px -5px;
background:url(https://s4.ax1x.com/2022/03/05/bwbPNq.jpg);
background-position:center;
background-size: cover;
perspective: 1200px;
}
#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1000px;
height: 600px;
animation: rote 80s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rote {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: -1730px 300px;
}
}
#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1000px;
height: 600px;
animation: rotet 100s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rotet {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: 0px -1730px;
}
}
#songList li {
cursor: pointer;
color: #ffffff;
font:thick微软雅黑;
font-size:18px;
line-height:30px
}
</style>
<div id="ground3rd">
<div class="itemm">
<div style="width: 1000px;height: 600px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:0px;margin-LEFT: 0px;">
<div style="position:relative;width: 1000px;height: 600px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">
</div>
<ol id='songList' style="color:red;position:absolute;top:10px;left:0px;"><!--歌曲菜单位置--></ol>
<div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
background: url('https://s1.ax1x.com/2023/02/28/ppCT07F.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
<div id="LRCShow"></div>
</div>
<!-- 下面一句是存放歌词的标签 -->
<textarea style="visibility:hidden;" id='lrcContent0'></textarea>
<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
</script>
<script type="text/javascript">
(function() {
songParas =[["《一首深情的歌》 - 高宇翔/苏紫曦","","https://music.163.com/song/media/outer/url?id=2028280420.mp3",`《一首深情的歌》 - 高宇翔&苏紫曦\n
词曲 : 轻云望月\n
演唱：高宇翔&苏紫曦\n
LRC歌词编辑：亦是金\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`],
["《最浪漫的事》 - 赵咏华/好妹妹","","https://music.163.com/song/media/outer/url?id=329499.mp3",`《最浪漫的事》 - 赵咏华\n
作词 : 姚若龙\n
作曲 : 李正帆\n
演唱：赵咏华\n
LRC歌词编辑：亦是金\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`],
["《 爱 似 水 仙》 - 张茜/半吨兄弟","","https://www.kumeiwp.com/sub/filestores/2023/03/14/b14e2aa7619b51dc3bd0da16630a33e2.mp3",
`《 爱 似 水 仙》 - 张茜/半吨兄弟\n
作词 : 梁俊睿/胡力\n
作曲 : 胡力\n
演唱：张茜/半吨兄弟\n
LRC歌词编辑：亦是金\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`],
];
var opts = {
lrcTxtID:'lrcContent0',
lrcShowID:"LRCShow",
audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
audioCtrl:'rdisk'
};
var km = null;
var idx = 0;
let songList = document.getElementById('songList');
for(n = 0; n < songParas.length; n++) {
let item = document.createElement('li');
item.id = 's'+n;
item.innerHTML = songParas;
songList.appendChild(item);
}
items = songList.getElementsByTagName('li');
for(n = 0 ; n < items.length; n++) {
items.onclick=function() {
idx = parseInt(this.id.substr(1));
document.getElementById('ground3rd').style.backgroundImage = `url(${songParas})`;
if(km){
km.stopMusic();
//km = null;
km.handleLrc(songParas);
km.setAudioUrl(songParas);
km.reStart();
}
else {
document.getElementById(opts.lrcTxtID).innerHTML = songParas;
opts.audioURL=songParas;
km = new lrcPlayer2(opts);
}
}
}
items.click();
setInterval(() => {
if(km) {
items = songList.getElementsByTagName('li');
if(km.isMusicEnd()) {
idx++; idx %= items.length;
items.click();
}
}
//setTimeout(isSongEnded, 500);
}, 500);
})();
</script>
</TD></TR></TBODY></TABLE>
<DIV style="HEIGHT: 100px">
怎么有广告播报？ 没有看见背景图片{:4_203:} 冬天的雨 发表于 2023-3-7 18:52
怎么有广告播报？
酷我歌曲原来没有这种情况的，现在不知道为什么会出现有时歌曲不能播放，就变成广告播报的。稍后又能正常播放歌曲的，郁闷！{:4_203:} 亦是金 发表于 2023-3-7 19:00
酷我歌曲原来没有这种情况的，现在不知道为什么会出现有时歌曲不能播放，就变成广告播报的。稍后又能正常 ...
看了你的代码，你图片链接上有符号要去了，否则图片看不见 这个好玩的。 看到好多漂亮的的雪景，歌曲也好听，每首都有歌词同步。真漂亮的制作。欣赏亦是金老师好帖{:4_187:} 冬天的雨 发表于 2023-3-7 19:14
看了你的代码，你图片链接上有符号要去了，否则图片看不见
你说的问题我没有看出来！请告诉要去掉的符号，谢谢了！{:4_191:} 庶民 发表于 2023-3-7 19:56
这个好玩的。
问好庶民！谢谢欣赏！{:4_191:} 红影 发表于 2023-3-7 19:58
看到好多漂亮的的雪景，歌曲也好听，每首都有歌词同步。真漂亮的制作。欣赏亦是金老师好帖
问好红影女神！祝你节日快乐！{:4_204:} 醉美水芙蓉 发表于 2023-3-7 20:34
看不见图片！
怎么回事？我是你看见的！{:4_203:} 没有背景图出来
#oBlk {
width:1200px;height:700px;position:relative;
background:#c8faeb url(https://s1.ax1x.com/2023/03/02/ppFrXIP.jpg) no-repeat center / cover;
margin:auto;transition:all 2.5s;
overflow:hidden; border-radius:10px;
box-shadow:4px 4px 8px black;
}
要去掉 亦是金 发表于 2023-3-7 20:33
问好红影女神！祝你节日快乐！
谢谢亦是金老师的美好祝福{:4_187:} 本帖最后由 亦是金 于 2023-3-8 10:24 编辑
小辣椒 发表于 2023-3-7 21:37
谢谢小辣椒的指点提醒，我过去也碰到这个问题！编辑时将 去掉，保存后，又会自动加上 。我是这样编辑 保存的，这一次忘了。 小辣椒 发表于 2023-3-7 21:37
谢谢小辣椒指点！祝你节日快乐！{:4_204:}
页:
[1]
2