将军令

绿叶清舟 发表于 2022-6-23 09:09

本帖最后由绿叶清舟于 2022-6-23 09:21 编辑 <br /><br /><style>
/* 帖子外层 */
.outer {
   left: -200px; /* 水平定位*/
   width: 1000px; /* 帖子宽度 */
   height: 700px; /* 帖子高度 */
   background: #ccc url('https://pic.imgdb.cn/item/62b2d063094754312920f5e6.jpg') no-repeat; /* 帖子背景 */
   box-shadow: 0 4px 18px #000; /* 盒子阴影*/
   position: relative; /* 重要帖子定位依赖 */
   overflow: hidden;
}
.vid10 { position: absolute; width: 1080px; height: 700px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}

/* 歌词同步显示框 */
.lrcbox {
   transform: translate(20px, 20px); /* 定位 */
   font: bold 1em sans-serif; /* 文本 */
   color: #fff; /* 字体颜色 */
   text-shadow: 1px 1px 2px #000; /* 文本阴影 */
   background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
   border-radius: 100% 0; /* 盒子边框 */
   cursor: pointer; /* 手型指针 */
   position: absolute; /* 关键歌词显示框依赖于此 */
}
</style>

<div class="outer">
<video class="vid10" src="https://img.tukuppt.com/video_show/2418175/00/18/93/5ef7af74a3511.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
   <div class="lrcbox">
            <p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
            <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
   </div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=156210.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.05','下歌词5nd'],
['1.45','将军令'],
['3.85','作词：吴克群　作曲：吴克群'],
['4.35','歌词吾爱'],
['5.38','爱歌词 5nd'],
['7.78','我知道对有什么不对'],
['9.90','我知道将军说的话不一定对'],
['12.81','我知道对或错我自己能分辨'],
['15.61','请你安静点请你安静点'],
['19.32','我知道对有什么不对'],
['21.73','我知道外国的月亮没比较圆'],
['24.62','我知道 yo yo yo'],
['25.99','不是我的语言'],
['27.49','请你安静点请你安静点'],
['31.40','我是个小兵我绷紧了神经'],
['34.03','在战场上拼命听谁在发号施令'],
['37.26','将军在微醺他方向分不清'],
['40.01','西方人念经他全都听'],
['43.20','不同的肤色说不同的话语'],
['45.91','相同的节奏有不同的旋律'],
['49.07','自己的文化要自己来说明'],
['51.92','自己的舞台有我们自己顶'],
['55.04','我知道对有什么不对'],
['57.29','我知道将军说的话不一定对'],
['60.10','我知道对或错我自己能分辨'],
['62.92','请你安静点请你安静点'],
['66.86','我知道对有什么不对'],
['69.08','我知道外国的月亮没比较圆'],
['72.21','我知道 yo yo yo'],
['73.37','不是我的语言'],
['74.96','请你安静点请你安静点'],
['90.65','将军追流行他全身都Bling Bling'],
['93.34','学西方人念经忘了自己先生贵姓'],
['96.33','他们满口 check out'],
['97.68','想叫他 get out'],
['99.18','我是个小兵却乐天知命'],
['102.46','在你的世界学你说ABCD'],
['108.31','在我的土地对不起请说华语'],
['114.29','我知道对有什么不对'],
['116.52','我知道将军说的话不一定对'],
['119.42','我知道对或错我自己能分辨'],
['122.22','请你安静点请你安静点'],
['126.03','我知道对有什么不对'],
['128.31','我知道外国的月亮没比较圆'],
['131.39','我知道 yo yo yo'],
['132.70','不是我的语言'],
['134.23','请你安静点请你安静点'],
['167.61','我知道对我们有种'],
['170.49','我知道对我们敢冲'],
['173.38','我知道对骄傲的龙'],
['179.50','我知道对有什么不对'],
['181.60','我知道将军说的话不一定对'],
['184.48','我知道对或错我自己能分辨'],
['187.34','请你安静点请你安静点'],
['191.25','我知道对有什么不对'],
['193.36','我知道外国的月亮没比较圆'],
['196.47','我知道 yo yo yo'],
['197.63','不是我的语言'],
['199.35','请你安静点请你安静点']
];
//歌词框单击事件
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>

红影发表于 2022-6-23 10:00

这四周火焰很烘托气氛。很大气的制作，清舟的构思真棒{:4_199:}

红影发表于 2022-6-23 10:01

找到的视频如何配合图片，还是挺有讲究的。清舟的制作每次都结合得特别棒{:4_199:}

梦油发表于 2022-6-23 10:04

气势恢弘的《将军令》，真棒！

樵歌发表于 2022-6-23 10:56

气势磅礴！但是用民国时手摇唱机吧。{:4_172:}

绿叶清舟 发表于 2022-6-23 15:10

樵歌发表于 2022-6-23 10:56
气势磅礴！但是用民国时手摇唱机吧。

一上来就跑调，是不是机器很旧了啊{:4_189:}

绿叶清舟 发表于 2022-6-23 15:10

梦油发表于 2022-6-23 10:04
气势恢弘的《将军令》，真棒！

谢谢梦油支持

绿叶清舟 发表于 2022-6-23 15:15

红影发表于 2022-6-23 10:00
这四周火焰很烘托气氛。很大气的制作，清舟的构思真棒

做完图片去翻正好看到这个就用上了

梦油发表于 2022-6-23 15:28

绿叶清舟发表于 2022-6-23 15:10
谢谢梦油支持

别客气。

红影发表于 2022-6-23 16:32

绿叶清舟发表于 2022-6-23 15:15
做完图片去翻正好看到这个就用上了

这个四周有火，大多数只看到是下面有火的{:4_173:}

加林森 发表于 2022-6-23 17:58

声音有点怪怪的。{:4_203:}

小辣椒 发表于 2022-6-23 18:23

有气势，将军很威风

视频背景配歌词同步，清舟好制作{:4_178:}

樵歌发表于 2022-6-24 10:46

绿叶清舟发表于 2022-6-23 15:10
一上来就跑调，是不是机器很旧了啊

就像小时用的手摇唱机发条突然松了感觉，特别有趣，你是故意的吧{:4_170:}

绿叶清舟 发表于 2022-6-24 17:42

樵歌发表于 2022-6-24 10:46
就像小时用的手摇唱机发条突然松了感觉，特别有趣，你是故意的吧

哪里啊，不小心滑一了下了{:4_189:}

绿叶清舟 发表于 2022-6-24 17:43

加林森发表于 2022-6-23 17:58
声音有点怪怪的。

机器有点老了{:4_189:}

绿叶清舟 发表于 2022-6-24 17:43

红影发表于 2022-6-23 16:32
这个四周有火，大多数只看到是下面有火的

是啊正好翻到一个的了

绿叶清舟 发表于 2022-6-24 17:43

小辣椒发表于 2022-6-23 18:23
有气势，将军很威风

视频背景配歌词同步，清舟好制作

谢谢辣椒

加林森 发表于 2022-6-24 17:46

绿叶清舟发表于 2022-6-24 17:43
机器有点老了

破音乐。。。{:4_189:}

红影发表于 2022-6-24 20:49

绿叶清舟发表于 2022-6-24 17:43
是啊正好翻到一个的了

这歌曲特别好玩，开始的伴奏忽然就降调了{:4_173:}

樵歌发表于 2022-6-24 21:17

绿叶清舟发表于 2022-6-24 17:42
哪里啊，不小心滑一了下了

最是难得听到呢{:4_173:}

页: [1]

花潮论坛's Archiver

将军令