|
|

楼主 |
发表于 2022-6-16 21:34
|
显示全部楼层
<style>
/* 帖子外层 */
.outer {
left: -14px; /* 水平定位*/
width: 720px; /* 帖子宽度 */
height: 450px; /* 帖子高度 */
background: #ccc url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F260bceca4edf555847cbb7c38fb2e2a3c321ba16.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657977142&t=2cad1aeef2a90240a3101e33a4b5ffdc') 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=36492860.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 = [
['00:01.77','范晓萱 - 同步(陪安东尼度过漫长岁月电影主题曲)'],
['00:10.00','歌词搜索'],
['00:20.21','相隔两地的时空'],
['00:24.27','默契对话没有距离'],
['00:28.19','冰冷的萤幕'],
['00:31.19','因为我们双手产生热度'],
['00:36.67','努力各自的生活'],
['00:40.18','追求不放弃的梦'],
['00:43.42','冬与夏的反差'],
['00:47.64','成了最可爱的交集'],
['00:52.17','我们的爱是否同步'],
['00:56.13','我投给你却投给了他'],
['01:00.80','真希望像棒球最后'],
['01:04.61','会回到我这儿啊'],
['01:08.69','我们的爱没有同步'],
['01:12.13','你给的暗号已告诉我'],
['01:17.56','这个手势代表了'],
['01:21.93','一辈子的朋友'],
['01:30.81','歌词编辑:费总QQ1421210858'],
['01:56.41','你爱声音的故事'],
['02:00.21','我爱味道的热情'],
['02:04.18','Alice发出了'],
['02:07.63','我们共同孤独的频率'],
['02:12.25','总是掉进回忆'],
['02:16.21','想象中总是有你'],
['02:19.82','思念时什么事我都无能为力'],
['02:28.30','我们的爱是否同步'],
['02:32.21','就像你爱吃的栗子'],
['02:36.98','剥开的时候就是心碎的声音'],
['02:44.49','我们的爱不会同步'],
['02:48.56','送给你最后的礼物'],
['02:53.79','那是樱花掉落的声音'],
['03:04.20','美丽却无声无息']
];
//歌词框单击事件
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[j][0]){
geci.innerHTML = lrcAr[j][1];
}
}
})
</script>
|
|