《知否知否》 歌手:胡夏/郁可唯
本帖最后由 加林森 于 2022-5-26 18:01 编辑 <br /><br /><style>#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/621f343d5baa1a80abd765e9.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 410px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px;line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#lrcDiv { position: relative; top: 420px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 2px #000; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="gcDiv">
<!-- 播放器开始 -->
<div id="paDiv">
<div id="btn-ro">·</div><!-- 播放按钮 -->
<div id="jindu"><div id="jd-go"></div></div>
</div>
<!-- 播放器结束 -->
<div id="lrcDiv">歌词同步显示</div>
</div>
</div>
<script language="javascript">
var lrcAr=[
["00:01.73","知否知否"],
["00:02.86","歌手:胡夏/郁可唯"],
["00:04.36","编曲：刘炫豆"],
["00:19.14","郁可唯："],
["00:26.31","一朝花开傍柳"],
["00:29.42","寻香误觅亭侯"],
["00:35.98","纵饮朝霞半日晖"],
["00:39.90","风雨着不透"],
["00:43.09","胡夏："],
["00:43.86","一任宫长骁瘦"],
["00:47.81","台高冰泪难流"],
["00:54.57","锦书送罢蓦回首"],
["00:58.15","无余岁可偷"],
["01:01.49","郁可唯："],
["01:03.00","昨夜雨疏风骤"],
["01:06.16","浓睡不消残酒"],
["01:08.60","试问卷帘人"],
["01:10.85","却道海棠依旧"],
["01:12.54","知否 知否"],
["01:17.49","应是绿肥红瘦"],
["01:22.18","胡夏："],
["01:22.83","昨夜雨疏风骤"],
["01:24.57","浓睡不消残酒"],
["01:26.66","合："],
["01:27.29","试问卷帘人"],
["01:28.71","却道海棠依旧"],
["01:30.95","郁可唯："],
["01:31.68","知否"],
["01:32.76","胡夏："],
["01:33.54","知否"],
["01:34.95","合："],
["01:36.20","应是绿肥红瘦"],
["01:41.96","郁可唯："],
["02:21.64","一朝花开傍柳"],
["02:24.69","寻香误觅亭侯"],
["02:27.35","纵饮朝霞半日晖"],
["02:35.34","风雨着不透"],
["02:37.71","胡夏："],
["02:39.12","一任宫长骁瘦"],
["02:43.04","台高冰泪难流"],
["02:46.81","锦书送罢蓦回首"],
["02:54.00","无余岁可偷"],
["02:56.92","郁可唯："],
["02:59.65","昨夜雨疏风骤"],
["03:01.41","浓睡不消残酒"],
["03:03.90","试问卷帘人"],
["03:06.22","却道海棠依旧"],
["03:07.80","知否 知否"],
["03:12.72","应是绿肥红瘦"],
["03:16.94","胡夏："],
["03:17.86","昨夜雨疏风骤"],
["03:19.86","浓睡不消残酒"],
["03:21.83","合："],
["03:22.63","试问卷帘人"],
["03:24.08","却道海棠依旧"],
["03:25.12","郁可唯："],
["03:27.02","知否"],
["03:27.98","胡夏："],
["03:29.37","知否"],
["03:30.35","合："],
["03:31.23","应是绿肥红瘦"],
["03:36.01","郁可唯："],
["03:36.81","昨夜雨疏风骤"],
["03:37.72","浓睡不消残酒"],
["03:40.94","试问卷帘人"],
["03:42.38","却道海棠依旧"],
["03:45.05","知否 知否"],
["03:49.73","应是绿肥红瘦"],
["03:53.47","胡夏："],
["03:54.85","昨夜雨疏风骤"],
["03:54.92","浓睡不消残酒"],
["03:59.23","合："],
["04:00.25","试问卷帘人"],
["04:01.05","却道海棠依旧"],
["04:03.05","郁可唯："],
["04:03.63","知否"],
["04:04.44","胡夏："],
["04:05.30","知否"],
["04:06.51","合："],
["04:07.62","应是绿肥红瘦"],
["04:08.80","胡夏："],
["04:15.51","知否"],
["04:17.67","郁可唯："],
["04:18.13","知否"],
["04:19.38","合："],
["04:20.23","应是绿肥红瘦"],
["04:29.79","谢谢欣赏"]
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/03/02/0f261142c44ead87b0a92404ea4082a8.mp3";
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步显示歌词
aud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
}
}
</script> 声音轻柔动听。人也漂亮。队长会选人选择歌。{:4_190:} 樵歌 发表于 2022-3-2 19:37
声音轻柔动听。人也漂亮。队长会选人选择歌。
谢谢樵歌支持！{:4_176:} 制作真漂亮，非常好听的歌，经典 队长好分享，真棒！
{:4_204:}{:4_190:} 这个做得漂亮，队长真棒{:4_187:} 大猫咪 发表于 2022-3-2 19:41
制作真漂亮，非常好听的歌，经典 队长好分享，真棒！
谢谢猫猫支持。{:4_204:}{:4_190:} 红影 发表于 2022-3-2 20:32
这个做得漂亮，队长真棒
红影晚上好，谢谢支持！{:4_187:} 加林森 发表于 2022-3-2 20:50
谢谢猫猫支持。
队长真棒，经典多多，制作漂亮 {:4_179:}{:4_187:} 真漂亮~~~~歌美~~~~{:5_116:} 大猫咪 发表于 2022-3-2 20:51
队长真棒，经典多多，制作漂亮
今天听歌，感觉很好听就制作了一个出来。 杨柳青 发表于 2022-3-2 20:54
真漂亮~~~~歌美~~~~
嗯嗯，都美吧。{:4_189:} 加林森 发表于 2022-3-2 20:59
今天听歌，感觉很好听就制作了一个出来。
嗯非常喜欢的歌，越听越好听！
{:4_204:} 大猫咪 发表于 2022-3-2 21:00
嗯非常喜欢的歌，越听越好听！
猫猫与我一样，都喜欢好听的歌曲。{:4_179:} 加林森 发表于 2022-3-2 21:02
猫猫与我一样，都喜欢好听的歌曲。
嗯嗯 必须滴{:4_179:} 大猫咪 发表于 2022-3-2 21:08
嗯嗯 必须滴
就是就是，必须的。{:4_179:} 加林森 发表于 2022-3-2 20:51
红影晚上好，谢谢支持！
歌曲也好听{:4_187:} 加林森 发表于 2022-3-2 19:41
谢谢樵歌支持！
俺享受你辛苦。早上好！{:4_190:} 樵歌 发表于 2022-3-3 07:30
俺享受你辛苦。早上好！
樵歌早晨好！{:4_190:} 加林森 发表于 2022-3-3 10:12
樵歌早晨好！
喜欢就好 加林森 发表于 2022-3-2 20:59
嗯嗯，都美吧。
真美~~送一个过来~~{:4_173:}
页:
[1]
2