|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- <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; top: 0; }
- #lrcUl li { height: 20px; font-size:14px; line-height:20px; color: black; list-style-type: none; }
- #myplayer { outline: none; list-style-type: none; }
- </style>
- <audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2021/12/27/db5031ddc52e16860f4aeb70b530099b.mp3" controls="controls"></audio>
- <div id="lrcDiv"><ul id="lrcUl"></ul></div>
- <script language="javascript">
- var lrcAr=[
- ["00:00.000"," 作词 : 叶世荣"],
- ["00:01.000"," 作曲 : 黄家驹"],
- ["00:27.600","从来不知想拥有多少的理想"],
- ["00:33.599","还离不开种种困忧"],
- ["00:40.599","勉强去掩饰失意的感觉"],
- ["00:46.599","再次听到昨日的冷嘲"],
- ["00:52.599","徘徊於街中恐怕只得孤独"],
- ["00:58.599","寻回思忆中的碎片"],
- ["01:05.600","变作了一堆草芥风中散"],
- ["01:11.600","与你奏过午夜的怨曲"],
- ["01:16.600","总有挫折打碎我的心"],
- ["01:19.600","紧抱过去抑压了的手"],
- ["01:23.600","我与你也彼此一起艰苦过"],
- ["01:28.600","写上每句冰冷冷的诗"],
- ["01:31.600","不会放弃高唱这首歌"],
- ["01:36.600","我与你也彼此真的相识过"],
- ["01:55.600","从回忆中找不到天真的笑声"],
- ["02:01.600","曾留不低心中斗争"],
- ["02:08.600","每次去担当失意的主角"],
- ["02:14.600","冷笑变作故事的作者"],
- ["02:19.600","总有挫折打碎我的心"],
- ["02:22.600","紧抱过去抑压了的手"],
- ["02:27.600","我与你也彼此一起艰苦过"],
- ["02:32.600","写上每句冰冷冷的诗"],
- ["02:35.600","不会放弃高唱这首歌"],
- ["02:39.600","我与你也彼此真的相识过"],
- ["03:11.600","啊......啊......障碍能撕破"],
- ["03:22.600","总有挫折打碎我的心"],
- ["03:25.600","紧抱过去抑压了的手"],
- ["03:30.600","我与你也彼此一起艰苦过"],
- ["03:35.600","写上每句冰冷冷的诗"],
- ["03:38.600","不会放弃高唱这首歌"],
- ["03:42.600","我与你也彼此真的相识过"],
- ["03:47.600","总有挫折打碎我的心"],
- ["03:51.600","紧抱过去抑压了的手"],
- ["03:55.600","我与你也彼此一起艰苦过"],
- ["04:00.600","写上每句冰冷冷的诗"],
- ["04:03.600","不会放弃高唱这首歌"],
- ["04:07.600","我与你也彼此真的相识过"],
- ["04:12.600","总有挫折打碎我的心"],
- ["04:16.600","紧抱过去抑压了的手"],
- ["04:20.600","我与你也彼此一起艰苦过"],
- ["04:25.600","——永远的Beyond"]
- ];
- var myaud = document.getElementById('myplayer'); //播放器标识
- var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
- //处理lrc歌词数组:时间转换成秒、歌词放入li标签
- for(j=0; j<lrcAr.length; j++){
- lrcAr[j][0] = toSec(lrcAr[j][0]);
- lrcUl.innerHTML += "<li id='li" + lrcAr[j][0] + "'>" + lrcAr[j][1] + "</li>";
- }
- //lrc时间信息转为秒
- function toSec(lrcTime) {
- let tmpAr = lrcTime.split(':');
- lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
- return lrcTime;
- }
- //同步高亮、翻滚歌词
- myaud.ontimeupdate = function() {
- let tt = this.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt > lrcAr[j][0]){
- if(j > 0){
- let idxLast = lrcAr[j-1][0];
- document.getElementById("li" + idxLast).style.color = "black";
- lrcUl.style.top ="-" + (j * 20 - 20) + "px";
- }
- let idx = lrcAr[j][0];
- document.getElementById("li" + idx).style.color = "red";
- }
- }
- }
- // 播放结束重置歌词样式
- myaud.onended = function() {
- document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = "black";
- lrcUl.style.top = 0;
- this.play();
- }
- </script>
复制代码
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|