《家乡的小河》演唱/查森娜(测试)
本帖最后由 翁奕童苑 于 2022-6-24 18:06 编辑 <br /><br /><p></p><style>
/* 帖子外层 */
.outer {
left: -180px;top:30px;
width: 960px; /* 帖子宽度 */
height: 600px; /* 帖子高度 */
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; overflow:
hidden;border-radius:6%;transform:rotate(0deg);background: url(https://www.z4a.net/images/2022/06/24/32e9091e-bacd-42c6-83d2-bf0f016587d1-0-b8b25f00-1d86-4b65-a5d6-79c139887b51.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: 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://video.699pic.com/videos/77/08/15/a_6PPqEeFnxHvK1586770815.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=562431089.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','《家乡的小河》'],
['12.36','词/阿古拉泰 曲/斯琴朝克图'],
['23.45','演唱/查森娜'],
['34.42','你常常从我的梦中流过'],
['43.88','那哗啦啦的流水 唱着甜甜的歌谣'],
['53.53','那慢悠悠的小船是我童年的摇车'],
['63.09','在你的怀里我就像鱼儿一样快乐'],
['72.27','啊 啊 家乡的小河'],
['82.31','心中的小河 清清的小河'],
['92.10','你奔腾的脚步就是我深情地诉说'],
['106.38','深情地诉说'],
['112.38','LRC字幕制作/翁奕童苑'],
['140.14','你永远在我的心中流着'],
['149.52','那春天里的蛙鸣 是否已经停歇'],
['159.21','那夕阳中的欢笑 如今在哪里停泊'],
['168.74','岸边的垂柳为什么像妈妈那样沉默'],
['177.58','啊 啊 家乡的小河'],
['187.85','心中的小河 清清的小河'],
['197.52','你奔腾的脚步就是我深情地诉说'],
['211.95','深情地诉说'],
['216.20','啊 啊 家乡的小河'],
['226.28','心中的小河 清清的小河'],
['235.89','你奔腾的脚步就是我深情地诉说'],
['250.43','深情地诉说'],
['257.58','家乡的小河'],
['275.58','谢谢欣赏']
];
//歌词框单击事件
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>
真漂亮，帖子做得很用心，把黑黑的歌词同步和meter调整得很合适。视频选择也很好{:4_187:} 翁奕童苑真棒，这个帖子做得太好了{:4_187:} 做得漂亮！ 红影 发表于 2022-6-24 19:51
真漂亮，帖子做得很用心，把黑黑的歌词同步和meter调整得很合适。视频选择也很好
谢谢鼓励！ 红影 发表于 2022-6-24 19:52
翁奕童苑真棒，这个帖子做得太好了
谢谢鼓励！ 樵歌 发表于 2022-6-24 20:45
做得漂亮！
谢谢鼓励！ 翁奕童苑 发表于 2022-6-24 21:02
谢谢鼓励！
不客气啊，这个帖子特别好{:4_187:} 本帖最后由 翁奕童苑 于 2022-6-24 22:18 编辑
红影 发表于 2022-6-24 22:08
不客气啊，这个帖子特别好
曾在蜀东山城奋斗六年，增长了悠长的智慧，平台终于给了回报的机会。 翁奕童苑 发表于 2022-6-24 22:16
曾在蜀东山城奋斗六年，增长了悠长的智慧，平台终于给了回报的机会。
有付出就有回报，这话是颠扑不破的道理{:4_173:}
页:
[1]