《旗袍》演唱/马丽
<p></p><style>
/* 帖子外层 */
.outer {
left: -180px;top:30px;
width: 960px; /* 帖子宽度 */
height: 600px; /* 帖子高度 */
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #ff0000; overflow:
hidden;border-radius:6%;transform:rotate(0deg);background: url(https://www.z4a.net/images/2022/06/25/d8b57bac-e96d-46e7-971e-96060377a91c-0-8cf9f030-fae1-4e9f-9129-78fe1da8c076.jpg)0 0/100%100%; text-align: center;
position: relative; /* 重要 帖子定位依赖 */
}
.vid { position: absolute; width: 100%; height: 600px; left: 0px;top:0px; object-fit: cover; opacity: .40;z-index: 10;}
/* 歌词同步显示框 */
.lrcbox {width: 960px;
transform: translate(20px, 470px); /* 定位 */
font: bold 3em sans-serif; /* 文本 */
color: #ff0000; /* 字体颜色 */
-webkit-text-stroke:1px #ffff00;
font-family:楷体;
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
z-index: 40;
}
</style>
<div class="outer">
<div class="lrcbox">
<p id="geci" style="padding: 0;margin: 4px 0px">Loading ...</p>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="80"style="width: 550px; height: 10px;padding: 0;margin: 20px -220px;"></meter>
</div>
<video class="vid" src="https://video.699pic.com/videos/30/48/44/a_7nZaT1FsPt7B1552304844.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div style="position: absolute; width: 513px; height: 136px; z-index: 20; left: 500px; top: 20px" id="layer3">
<p align="center"><strong><font face="宋体" size="6" face="翁奕童苑" color="#FF0000">《旗袍》</font></strong></p>
<p align="center"><strong><font face="宋体" size="4" color="#ffff00">演唱/马丽 编辑/翁奕童苑</font></strong></div>
<div class="btn">
<img src="https://www.z4a.net/images/2022/06/23/123.gif" id="playpause" style="position:absolute;top: 470px;left:40px;width:100px;height:100px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 300;"/>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27946542.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
geci = document.querySelector('#geci'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr =[
['0.00','《旗袍》'],
['10.74','词/庄奴 曲/朱进'],
['21.49','演唱/马丽'],
['32.24','窈窕杨柳腰'],
['38.73','扭腰呀随风摇'],
['45.25','摇动了美旗袍'],
['48.15','倩影呀 令人倾倒'],
['65.12','窈窕杨柳腰 扭腰呀随风摇'],
['78.12','摇动了美旗袍'],
['80.94','倩影呀 令人倾倒'],
['90.91','旗袍呀多古典'],
['97.36','旗袍呀多娇娆'],
['100.71','旗袍呀多么美好'],
['107.19','传统的文化要继承'],
['113.93','更需要多介绍'],
['120.43','一袭旗袍一生荣耀'],
['127.38','让我们感到骄傲'],
['133.38','LRC字幕制作/翁奕童苑'],
['149.26','旗袍呀多古典'],
['156.49','旗袍呀多娇娆'],
['159.89','旗袍呀多么美好'],
['166.38','传统的文化要继承'],
['173.13','更需要多介绍'],
['179.57','一袭旗袍一生荣耀'],
['186.59','让我们感到骄傲'],
['192.79','传统的文化要继承'],
['199.34','更需要多介绍'],
['205.83','一袭旗袍一生荣耀'],
['212.86','让我们感到让我们感到骄傲'],
['222.67','让我们感到骄傲'],
['232.67','谢谢欣赏']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
geci.innerHTML = lrcAr;
}
}
})
</script>
<div style="height: 120px;"> </div>
都是时髦大妈啊，很积极的生活态度，很赞。{:4_187:} 制作很漂亮，给翁奕童苑点赞{:4_199:} 红影 发表于 2022-6-25 11:10
制作很漂亮，给翁奕童苑点赞
谢谢鼓励！ 红影 发表于 2022-6-25 11:09
都是时髦大妈啊，很积极的生活态度，很赞。
俺虽是爷之辈级别，也有正能量的欣赏。 翁奕童苑 发表于 2022-6-25 11:19
俺虽是爷之辈级别，也有正能量的欣赏。
这个播放器音乐没有出来，点击停止也是不行，喇叭按钮没有效果？ 翁奕童苑 发表于 2022-6-25 11:15
谢谢鼓励！
不客气，问好翁奕童苑，晚上好{:4_187:} 翁奕童苑 发表于 2022-6-25 11:19
俺虽是爷之辈级别，也有正能量的欣赏。
爱美之心人皆有之{:4_171:}
页:
[1]