《黄梅飘香》演唱:陈霈然/斯兰
<p></p><style>
/* 帖子外层 */
.outer {
left: -180px;top:20px;
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(http://tuku.link/imgs/2022/06/3e2255309c3ca854.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(-50px, 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/18/97/18/b_hxHVXA5Wjv6x1556189718.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div style="position: absolute; width: 413px; height: 136px; z-index: 20; left: 10px; 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 id="ground3rd">
<div class="wall"id="midground"> </div>
<video autoplay mutedloop src="http://vod.cntv.lxdns.com/flash/mp4video63/TMS/2022/02/06/6b32e3fe3ae247d6af4f2de18ceed803_h264418000nero_aac32.mp4"
style="width: 300px;-webkit-mask-image: radial-gradient(black 55%, transparent 35%);
position:absolute;left:680px;top:420px;"></video>
</div></div>
<audio id="aud" src="http://vod.cntv.lxdns.com/flash/mp4video63/TMS/2022/02/06/6b32e3fe3ae247d6af4f2de18ceed803_h264418000nero_aac32.mp4" 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','《黄梅飘香》'],
['9.57','词/杨刚 曲/徐志远'],
['18.83','演唱:陈霈然/斯兰'],
['27.42','青山如画廊 绿水绕城旁'],
['36.01','春风来梳妆 一夜柳丝长'],
['57.49','轻舟一叶过虹桥'],
['66.01','清风塔上铃儿响'],
['74.49','古风新韵人陶醉'],
['79.41','黄梅一曲最悠扬'],
['91.41','哎哎 黄梅飘香'],
['99.96','飘在我的歌里呀'],
['103.88','啊飘在家乡'],
['108.71','哎哎 黄梅飘香'],
['117.17','飘在我的心里呀'],
['121.02','啊飘在远方'],
['127.09','LRC字幕制作/翁奕童苑'],
['151.67','蓝天云飞翔 白鹭一行行'],
['160.29','濛濛烟雨中 碧荷开满了塘'],
['181.49','浓荫深处听鸟鸣'],
['190.17','稻香村里花芬芳'],
['198.78','长街短巷好风情'],
['203.80','黄梅一曲更欢畅'],
['215.86','哎哎 黄梅飘香'],
['224.39','飘在我的歌里呀'],
['228.22','啊飘在家乡'],
['233.08','哎哎 黄梅飘香'],
['241.47','飘在我的心里呀'],
['245.43','啊飘在家乡'],
['250.18','哎哎 黄梅飘香'],
['258.60','飘在我的心里呀'],
['262.72','啊飘在远方'],
['267.45','哎哎 哎哎 哎哎 哎'],
['287.86','谢谢欣赏']
];
//歌词框单击事件
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:} 红影 发表于 2022-6-26 13:44
制作真漂亮，那个小视屏加得也很匠心。欣赏好帖
谢谢鼓励！ 翁奕童苑 发表于 2022-6-26 14:48
谢谢鼓励！
问好翁奕童苑，周日快乐{:4_187:} 真美，画里有画 走过岁月 发表于 2022-6-26 22:18
真美，画里有画
谢谢鼓励！俺是猪八戒喝磨刀水，心里锈。 问好翁奕童苑，感谢精彩分享{:4_187:} 小辣椒 发表于 2022-6-26 22:43
问好翁奕童苑，感谢精彩分享
谢谢鼓励！
页:
[1]