先来试个

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

本帖最后由绿叶清舟于 2022-6-19 15:10 编辑 <br /><br /><style>
/* 帖子外层 */
.outer {
   left: -14px; /* 水平定位*/
   TOP: 0px;
   width: 700px; /* 帖子宽度 */
   height: 1300px; /* 帖子高度 */
   background: #ccc url('https://pic.imgdb.cn/item/629c9c5b09475431290365fa.jpg') no-repeat; /* 帖子背景 */
   box-shadow: 0 4px 18px #000; /* 盒子阴影*/
   position: relative; /* 重要帖子定位依赖 */
}

/* 歌词同步显示框 */
.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">
   <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=1951702375.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 = [
['2.49','词 Lyricist：甘世佳/福笑/胡孝楠'],
['2.90','曲 Composer：Edouard Brenneisen/John Nathaniel/于飞/Hollywood Scoring'],
['3.19','编曲 Arrangement：Edouard Brenneisen/John Nathaniel/Zj-alvSoN'],
['3.40','制作人 Producer：于飞'],
['3.58','混音 Mixing Engineer：John Nathaniel'],
['3.79','母带 Mastering Engineer：Marc Theriault @ Le Lab Mastering, Montreal'],
['4.16','人声录音 Vocal recorded by：舟舟/詹凌杰'],
['4.58','音频编辑 Audio Editor：陈冠男'],
['4.88','和声 Background Vocal：GAI周延/谭维维/王筱海/杨画画刘姝阳/袁和德/于飞'],
['5.84','打击乐 Percussion：刘恒@小黑mk'],
['6.17','二胡 Erhu：金玥'],
['6.32','笛子/箫 Flute and Xiao：丁晓逵'],
['6.66','古筝 GuZheng：丁雪儿'],
['6.85','中国乐器录音 Chinese Instruments recorded by：张步若'],
['7.30','小提琴 Violin：Eric Speed'],
['7.49','杜比全景声混音 Dolby Atmos mixed by：Francois Lalonde'],
['7.91','杜比全景声母带 Dolby Atmos Master Tape：Marc Theriault @ Lelab Mastering, Montreal'],
['8.47','音乐监制 Music Supervised by：24工作室 24 Entertainment'],
['8.91','传说藏在我身外的那个我'],
['12.26','划过几万年不熄灭的烽火'],
['15.63','看破这条路我有我的执着'],
['18.77','浮生尽作一瞥出招证明我存在过'],
['22.13','我是永劫中行者'],
['23.71','万物我皆可赢得'],
['25.33','我的战歌不拘平仄'],
['26.96','并不需要谁的认可'],
['28.73','浮生尽作一瞥出招证明我存在过'],
['32.15','出招让你徒呼奈何'],
['35.63','辟易千军冲破万劫无明无间'],
['42.12','辟易千军冲破万劫无问无间'],
['51.99','No hesitation'],
['53.42','No hesitation'],
['55.91','天地一振看我剑气入魂'],
['58.50','No hesitation'],
['59.98','No hesitation'],
['62.45','用战斗去证明谁才是神'],
['65.65','Ready for miracle miracle miracle'],
['68.78','Ready for miracle miracle miracle'],
['71.69','万事皆由我'],
['80.05','我决心不易'],
['83.84','我灵魂无惧'],
['87.17','我生命不息'],
['90.43','我身本无拘'],
['92.22','生命的因果'],
['93.64','束缚我的枷锁'],
['95.35','无法困住我'],
['96.91','点烛龙踏云朵'],
['98.63','不做这来世的佛陀'],
['100.36','斩尽这现世的疯魔'],
['101.96','读不透这一份执着'],
['103.61','扰乱这人间的烟火'],
['105.43','莫问归期不要再问我要去往何处'],
['108.66','行者的声音我们本性迎合不了无数'],
['111.68','浮生尽作一瞥出招证明我存在过'],
['114.98','出招让你徒呼奈何'],
['123.66','让你徒呼奈何'],
['132.03','辟易千军冲破万劫无明无间'],
['138.28','辟易千军冲破万劫无问无间'],
['148.31','No hesitation'],
['149.63','No hesitation'],
['152.13','天地一振看我剑气入魂'],
['154.76','No hesitation'],
['156.23','No hesitation'],
['158.76','用战斗去证明谁才是神'],
['161.83','Ready for miracle miracle miracle'],
['164.99','Ready for miracle miracle miracle'],
['168.16','万事皆由我'],
['174.64','No hesitation'],
['176.22','No hesitation'],
['178.78','天地一振看我剑气入魂'],
['181.43','No hesitation'],
['182.92','No hesitation'],
['185.40','用战斗去证明谁才是神'],
['188.37','Ready for miracle miracle miracle'],
['191.62','Ready for miracle miracle miracle'],
['194.63','万事皆由我']
];
//歌词框单击事件
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-19 15:39

