We Are The World (Demo) - Michael Jackson
本帖最后由 绿叶清舟 于 2022-6-20 10:10 编辑 <br /><br /><style>/* 帖子外层 */
.outer {
left: -200px; /* 水平定位*/
TOP: 80px;
width: 1000px; /* 帖子宽度 */
height: 700px; /* 帖子高度 */
background: #ccc url('https://pic.imgdb.cn/item/62aede5f09475431295c853c.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=1697590.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 = [
['5.47','We Are The World'],
['8.01','Michael Jackson'],
['14.06','There is a time when we should heed a certain call'],
['20.43','Cause the world it seems it s right in this line'],
['27.14','Cause there s a chance for taking in needing our own lives'],
['34.38','It seems we need nothing at all'],
['41.46','I used to feel that I should give away my heart'],
['48.12','And it shows that fear of needing them'],
['54.76','Then I read the headlines and it said they re dying there'],
['61.92','And it shows that we must heed instead'],
['68.25','We are the world'],
['71.68','We are the children'],
['75.12','We are the ones who make a brighter day'],
['78.40','So let s start giving'],
['82.58','But there s a chance we re taking'],
['86.10','We re taking our own lives'],
['89.55','It s true we ll make a brighter day just you and me'],
['100.46','Give in your heart and you will see that someone cares'],
['106.81','Cause you know that they can feed them all'],
['113.83','Than I read the paper and it said that you ve been denied'],
['120.76','And it shows the second we will call'],
['127.03','We are the world'],
['130.37','We are the children'],
['133.83','We are the ones who make a brighter day'],
['136.95','So let s start giving'],
['141.02','But there s a chance we re taking'],
['144.86','We re taking our own lives'],
['148.30','It s true we ll make a brighter day just you and me'],
['155.42','No there s a time when we must love them all'],
['162.26','And it seems that life, it don t make love at all'],
['168.67','But if you d be there, and I ll love you more and more'],
['175.97','It seems in life, i didn t do that'],
['182.29','We are the world'],
['185.64','We are the children'],
['189.09','We are the ones who make a brighter day'],
['192.19','So let s start giving'],
['196.27','But there s a chance we re taking'],
['200.17','We re taking our own lives'],
['203.61','It s true we ll make a brighter day just you and me'],
['209.83','We are the world'],
['213.31','We are the children'],
['216.75','We are the ones who make a brighter day'],
['220.19','So let s start giving'],
['224.05','But there s a chance we re taking'],
['227.76','We re taking our own lives'],
['231.19','It s true we ll make a brighter day just you and me'],
['237.56','We are the world'],
['240.93','We are the children'],
['244.37','We are the ones who make a brighter day'],
['247.52','So let s start giving'],
['251.80','But there s a chance we re taking'],
['255.40','We re taking our own lives'],
['258.85','It s true we ll make a brighter day just you and me'],
['265.25','We are the world'],
['268.61','We are the children'],
['272.06','We are the ones who make a brighter day'],
['275.29','So let s start giving'],
['279.36','But there s a chance we re taking'],
['283.13','We re taking our own lives'],
['286.50','It s true we ll make a brighter day just you and me'],
['292.02','We are the world'],
['296.20','We are the children'],
['299.69','We are the ones who make a brighter day'],
['302.79','So let s start giving'],
['306.98','But there s a chance we re taking'],
['310.80','We re taking our own lives']
];
//歌词框单击事件
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>
<BR><BR><BR>
清舟，提一提，无法评分了。 杰克逊的我很喜欢！{:4_178:} 这个歌词，好像不对？ 要么我喝多了？今天真的喝酒了{:4_189:} 红影 发表于 2022-6-19 19:34
这个歌词，好像不对？
确实不对 红影 发表于 2022-6-19 19:34
这个歌词，好像不对？
好像与点没有同步，反正外语 清舟这个迈克逊我也是喜欢的{:4_178:} 没听懂就对了{:4_189:} 加林森 发表于 2022-6-19 17:07
清舟，提一提，无法评分了。
队长好，手机上的明天电脑来改了 红影 发表于 2022-6-19 19:34
这个歌词，好像不对？
下午找到歌词的没有地址，换了几个最后可能贴错了，发完都没去看了 绿叶清舟 发表于 2022-6-19 22:41
队长好，手机上的明天电脑来改了
好的。不急的。 醉美水芙蓉 发表于 2022-6-19 18:09
欣赏清舟美女佳作！
谢谢芙蓉支持 加林森 发表于 2022-6-19 22:46
好的。不急的。
改好了 樵歌 发表于 2022-6-19 21:41
没听懂就对了
俺也没懂{:4_189:} 小辣椒 发表于 2022-6-19 20:30
好像与点没有同步，反正外语
音乐版本搞错 了{:4_189:} 马黑黑 发表于 2022-6-19 20:28
确实不对
想把音乐拉右下角的，用了负数出格了，应该把数字加大的吧 红影 发表于 2022-6-19 19:35
要么我喝多了？今天真的喝酒了
我也假装喝多了{:4_189:} 绿叶清舟 发表于 2022-6-19 22:41
队长好，手机上的明天电脑来改了
现在就挺好的了。播放器再调整进来就更加完美了。
页:
[1]
2