《钱塘江》演唱:佟铁鑫/曹芙嘉
本帖最后由 翁奕童苑 于 2022-6-24 22:06 编辑 <br /><br /><p></p><style>
/* 帖子外层 */
.outer {
left: -170px;top:10px;
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/9c35b6efb018687c.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: .70;z-index: 20;}
/* 歌词同步显示框 */
.lrcbox {width: 960px;
transform: translate(20px, 480px); /* 定位 */
font: bold 3em sans-serif; /* 文本 */
color: #ff0000; /* 字体颜色 */
-webkit-text-stroke:1px #ffffff;
font-family:楷体;
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
z-index: 30;
}
</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://img.tukuppt.com/video_show/2475824/00/01/42/5b42d19c8bf10.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div style="position: absolute; width: 513px; height: 136px; z-index: 2; 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="#000000">演唱/佟铁鑫/曹芙嘉 编辑/翁奕童苑</font></strong></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1354425559.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','《钱塘江》'],
['6.08','词:王水法/杨晓光 曲/孟庆云'],
['12.06','演唱/佟铁鑫/曹芙嘉'],
['22.32','在世界的东方有一条江'],
['27.36','她的名字叫钱塘'],
['33.17','一头连着东海 一手牵起春江'],
['45.94','风平水面阔 两岸似画廊'],
['56.54','潮涌千狮吼 惊涛拍海塘'],
['67.71','白雪堆里展红帆'],
['73.72','那是弄潮儿立在了潮头上'],
['83.67','钱塘江 钱塘江 汇聚滚滚洪流'],
['99.44','奔腾在泱泱东方'],
['104.74','钱塘江 钱塘江'],
['115.54','汇聚滚滚洪流 奔腾在泱泱东方'],
['126.45','LRC字幕制作/翁奕童苑'],
['147.38','在世界的东方有一条江'],
['152.94','它的名字叫钱塘'],
['158.51','时而低吟浅唱 时而高歌引航'],
['171.37','江花红胜火 锦绣映霞光'],
['182.47','潮生风云会 传奇天下扬'],
['193.27','波涛声中听惊雷'],
['198.80','那是我们喷薄崛起的力量'],
['208.95','钱塘江 钱塘江'],
['219.40','汇聚滚滚洪流 奔腾在泱泱东方'],
['230.49','钱塘江 钱塘江'],
['240.75','汇聚滚滚洪流'],
['246.09','奔腾在泱泱泱泱东方'],
['262.09','谢谢欣赏']
];
//歌词框单击事件
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: 320px;"> </div> 这个很气势，真的像钱塘大潮呢{:4_187:} 红影 发表于 2022-6-24 22:34
这个很气势，真的像钱塘大潮呢
谢谢鼓励！ 翁奕童苑 发表于 2022-6-24 22:36
谢谢鼓励！
此代码是亚伦老师编制！ 室雅乐德音萦绕，正气清心满乾坤 马黑黑 发表于 2022-6-25 08:58
室雅乐德音萦绕，正气清心满乾坤
谢谢鼓励！ 翁奕童苑 发表于 2022-6-24 22:36
谢谢鼓励！
不客气啊，很棒的制作呢{:4_187:} 翁奕童苑 发表于 2022-6-25 10:03
谢谢鼓励！
{:4_190:}
页:
[1]