《红窗花》演唱/申祥丽
本帖最后由 翁奕童苑 于 2022-6-27 10:56 编辑 <br /><br /><p></p><p align="center"><font color="blue"><font size="5"><a href="http://pan.yinhuabbs.cn/view.php/4a0cf67e7fdca39d752d4e4f44d244d0.html" target="_blank">点击全屏观看</a></font></p>
<p> </p>
<style>
/* 帖子外层 */
.outer {
left: -175px;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(https://s1.ax1x.com/2022/06/19/Xjhza4.png)0 0/100%100%; text-align: center;
position: relative; /* 重要 帖子定位依赖 */
}
.vid { position: absolute; width: 100%; height: 600px; left: 0px;top:0px; object-fit: cover; opacity: .30;z-index: 10;}
/* 歌词同步显示框 */
.lrcbox {width: 960px;
transform: translate(20px, 490px); /* 定位 */
font: bold 2.6em sans-serif; /* 文本 */
color: #ff0000; /* 字体颜色 */
-webkit-text-stroke:1px #ffff00;
font-family:宋体;
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
z-index: 50;
}
</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: 650px; height: 10px;padding: 0;margin: 20px 100px;"></meter>
</div>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/14/28/V-142849-61113C76.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 class="btn">
<img src="http://chuangshicdn.data.mvbox.cn/album/22/06/06/22060617472620485336.gif" id="playpause"style="position:absolute;top:460px;left:830px;width:100px;height:100px;z-index: 600;filter:drop-shadow(#ff0000 0px 0 0)drop-shadow(#ff0000 0px 0 0)drop-shadow(#ff0000 0px 0 0) drop-shadow(#ff0000 0 0px0);"/></video>
</div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1388137399.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','《红窗花》'],
['8.74','词/曹军民 曲/杨曦文'],
['17.74','演唱/申祥丽'],
['24.51','小时候看到我的家'],
['28.14','窗棂棂贴着那红窗花'],
['31.97','妈妈的剪刀是一个童话'],
['35.59','剪一条鲤鱼戏莲花'],
['39.40','剪一群福娃吹唢呐'],
['43.19','剪情剪爱剪出一个兰花花'],
['46.99','剪苦剪累剪出一朵山丹丹花'],
['50.70','红窗花呀红窗花'],
['54.43','剪不出妈妈的泪花花'],
['58.25','红窗花呀红窗花'],
['61.98','剪不完儿女的心里话'],
['65.73','红窗花呀红窗花'],
['69.48','有你的地方它就是家'],
['73.30','红窗花呀红窗花'],
['77.00','有爱的家园就比天大'],
['82.00','LRC字幕制作/翁奕童苑'],
['95.77','长大后儿女要成家'],
['99.45','窗棂棂贴满那红窗花'],
['103.19','妈妈的剪刀有神奇魔法'],
['106.90','剪一对喜鹊叫喳喳'],
['110.68','剪一枝梅花春到家'],
['114.45','剪龙剪凤剪出一朵牵牛花'],
['118.13','剪福剪喜剪出一朵牡丹花'],
['121.89','红窗花呀红窗花'],
['125.78','剪不掉妈妈的白头发'],
['129.52','红窗花呀红窗花'],
['133.26','剪不断儿女的深深牵挂'],
['137.03','红窗花呀红窗花'],
['140.71','好日子剪成那一幅画'],
['144.52','红窗花呀红窗花'],
['148.23','好生活来报答咱的妈'],
['151.91','红窗花呀红窗花'],
['155.75','剪不掉妈妈的白头发'],
['159.47','红窗花呀红窗花'],
['163.20','剪不断儿女的深深牵挂'],
['166.99','红窗花呀红窗花'],
['170.79','好日子剪成那一幅画'],
['174.46','红窗花呀红窗花'],
['178.17','好生活来报答咱的妈'],
['186.17','谢谢欣赏']
];
//歌词框单击事件
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-20 08:38
歌曲比较好听。
谢谢鼓励！ 翁奕童苑 发表于 2022-6-20 08:45
谢谢鼓励！
制作一个直接发上论坛不行吗？ 看到这个音画，好像就是马黑黑的歌词同步的格式呢，这个是不需要上传的啊。
若不上传直接发代码，论坛里就能直接看到了{:4_187:} 制作很漂亮，那个视频用得也很好，很成功漂亮的制作{:4_199:} 红影 发表于 2022-6-20 09:15
制作很漂亮，那个视频用得也很好，很成功漂亮的制作
谢谢鼓励！ 红影 发表于 2022-6-20 09:11
看到这个音画，好像就是马黑黑的歌词同步的格式呢，这个是不需要上传的啊。
若不上传直接发代码，论坛里就 ...
经测试直接发代码歌词与声音失效，或许是mp3得不到支持。 红影 发表于 2022-6-20 09:11
看到这个音画，好像就是马黑黑的歌词同步的格式呢，这个是不需要上传的啊。
若不上传直接发代码，论坛里就 ...
经测试直接发代码歌词与声音失效，或许是mp3得不到支持。 做得很漂亮的 翁奕童苑 发表于 2022-6-20 09:50
经测试直接发代码歌词与声音失效，或许是mp3得不到支持。
可能吧，找个好点的地址呗，直接代码发帖就可以省得上传了呢{:4_173:} 翁奕童苑 发表于 2022-6-20 09:33
谢谢鼓励！
问好翁奕童苑，新周快乐{:4_187:}
页:
[1]