这幅音画动感特别强~~{:5_116:}
杨柳青 发表于 2022-2-10 22:37
小辣椒不在队长确实很辛苦哈~~队长收礼开心~~
谢谢小青青。{:4_190:}
杨柳青 发表于 2022-2-10 22:39
这幅音画动感特别强~~
就是就是。
杨柳青 发表于 2022-2-10 22:39
这幅音画动感特别强~~
小杨柳晚上好{:4_187:}
<style type="text/css">
.mnBox {
position: relative;
margin: 0 auto;
padding: 35px;
width: 660px;
border: none;
border-top: 6px solid #000;/* 顶部边框样式*/
border-radius: 10px;
background: #b3c3c3;
}
.ctBox {
margin: 0;
padding: 30px;
background: #fff;
min-height: 300px;
border-radius: 10px;
}
.ctBox p,img, h2,button { text-align:center; }
</style>
<div class="mnBox">
<div class="ctBox">
<p><img alt="550 height="362"="" src="https://pic.imgdb.cn/item/6216210d2ab3f51d91f0f16b.jpg" /><br></p>
<h2 style="padding-bottom: 10px;">痛彻心扉</h2>
<h2 style="text-align:center;">歌手--小希 (馨予）</h2>
<pre>
看见黑黑今天分享的
歌词同步高亮制作
在这个css边框中测试一下
感觉这个歌词同步高亮效果
加上这个边框特别漂亮
这样分享音乐也是不错
感谢黑黑又一个精彩分享
黑黑你太厉害了 精彩不断！
还有一个问题问黑黑老师
这个播放器是手动播放
我改了自动播放代码 播放器看不见了
</pre>
<div style="position:absolute; width:120px; left:300px; top: 900px; text-align:center;">
<p ><font color="#000000" size="2" >
<marqueescrollamount="2" direction="left" >学习黑黑歌词同步高亮制作</marquee>
<div style="position:absolute; width:150px; left:-100px; top: 100px; text-align:center;">
<style type="text/css">
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; left:10px;top: 0; }
#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<audio id="myplayer" src="https://oss.shandianpan.com/deba64b09196f48dcde864caf63ceee9.mp3" controls="controls"></audio>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<script language="javascript">
var lrcAr=[
["00:00.11"," 手动播放"],
["00:03.11"," 痛彻心扉"],
["00:10.48"," 歌手：小希 (馨予)"],
["00:16.76"," LRC编辑：小辣椒"],
["00:21.64"," 怎么能够让我不再想你"],
["00:27.07"," 也许爱你爱到最后只能伤心"],
["00:33.60"," 已经有了离开你的勇气"],
["00:39.83"," 在我的梦里你不是唯一"],
["00:46.26"," 我想要再回到你温暖的怀里"],
["00:53.24"," 感觉你的心跳你的呼吸"],
["00:59.68"," 想到天长地久对于我们"],
["01:04.36"," 渴望而不可及"],
["01:06.75"," 难道命运注定就此分离"],
["01:13.83"," 啊。。。"],
["01:16.91"," 爱你痛彻我心扉"],
["01:22.56"," 给了你仅有的一片天"],
["01:29.03"," 回忆的碎片撞翻我心中思念的火蕊"],
["01:35.95"," 燃烧我整座的堡垒"],
["01:42.15"," 啊。。。"],
["01:44.73"," 爱你痛彻我心扉"],
["01:49.31"," 少了你还残留一片天"],
["01:55.45"," 我想我只会紧握住手中凋零的玫瑰"],
["02:02.83"," 品尝你赐给的泪水"],
["02:08.91"," 或许你曾为我流泪"],
["02:15.44"," 如今你让我痛彻心扉"],
["02:24.03"," LRC编辑：小辣椒"],
["02:48.19"," 我想要再回到你温暖的怀里"],
["02:55.01"," 感觉你的心跳你的呼吸"],
["03:01.24"," 想到天长地久对于我们"],
["03:05.87"," 渴望而不可及"],
["03:08.22"," 难道命运注定就此分离"],
["03:15.46"," 啊。。。"],
["03:18.50"," 爱你痛彻我心扉"],
["03:24.18"," 给了你仅有的一片天"],
["03:30.36"," 回忆的碎片撞翻我心中思念的火蕊"],
["03:37.54"," 燃烧我整座的堡垒"],
["03:43.55"," 啊。。。"],
["03:46.38"," 爱你痛彻我心扉"],
["03:51.02"," 少了你还残留一片天"],
["03:57.20"," 我想我只会紧握住手中凋零的玫瑰"],
["04:04.53"," 品尝你赐给的泪水"],
["04:10.56"," 或许你曾为我流泪"],
["04:17.09"," 如今你让我痛彻心扉"],
["04:27.51"," 谢谢欣赏"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "black";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "red";
}
}
}
// 播放结束重置歌词样式
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "black";
lrcUl.style.top = 0;
this.play();
}
</script>
<div style="position:absolute; width:150px; left:65px; top: 180px; text-align:center;">
<p>小辣椒2022 02 23</p>
</div>
</div>
</div>
</div>
</script>
樵歌 发表于 2022-2-10 08:46
小辣椒这个播放器做得真棒，时而美女不停转攸，又大，看得真真的。队长一定喜欢。
樵哥哥，现在也是会说笑话了{:4_189:}
马黑黑 发表于 2022-2-10 09:37
小辣椒的作品跟人一样越来越美了，好棒！队长收礼开森！
谢谢黑黑的，现在都是玩你的css按钮的，这样玩简单多了
红影 发表于 2022-2-10 10:23
漂亮的动态大图，还有转动的唱片和歌词同步。这个帖子太棒了。队长收礼开心
亲爱的，你也是可以做一次，非常简单的，你可以套用这个代码
加林森 发表于 2022-2-10 10:40
谢谢小辣椒。你好好把身体养好了就是对我们大家的最大的支持，好好保重。
你这个帖是用fws制作 ...
队长客气了，谢谢队长的关心{:4_187:}
一窗清寒 发表于 2022-2-10 15:56
曲子很好听，辣椒制作很精妙。借你的美贴一起问声——队长好
寒寒好，看见你好开心{:4_179:}
加林森 发表于 2022-2-10 10:40
谢谢小辣椒。你好好把身体养好了就是对我们大家的最大的支持，好好保重。
你这个帖是用fws制作 ...
队长这个不是swf的，就一个动图外加代码编辑，我这个上传是因为我做的尺寸太大，定位弄不好就上传了一下，你做小一点的1024X600，不用上传直接套用代码制作，我用了黑黑的css按钮
加林森 发表于 2022-2-10 20:31
改天我也学到制作一个出来，想看看自己制作出来的效果是什么样的。
这个可能编辑歌词同步你还得学习一下
小辣椒 发表于 2022-2-11 21:09
这个可能编辑歌词同步你还得学习一下
就是就是，这个必须要学习的。
杨柳青 发表于 2022-2-10 22:39
这幅音画动感特别强~~
小杨柳怎么我上来你下了{:4_175:}
小辣椒 发表于 2022-2-11 21:08
队长这个不是swf的，就一个动图外加代码编辑，我这个上传是因为我做的尺寸太大，定位弄不好就上传了一下 ...
哦，这样的啊。明白了。谢谢！
小辣椒 发表于 2022-2-11 21:04
队长客气了，谢谢队长的关心
不客气的。{:4_204:}
小辣椒 发表于 2022-2-11 21:02
樵哥哥，现在也是会说笑话了
樵哥哥有时说后恐怕冷笑话的。{:4_173:}
樵歌 发表于 2022-2-11 21:21
樵哥哥有时说后恐怕冷笑话的。
感觉现在的樵哥哥放开了许多{:4_172:}
小辣椒 发表于 2022-2-11 21:04
亲爱的，你也是可以做一次，非常简单的，你可以套用这个代码
嗯嗯，空了我也试试{:4_173:}
红影 发表于 2022-2-11 21:38
嗯嗯，空了我也试试
这个很简单，只是歌词同步的添加要加几个符号
加林森 发表于 2022-2-11 19:57
谢谢小青青。
{:4_204:}