梦油发表于 2022-6-19 17:01

实验成功

加林森 发表于 2022-6-19 17:06

快报110，要杀人拉。。。。。{:4_170:}

红影发表于 2022-6-19 17:48

开始有几句歌词好长，倒也不错，拉得那绿叶也变长，真的如出鞘的宝剑呢{:4_173:}

红影发表于 2022-6-19 17:49

这首歌曲和图片都很霸气，清华好棒{:4_187:}

马黑黑 发表于 2022-6-19 19:16

这是要投入战斗的样纸{:4_170:}

小辣椒 发表于 2022-6-19 20:38

清舟这个厉害，快歌的，我就感觉不熟息的歌要听几遍的，慢歌不用听就直接做出来的

马黑黑 发表于 2022-6-19 21:32

红影发表于 2022-6-19 17:48
开始有几句歌词好长，倒也不错，拉得那绿叶也变长，真的如出鞘的宝剑呢

这也能感悟得到{:5_106:}

马黑黑 发表于 2022-6-19 21:32

小辣椒发表于 2022-6-19 20:38
清舟这个厉害，快歌的，我就感觉不熟息的歌要听几遍的，慢歌不用听就直接做出来的

这个事转换的

小辣椒 发表于 2022-6-19 21:39

马黑黑发表于 2022-6-19 21:32
这个事转换的

哦，就刚才看见那个啊？

樵歌发表于 2022-6-19 21:39

剑在手，舍我其谁，好霸气！

马黑黑 发表于 2022-6-19 21:45

小辣椒发表于 2022-6-19 21:39
哦，就刚才看见那个啊？

是的

红影发表于 2022-6-20 13:19

马黑黑发表于 2022-6-19 21:32
这也能感悟得到

黑黑留在歌词下的这个绿叶发觉真的挺好看的呢{:4_187:}

马黑黑 发表于 2022-6-20 13:20

红影发表于 2022-6-20 13:19
黑黑留在歌词下的这个绿叶发觉真的挺好看的呢

用得好是可以一看的

红影发表于 2022-6-20 14:27

马黑黑发表于 2022-6-20 13:20
用得好是可以一看的

应该还可以做出很多形状的吧{:4_173:}

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

醉美水芙蓉发表于 2022-6-19 15:39
欣赏清舟美女佳作！很成功喔！

谢谢芙蓉支持

绿叶清舟 发表于 2022-6-20 17:18

小辣椒发表于 2022-6-19 20:38
清舟这个厉害，快歌的，我就感觉不熟息的歌要听几遍的，慢歌不用听就直接做出来的

直接找来转换的了

绿叶清舟 发表于 2022-6-20 18:36

梦油发表于 2022-6-19 17:01
实验成功

谢谢梦油

绿叶清舟 发表于 2022-6-20 18:36

加林森发表于 2022-6-19 17:06
快报110，要杀人拉。。。。。

110来了没有啊{:4_189:}

页: [1] 2 3

花潮论坛's Archiver

先来试个