【奢香夫人】
本帖最后由 冰心 于 2023-8-3 15:32 编辑 <br /><br /><style>#papa {margin: 100px -300px;width: 1164px;height: 620px;background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url('http://img.mp.itc.cn/upload/20170629/d35c0a0b1da745b6bc93dad9add35177_th.jpg')no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;}
.lyricDisp{transition:.3s all ease;text-align:center;color:#000000;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);line-height: 50px;}
.lyricDisp:first-child{font-size:1.5em;color:#fff080;transition:font-size 0.6s;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:0%;height:100%;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);text-align:left;}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:0%;top: 50px;width:50%;font-weight:990;font-size:1.8em;font-family:仿宋;cursor:pointer;}
</style>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==2&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}this.handleLrc(opts.lrcDoc);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.play()});this.mObj.addEventListener('playing',function(){that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){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(that.idx>=that.lrcVec.length)return;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)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.showLrcObj.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>
<!------ 以下为定制部分 ---->
<divid="papa">
<dir class="LRCShow"></div>
</div>
<script type="text/javascript">
let lrctxt = ` 歌曲: 《 奢香夫人》
编辑：三月的阳光
演唱：冰心
落脚河上面崖对崖
威宁草海荞花盛开
谁把月亮挂天上
照得想说的话流成海
流成海流成海
越过绵绵的高山
越过无尽的沧海
如果期待依然在
总是春暖到花开
请你轻轻留下来
让梦卷走这尘埃
香飘在书厢之外
奏响美丽的天籁
不等三更过天晓白
奢香夫人赶月归来
她把日光画心上
照得漆黑的夜亮堂堂
亮堂堂亮堂堂
越过绵绵的高山
越过无尽的沧海
如果期待依然在
总是春暖到花开
请你轻轻留下来
让梦卷走这尘埃
香飘在书厢之外
奏响美丽的天籁
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
千山万水永不寂寞
你来过年华被传说
百里杜鹃不凋落
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
走过千山万水永不寂寞
你来过年华被传说
百里杜鹃不凋落
怀念总在心头绕
我们记忆的凭吊
善良的心跳
我寻着你的路让风都停住
依然清晰看见你那坚强的脚步
如果天留得住如果地也能把你挽住
愿你就在这片云水间常驻
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
千山万水永不寂寞
你来过年华被传说
百里杜鹃不凋落
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
走过千山万水永不寂寞
你来过年华被传说
百里杜鹃不凋落
谢谢欣赏 冰心于20230730`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://www.joy127.com/url/105781.mp3", // 歌曲链接
showLines:10 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script> 本帖最后由 冰心 于 2023-8-3 23:03 编辑 <br /><br /><p><a href="home.php?mod=space&uid=171" target="_blank">@三月的阳光</a> 做贴辛苦哈 </p><p><br></p><p><br></p><p>
<audio style="width: 380px; height: 40px;" src="https://www.joy127.com/url/105781.mp3" autoplay="autoplay" loop="loop" controls="controls" type="audio/mpeg"></audio></p><p><br></p><p>如果听到二重唱，请手动关闭播放器 谢谢~</p> 冰心 发表于 2023-8-3 16:16
@三月的阳光 做贴辛苦哈
哈哈，沙发欣赏~~{:4_187:} 冰心 发表于 2023-8-3 16:16
@三月的阳光 做贴辛苦哈
欣赏动听美丽的天籁~~{:4_187:}{:4_187:} 三月的阳光 发表于 2023-8-3 16:19
欣赏动听美丽的天籁~~
哈哈还不错哈 {:4_189:} 这首歌的节奏很舒服。开始出来的声音音调很低呢，后面的听出冰心嫂子甜甜的声音了{:4_199:} 又是阳光哥哥的做贴冰心嫂子翻唱，一对壁人的美好合作{:4_187:} 帖子很精美，播放器在哪，听不到呢 红影 发表于 2023-8-3 19:08
这首歌的节奏很舒服。开始出来的声音音调很低呢，后面的听出冰心嫂子甜甜的声音了
前面曾毅那段我也唱了哈哈哈 声音低一些而已 {:4_189:} 红影 发表于 2023-8-3 19:11
又是阳光哥哥的做贴冰心嫂子翻唱，一对壁人的美好合作
嗯俺不会用代码 顾-念 发表于 2023-8-3 20:15
帖子很精美，播放器在哪，听不到呢
二楼加了播放器哈 听不到可能跟浏览器模式有关系哈 醉美水芙蓉 发表于 2023-8-3 21:54
欣赏好听的歌曲！
感谢芙蓉临帖欣赏哈 冰心 发表于 2023-8-3 22:57
前面曾毅那段我也唱了哈哈哈 声音低一些而已
是的，应该大声点才更好{:4_185:} 冰心 发表于 2023-8-3 22:58
嗯俺不会用代码
你们两人合作的很完美{:4_199:}
页:
[1]