为你歌唱-戴玉强
本帖最后由 万顷湖 于 2026-8-4 18:37 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_99886"><br /><br /><style>
#papa { left:calc(50% - 582px); width: 1164px; height: 620px; border-radius: 6px; background: tan url('https://free.picui.cn/free/2026/08/03/6a70ad845d8bf.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: absolute;font-size:12px;}
#papa::before, #papa::after { position: absolute;top:0px; content: ''; border-radius: inherit; background:url(https://cccimg.com/view.php/9f978eb150c5da8ad02daf3bbf8d866c.jpg)no-repeat center/cover; width: 100%; height: 100%; transition: all 2s linear;z-index: 10;transform: translate(0%,0%) rotateY(0deg); }
#papa::before {clip-path: polygon(0 0, 0% 100%, 100% 100%);}
#papa::after {clip-path: polygon(100% 0, 0 0, 100% 100%); }
#papa:hover::before { transform: translate(0, 100%) ; }
#papa:hover::after { transform: translate(0, -100% ) ; }
#player {margin:0 auto;position: absolute;top:25%; left:8%;width: 360px;height: 240px;cursor: pointer;animation: spin 10s infinite linear;animation-play-state: var(--state);}
.leaf {position: absolute;width: 40%;height: 40%;border-radius:0 100px;border:2px solid #ffffff;transform-origin: 120% 120%;}
.leaf:nth-of-type(1) {background:url(https://free.picui.cn/free/2026/08/03/6a70ac77be5ec.jpg)no-repeat center/cover;transform: rotate(60deg)translateX(60px);}
.leaf:nth-of-type(2) {background:url(https://free.picui.cn/free/2026/08/03/6a70ac55a473f.jpg)no-repeat center/cover;transform: rotate(120deg)translateX(60px);}
.leaf:nth-of-type(3) {background:url(https://free.picui.cn/free/2026/08/03/6a70ac37e5064.jpg)no-repeat center/cover;transform: rotate(180deg)translateX(60px);}
.leaf:nth-of-type(4) {background:url(https://free.picui.cn/free/2026/08/03/6a70ac0fbdb75.jpg)no-repeat center/cover;transform: rotate(240deg)translateX(60px);}
.leaf:nth-of-type(5) {background:url(https://free.picui.cn/free/2026/08/03/6a70abd8a0e26.jpg)no-repeat center/cover;transform: rotate(300deg)translateX(60px);}
.leaf:nth-of-type(6) {background:url(https://free.picui.cn/free/2026/08/03/6a70ab7b6591b.jpg)no-repeat center/cover;transform: rotateZ(360deg)translateX(60px);}
@keyframes spin {0% { transform: rotate(-360deg) ;}}
.lrcShow{font:bold 3em serif;position:absolute;width:80%;height:2em;top:25px;left:30%;color:lightgray;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer; z-index:100;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-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%;}}
#indicator {position:absolute;left:30%;bottom:10px;width:40%;z-index:100;}
#btnplay { width: 120px; height: 120px; cursor: pointer; animation: rotating 6s infinite linear ; animation-play-state: var(--state);position:absolute; left:calc(50% - 30px); bottom:30px; z-index:100;}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="player"><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span></div>
<img id="btnplay" src="https://free.picui.cn/free/2026/08/03/6a70af0be8c75.png" title="点击暂停" alt="" ><br>
<div class="lrcShow" data-lrc="为你歌唱 - 戴玉强"></div>
<progress id="indicator" value='0' max='100' ></progress>
</div>
<div style="height:720px;"></div>
<script>
{
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.indicator=opts.indicator;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.lrcShowObj.dataset.lrc=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.indicator)indicator.value=this.mObj.currentTime/this.mObj.duration*100;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()}})}}
let lrcStr = `为你歌唱 - 戴玉强
词：叶旭全
曲：李小兵
在月儿依恋星光的晚上
你是否也看见家乡的月亮
你离我而去
让我悲伤
我依然充满着希望的遐想
这月儿依恋星光的晚上
你是否也爱上他乡的月亮
你离我而去
让我悲伤
我依然记着你可爱的模样
你的明眸秋波荡漾
秋波荡漾
你的发丝散发幽香
你的脾气有点倔强
有点倔强
你的心地善良
回来吧姑娘
我可爱的姑娘
别让我把思念的苦酒品尝
回来吧姑娘
我可爱的姑娘
别让我每日每夜挂肚牵肠
也许你已不再回来不再回来
也许你已把我忘怀
我依然会为你歌唱
为你歌唱
永远地歌唱
为你歌唱
我可爱的姑娘
就让我为你歌唱
歌唱
为你歌唱
我可爱的姑娘
就让我为你歌唱
歌唱
就让我为你歌唱
歌唱
`;
//------------------------------------------------------------------
var opts = {
lrcTxt:lrcStr,
audioURL:"https://www.joy127.com/url/156711.mp3",
indicator: indicator,
}
var lrcPlayerY = new lrcPlayerY(opts);
btnplay.onclick = function() {
if (lrcPlayerY.mObj.paused) {
this.style.animationPlayState = 'running';
player.style.animationPlayState = 'running';
lrcPlayerY.mObj.play();
} else {
this.style.animationPlayState = 'paused';
player.style.animationPlayState = 'paused';
lrcPlayerY.mObj.pause();
}
};
player.onclick = function() {
if (lrcPlayerY.mObj.paused) {
this.style.animationPlayState = 'running';
btnplay.style.animationPlayState = 'running';
lrcPlayerY.mObj.play();
} else {
this.style.animationPlayState = 'paused';
btnplay.style.animationPlayState = 'paused';
lrcPlayerY.mObj.pause();
}
};
}
</script></td></tr></table>
好听好看，谢谢万顷湖老师精彩分享{:4_190:} 杨帆 发表于 2026-8-3 23:57
好听好看，谢谢万顷湖老师精彩分享
版主好！我用您的箴言自查，青春已过，奋斗已过，现在只剩下学习。学习也只是个差生，谢谢您的鼓励。
万顷湖 发表于 2026-8-4 06:10
版主好！我用您的箴言自查，青春已过，奋斗已过，现在只剩下学习。学习也只是个差生，谢谢您的鼓励。
问好万顷湖朋友~重要的是学习态度，学习质量绝非第一，共勉{:4_190:} 男高音歌唱家，这歌曲真好听。
制作很漂亮，进度条上的播放器合旋转图片的播放器都能操作，只是进度条貌似无法操作呢。
欣赏万顷湖老师好帖{:4_199:} 红影 发表于 2026-8-4 14:11
男高音歌唱家，这歌曲真好听。
制作很漂亮，进度条上的播放器合旋转图片的播放器都能操作，只是进度条貌似 ...
报告：下方进度条是由蓝色显示。不用操作，与歌曲同步。如果浏览器是深色背景，可能看不出蓝色的进度，改成白色背景就可以看见。
万顷湖 发表于 2026-8-4 18:42
报告：下方进度条是由蓝色显示。不用操作，与歌曲同步。如果浏览器是深色背景，可能看不出蓝色的进度，改 ...
其实进度条最好也能操作才好{:4_173:} 红影 发表于 2026-8-4 22:57
其实进度条最好也能操作才好
报告：进度条附属于音乐，共用一个开关。这个恰好落在圆圈上，我下面发一个落在进度条上。最左有图像的开关是控制画面的。
页:
[1]