天堂一定很美
本帖最后由 起个网名好难 于 2023-12-23 21:19 编辑 <br /><br /><style>.lrcShow{font:bold 3em 楷体;position:absolute;bottom:10px;height:auto;left:20%;color:lightgray;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;--lrcTxt:'click to play';}
.lrcShow::before{position:absolute;content:var(--lrcTxt);width:0;height:100%;left:0;top:0;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%;}}
#outframe {
width:1024px;height:560px;position: relative;box-shadow: 0 0 8px #000;margin: 90px auto 48px -200px;
overflow:hidden;border-radius:24px;mix-blend-mode: multiply;
background: url('https://pic.imgdb.cn/item/642a50c2a682492fccd831a0.gif') repeat ;
background-color: skyblue;
}
</style>
<div id="outframe">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 720 400">
<image xlink:href="https://n.sinaimg.cn/sinacn/w690h413/20171212/1330-fypnsiq0178457.jpg" width="720" height="400" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp0" attributename="opacity" from='0' to=".9" begin="0; ep4.end-4" dur='4s' fill="freeze"/>
<animate id="ep0" attributename="opacity" from=".9" to='0' begin="bp0.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img2.baidu.com/it/u=310785608,2879161520&fm=253&fmt=auto&app=138&f=JPEG" width="720" height="400" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp1" attributename="opacity" from='0' to=".9" begin="ep0.end-4" dur='4s' fill="freeze"/>
<animate id="ep1" attributename="opacity" from=".9" to='0' begin="bp1.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img0.baidu.com/it/u=251846928,4119470838&fm=253&fmt=auto&app=138&f=JPEG" width="720" height="400" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp2" attributename="opacity" from='0' to=".9" begin="ep1.end-4" dur='4s' fill="freeze"/>
<animate id="ep2" attributename="opacity" from=".9" to='0' begin="bp2.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://n.sinaimg.cn/sinacn/w720h405/20171212/39f2-fypnsiq0178323.jpg" width="720" height="400" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp3" attributename="opacity" from='0' to=".9" begin="ep2.end-4" dur='4s' fill="freeze"/>
<animate id="ep3" attributename="opacity" from=".9" to='0' begin="bp3.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img1.baidu.com/it/u=2747163487,3258374800&fm=253&fmt=auto&app=138&f=JPEG" width="720" height="400" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp4" attributename="opacity" from='0' to=".9" begin="ep3.end-4" dur='4s' fill="freeze"/>
<animate id="ep4" attributename="opacity" from=".9" to='0' begin="bp4.begin+18" dur='3s' fill="freeze"/>
</image>
</svg>
<div class="lrcShow" >click to play</div>
</div>
<!-- src="lrcPlayerSs.js" -->
<script type="text/javascript" >
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');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/);var 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.toFixed(2),words:lrcTxt})}}}lrcs.sort(function(a,b){return(a.seconds-b.seconds)});for(k=0;k<lrcs.length-1;k++){lrcs.dur=+(lrcs.seconds-lrcs.seconds).toFixed(2)}return lrcs},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcVec.words;this.lrcShowObj.style.setProperty('--lrcTxt','"'+this.lrcVec.words+'"');this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'s');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);this.idx=0;this.mObj.addEventListener('ended',()=>{this.idx=0;this.mObj.play()});this.mObj.addEventListener('canplay',()=>{this.lrcVec.dur=+(this.mObj.duration-this.lrcVec.seconds).toFixed(2)});this.mObj.addEventListener('play',()=>{this.lrcShowObj.style.setProperty('--aniPlayState','running');});this.mObj.addEventListener('pause',()=>{if(this.idx==1&&this.mObj.currentTime<1){this.mObj.play();return false}this.lrcShowObj.style.setProperty('--aniPlayState','paused');});this.mObj.addEventListener('error',()=>{console.log("audio wrong, remove play start event");this.lrcShowObj.style.display='none';this.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',()=>{if(this.idx<this.lrcVec.length){if(this.mObj.currentTime>=this.lrcVec.seconds){this.showLrc(this.lrcVec.dur)}}});this.lrcShowObj.addEventListener('click',()=>{if(this.mObj.paused){this.mObj.play()}else{this.mObj.pause()}})}}
var lrctxt = `
天堂一定很美-翟煜衡
作词：翟煜衡
作曲：翟煜衡
我想天堂一定很美
妈妈才会一去不回
一路的风景都是否有人陪
如果天堂真的很美
我也希望妈妈不要再回
怕你看到历经沧桑的我
会掉眼泪
妈妈是天上的星星眨着眼睛
在我迷失的黑夜指引我前行
彼时有你陪伴我身边
此时你我已是天上人间
我想天堂一定很美
妈妈才会一去不回
一路的风景都是否有人陪
如果天堂真的很美
我也希望妈妈不要再回
怕你看到历经沧桑的我
会掉眼泪
妈妈永远是我心里最美的花
叫我浪迹天涯也要记得回家
曾经的我只想远走高飞
如今回家却已物是人非
我想天堂一定很美
妈妈才会一去不回
一路的风景都是否有人陪
如果天堂真的很美
我也希望妈妈不要再回
怕你看到历经沧桑的我
会掉眼泪
我想天堂一定很美
妈妈才会一去不回
一路的风景都是否有人陪
如果天堂真的很美
我也希望妈妈不要再回
怕你看到历经沧桑的我
会掉眼泪
怕你看到历经沧桑的我
会掉眼泪
`;
var opts = {
lrcTxt:lrctxt,
audioURL:"https://i.mp3.wf/view.php/f4d6182d322df3648f491e0f36927553.m4a"
}
new lrcPlayerY(opts);
</script> 这个好像要点击才开始播放呢。
很伤感的歌曲，还是头一次听到这首歌呢。制作很美，欣赏难难老师好帖{:4_199:} 手机看歌词不能切换！ 醉美水芙蓉 发表于 2023-12-22 23:19
老师背景出来好慢啊！欣赏老师佳作！
http://pic.soutu123.com/element_origin_min_pic/17/02/20/6a835562fc805d24732b37bf1fa09cae.jpg
https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180703/822ae361212144868229195051afb141.gif
可能是多个图片装载较慢的原因吧。 红影 发表于 2023-12-22 23:30
这个好像要点击才开始播放呢。
很伤感的歌曲，还是头一次听到这首歌呢。制作很美，欣赏难难老师好帖{:4_19 ...
http://pic.soutu123.com/element_origin_min_pic/17/02/20/6a835562fc805d24732b37bf1fa09cae.jpg
https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180703/822ae361212144868229195051afb141.gif
自动播放和浏览器有关，有的可以有的则需要点一下来启动。 本帖最后由 起个网名好难 于 2023-12-23 08:06 编辑
亚伦影音工作室 发表于 2023-12-23 07:07
手机看歌词不能切换！
http://pic.soutu123.com/element_origin_min_pic/17/02/20/6a835562fc805d24732b37bf1fa09cae.jpg
https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180703/822ae361212144868229195051afb141.gif
亚伦影音工作室 发表于 2023-12-23 07:07
手机看歌词不能切换！
这个还是与浏览器有关，刚试了下（iPhone手机）：safari 歌词没能切换， 夸克浏览器则能正常切换。
因为我在手机上看不全整个画面所以一般不在手机上测试帖子，谢谢你的关注。 起个网名好难 发表于 2023-12-23 08:13
这个还是与浏览器有关，刚试了下（iPhone手机）：safari 歌词没能切换， 夸克浏览器则能正常切换。
因 ...
水果的浏览器，对svg的支持较差 马黑黑 发表于 2023-12-23 08:19
水果的浏览器，对svg的支持较差
谢谢你的关注支持，早上好！
图片切换似乎没问题（svg），亚伦说的是歌词切换不灵。 起个网名好难 发表于 2023-12-23 07:57
自动播放和浏览器有关，有的可以有的则需要点一下来启动。
可能是，我用的是edge浏览器{:4_187:} 红影 发表于 2023-12-23 09:09
可能是，我用的是edge浏览器
是的，我这edge也不能自动启动 起个网名好难 发表于 2023-12-23 09:11
是的，我这edge也不能自动启动
我换百分浏览器试了试，可以自动启动了{:4_199:} 红影 发表于 2023-12-23 09:50
我换百分浏览器试了试，可以自动启动了
不动就帮忙推一把{:5_117:} 起个网名好难 发表于 2023-12-23 10:04
不动就帮忙推一把
老师选择常用的浏览器，一些浏览器看来不好用！ 亚伦影音工作室 发表于 2023-12-23 10:17
老师选择常用的浏览器，一些浏览器看来不好用！
safari就是苹果自带的浏览器，而夸克浏览器兼容性不错且可以屏蔽广告弹窗等。 起个网名好难 发表于 2023-12-23 10:04
不动就帮忙推一把
是的，点一下就行了呢{:4_173:} 欣赏老师精美帖子，欣赏学习了！{:4_190:}听着听着就不禁流泪了，想着远去的妈妈。。。！ 亦是金 发表于 2023-12-23 11:16
欣赏老师精美帖子，欣赏学习了！听着听着就不禁流泪了，想着远去的妈妈。。。！
谢谢支持 {:5_108:} 起个网名好难 发表于 2023-12-23 08:39
谢谢你的关注支持，早上好！
图片切换似乎没问题（svg），亚伦说的是歌词切换不灵。
这个木有发现
页:
[1]
2