《九等哥哥》演唱/高娜娜

翁奕童苑 发表于 2022-6-25 20:52

本帖最后由翁奕童苑于 2022-6-25 21:17 编辑 <br /><br /><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/23d412420658a71d.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 style="LEFT: -30px; WIDTH: 300px; POSITION: relative; TOP:420px">
<div id="mainFrame">
<style type="text/css">
#frame5th{width:0px;height:auto !important;min-height:0px;position:relative; padding:0px;text-
align:center; margin: 0px auto; border-style:solid;border-width:0px; background-image:url();
background-size:100% 100%; }
#mainFrame{overflow: hidden; margin: 0px auto;background-
color:#000000;width:200px;height:150px;position:relative;clip-path:polygon(50% 0%, 100% 25%, 100% 75%,
50% 100%, 0% 75%, 0% 25%);}</style>
<video autoplay="autoplay" controlslist="nodownload" height="150"
src="http://vod.cntv.lxdns.com/flash/mp4video63/TMS/2019/12/26/730ba2d950b94f55b27dcc79cd983e06_h264418000nero_aac32.mp4" width="200"loop="" muted></video></div></div>
<audio id="aud" src="http://vod.cntv.lxdns.com/flash/mp4video63/TMS/2019/12/26/730ba2d950b94f55b27dcc79cd983e06_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','山西民歌《九等哥哥》'],
['5.80','作词/王晓刚编曲/杨一博'],
['10.75','演唱/高娜娜'],
['15.38','哥哥走西口等的妹妹愁白了头'],
['41.01','LRC字幕制作/翁奕童苑'],
['65.34','一等哥哥呀回家路上赶紧走'],
['73.70','风霜雪雨寒'],
['77.34','妹妹的夹袄可为哥哥暖暖手'],
['87.27','三等哥哥呀两眼莫望路边瞅'],
['95.30','虽说野花美不够妹妹却在你心头'],
['105.16','五等哥哥呀妹妹紧靠大门口'],
['112.88','热炕炕烧的红火火'],
['116.73','桌上摆满了滚烫的酒'],
['126.18','LRC字幕制作/翁奕童苑'],
['132.60','九等哥哥呀弯弯曲儿妹妹吼'],
['139.94','吼吼'],
['145.85','喜煞哥哥乐坏了妹'],
['149.78','惊飞鸟儿红枝头'],
['153.52','再等哥哥壶口飞鸿无尽流'],
['161.19','云中行雨中舞'],
['165.23','九曲黄河美不够'],
['171.70','哥哥走西口等白了妹妹的头'],
['179.65','哥哥走西口妹妹不能放歌喉'],
['187.65','哥哥走西口妹妹幸福哪里有'],
['195.99','哥哥走西口妹妹生不如死'],
['204.03','青春不再入水流'],
['212.87','青春不再入水流'],
['227.34','谢谢欣赏']
];
//歌词框单击事件
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>

马黑黑 发表于 2022-6-25 20:59

看看怎么等{:4_170:}

欣赏

翁奕童苑 发表于 2022-6-25 21:02

马黑黑发表于 2022-6-25 20:59
看看怎么等

欣赏

谢谢鼓励！等得白了头{:4_173:}

红影发表于 2022-6-25 21:41

人物下面还嵌了个切割过的小演唱视屏，漂亮的制作{:4_187:}

红影发表于 2022-6-25 21:44

原来是一等再等的九等，还以为三六九等的九等呢{:4_173:}

马黑黑 发表于 2022-6-25 22:17

翁奕童苑发表于 2022-6-25 21:02
谢谢鼓励！等得白了头

没关系，染好再等

翁奕童苑 发表于 2022-6-25 22:27

红影发表于 2022-6-25 21:44
原来是一等再等的九等，还以为三六九等的九等呢

从春等到了秋。

翁奕童苑 发表于 2022-6-25 22:29

红影发表于 2022-6-25 21:41
人物下面还嵌了个切割过的小演唱视屏，漂亮的制作

小装饰代替mp3哈

樵歌发表于 2022-6-26 07:16

图片合成得相当有意境，你年哪，柿子戴表秋天，油菜花戴表春天，这都等了一年了，不知道等到她小哥哥木，可惜的小人儿{:4_170:}

翁奕童苑 发表于 2022-6-26 07:52

樵歌发表于 2022-6-26 07:16
图片合成得相当有意境，你年哪，柿子戴表秋天，油菜花戴表春天，这都等了一年了，不知道等到她小哥哥木，可 ...

从春等到秋，等得白了头。

樵歌发表于 2022-6-26 10:09

翁奕童苑发表于 2022-6-26 07:52
从春等到秋，等得白了头。

这份相思感天动地。

红影发表于 2022-6-26 20:55

翁奕童苑发表于 2022-6-25 22:27
从春等到了秋。

等得还真够执着的{:4_173:}

红影发表于 2022-6-26 20:57

翁奕童苑发表于 2022-6-25 22:29
小装饰代替mp3哈

很不错的构思，点赞{:4_187:}

页: [1]

花潮论坛's Archiver

《九等哥哥》演唱/高娜娜