单曲欣赏 双瓣花 演唱：陈瑞
<style>#papa { margin: 150px 0 20px calc(50% - 781px);width:1400px; height: 761px; box-shadow: 2px 2px 6px #000; background: #800000 url('https://wj1.zp68.com:812/lxx/yunhua/2024/08/07/GIF.gif ') no-repeat 0% 0%/100%;position: relative;overflow: hidden; }
#pa{margin: 260px 0px ;position:absolute;width: 200px; height: 150px; overflow: hidden;left: 120px;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}
.gc{position: absolute;
top: 94%;
left: 20%;
text-align: center;
list-style-type: none;
height: 200px;
line-height: 30px;
}
.lrc{
width: 500px;
height: 140px;
overflow: hidden;bottom: 100px;
display: block; position:absolute;;z-index: 5;
margin: 0px 80px;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 25px;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 30px;
color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
#dt2{ position: absolute; width:32px; height: 32px; top: 120px; left: 100px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 310px; left: 1060px; }
</style>
<div id="papa">
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
<path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
</svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
<path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
</svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>
</div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
<div class="gc">
<marquee id="marquee"scrollAmount=10 width=1000 height=100 > <font face="heiti" size="3" color="#eee"><p style="text-align: center;">单曲欣赏双瓣花 演唱：陈瑞 </p></font></marquee>
</div>
</div>
<audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2024/08/07/yy/01.mp3" autoplay loop></audio>
<br>
<script >
bnt.onclick = () => aud.paused ? (aud.play(),enopg.style.display= 'none',cndpt.style.display= 'block',marquee.start(),mypic.style.animationPlayState = 'running',mxpic.style.animationPlayState = 'running') : (aud.pause(),enopg.style.display= 'block',cndpt.style.display='none', marquee.stop(),mypic.style.animationPlayState = 'paused',mxpic.style.animationPlayState = 'paused');
var marquee= document.getElementById('marquee');
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
}, 1000)
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
});
</script >
<script >
var lrc = `双瓣花 演唱：陈瑞
作词： 水天浮云 作曲： 刘亦敏
抱紧我 我们不可分割
沐一样的恩泽 开一样的颜色
生命中 多少不期而遇
用三生的魂魄 结今世的传说
看着我 不要任何承诺
沿一样的脉络 做一样的选择
生命中 多少擦肩而过
是红尘的假设 被看破的因果
是因为寂寞才盛开
还是因为盛开才寂寞
有种美丽 是两个人的永远
有种浪漫 是一辈子的烟火
是因为那一瓣是你
所以这一瓣注定就是我
有种幸福 是双瓣花的爱情
在你我怀中 静静开着
。。。。。。
抱紧我 我们不可分割
沐一样的恩泽 开一样的颜色
生命中 多少不期而遇
用三生的魂魄 结今世的传说
看着我 不要任何承诺
沿一样的脉络 做一样的选择
生命中 多少擦肩而过
是红尘的假设 被看破的因果
是因为寂寞才盛开
还是因为盛开才寂寞
有种美丽 是两个人的永远
有种浪漫 是一辈子的烟火
是因为那一瓣是你
所以这一瓣注定就是我
有种幸福 是双瓣花的爱情
在你我怀中 静静开着
双瓣花 双瓣花
双瓣花 啊... 开着
。。。。
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script >
用亚纶的代码套用玩一次播放器，背景是动图我就不用亚纶那种动图制作了 不TO了，上次TO了也是不回{:4_170:} 漂亮啊！陈瑞的歌曲好好听！{:4_187:} 祝您六六大顺，新春快乐！{:4_204:} 梦江南 发表于 2025-2-3 17:37
漂亮啊！陈瑞的歌曲好好听！
阿姨在啊，我刚准备下了，吃饭去了，明天见了{:4_179:} 小辣椒 发表于 2025-2-3 17:38
阿姨在啊，我刚准备下了，吃饭去了，明天见了
刚刚看到。您下吧，多吃点。明天见！{:4_179:} 很动听很优美的歌声。这歌我唱不来，学会了也唱不出这种既有淡淡伤感忧愁又充满相思的味道来。 小辣椒 发表于 2025-2-3 17:32
不TO了，上次TO了也是不回
是谁哇，樵哥哥帮你切吐他{:4_170:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 你设计的画面真美。 这个好像是双语的，看着另一个歌词，不知是哪个是真{:4_187:} 是谁对亲爱的送的祝福不理不睬，我也可以为亲爱的而战，太唐突美人了啊{:4_173:} {:4_199:} 回了帖子，没事了，来欣赏！ 梦江南 发表于 2025-2-3 17:40
刚刚看到。您下吧，多吃点。明天见！
阿姨初七好
初七人日把歌唱
愿你开心喜洋洋
七星高照福满堂
知足常乐精神爽
好运降临财气旺
福气团团溢庭香
幸福生活添春光
阖家欢乐寿无疆
樵歌 发表于 2025-2-3 19:14
很动听很优美的歌声。这歌我唱不来，学会了也唱不出这种既有淡淡伤感忧愁又充满相思的味道来。
瞧哥哥这首歌是陈瑞的原唱，应该是算比较好听了 樵歌 发表于 2025-2-3 19:15
是谁哇，樵哥哥帮你切吐他
哈哈~~~谢谢瞧哥哥，不用了{:4_170:} 起个网名好难 发表于 2025-2-3 19:15
难难晚上好，谢谢欣赏{:4_187:} 梦油 发表于 2025-2-3 19:39
你设计的画面真美。
谢谢梦油夸奖，这个图图其实是我很早以前的制作，现在都是玩旧图了