论坛 › 欢乐水吧 › 《想你想到草绿了》 乌兰托娅

加林森 发表于 2022-2-18 21:00

《想你想到草绿了》 乌兰托娅

本帖最后由 加林森 于 2022-2-28 18:09 编辑 <br /><br /><style>
#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/620f683d2ab3f51d91e3ce2b.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 10px; 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: 20px; 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.12","乌兰托娅 - 想你想到草绿了"],
["00:33.99","蓝天上飘着的白云随风流浪"],
["00:46.29","草原上奔驰的马儿想远方"],
["00:58.61","我心上的人儿呀还记得我吗"],
["01:10.82","长调哼你在那夕阳下你可听到"],
["01:23.22","想一想到那草绿了我的心也都醉了"],
["01:35.50","想一想到那云开了你快快归来吧"],
["01:47.46","那所有的该得忧伤被春天溶化了"],
["01:59.72","我要在你的怀里找到天堂"],
["02:37.12","我心上的人儿呀还记得我吗"],
["02:49.34","长调哼你在那夕阳下你可听到"],
["03:01.67","想一想到那草绿了我的心也都醉了"],
["03:13.9","想一想到那云开了你快快归来吧"],
["03:25.94","那所有的该得忧伤被春天溶化了"],
["03:38.28","我要在你的怀里找到天堂"]
];

var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "https://www.joy127.com/url/88037.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>

红影 发表于 2022-2-18 21:04

队长又做成一个，很赞{:4_187:}

红影 发表于 2022-2-18 21:04

好听，乌兰图雅的歌儿大都很好听。

加林森 发表于 2022-2-18 21:12

红影 发表于 2022-2-18 21:04
队长又做成一个，很赞

谢谢红影！{:4_187:}{:4_190:}

加林森 发表于 2022-2-18 21:14

红影 发表于 2022-2-18 21:04
好听，乌兰图雅的歌儿大都很好听。

就是啊，我喜欢民族歌曲。

小辣椒 发表于 2022-2-18 21:14

队长速度的，又一个{:4_199:}

加林森 发表于 2022-2-18 21:24

小辣椒 发表于 2022-2-18 21:14
队长速度的，又一个

谢谢小辣椒！{:4_204:}

樵歌 发表于 2022-2-18 21:24

做得漂亮，歌声动听！{:4_190:}

樵歌 发表于 2022-2-18 21:25

能不能那歌词随声音一起走，如OK歌一样？

加林森 发表于 2022-2-18 21:26

樵歌 发表于 2022-2-18 21:24
做得漂亮，歌声动听！

谢谢樵歌支持！{:4_190:}

加林森 发表于 2022-2-18 21:27

樵歌 发表于 2022-2-18 21:25
能不能那歌词随声音一起走，如OK歌一样？

应该可以的。你想唱歌了吗？

红影 发表于 2022-2-18 21:30

加林森 发表于 2022-2-18 21:14
就是啊，我喜欢民族歌曲。

她嗓音好，唱得也好听。

加林森 发表于 2022-2-18 22:02

红影 发表于 2022-2-18 21:30
她嗓音好，唱得也好听。

是的啊，挺美的。

红影 发表于 2022-2-18 22:13

加林森 发表于 2022-2-18 22:02
是的啊，挺美的。

喜欢她歌曲的人不少的。

加林森 发表于 2022-2-18 22:17

红影 发表于 2022-2-18 22:13
喜欢她歌曲的人不少的。

是的，我特别喜欢的。

大猫咪 发表于 2022-2-19 11:29

独特的声线。央视青歌赛一路走来,2010年一曲《套马杆》红遍大江南北,草原情歌皇后。

{:4_204:}{:4_190:}

樵歌 发表于 2022-2-19 13:43

加林森 发表于 2022-2-18 21:26
谢谢樵歌支持！

是得谢谢你带来的高档分享。你爱的就是我爱的。{:4_173:}

樵歌 发表于 2022-2-19 13:44

加林森 发表于 2022-2-18 21:27
应该可以的。你想唱歌了吗？

可以哼哼。{:4_189:}

加林森 发表于 2022-2-19 17:18

樵歌 发表于 2022-2-19 13:44
可以哼哼。

那就很好的嘛。

加林森 发表于 2022-2-19 17:19

樵歌 发表于 2022-2-19 13:43
是得谢谢你带来的高档分享。你爱的就是我爱的。

哈哈哈哈，是不是啊。

查看完整版本: 《想你想到草绿了》 乌兰托娅