Html完成歌曲歌詞同步
發(fā)表時(shí)間：2023-09-11 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章主要介紹了關(guān)于Html實(shí)現(xiàn)歌曲歌詞同步，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8&q...
這篇文章主要介紹了關(guān)于Html實(shí)現(xiàn)歌曲歌詞同步，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歌詞同步</title>
<style>
body {
background:url("Img/起風(fēng)了.jpg") center no-repeat ;
background-size:60% 100%;
}
* {
margin:0 auto;
padding:0;
}
.play {
color: #01e5ff;
font-size: 24px;
}
.overPlay {
font-size: inherit;
color: #fff;
}
#p_lrc {
position: absolute;
padding-top: 0px;
left: 28%;
top: 300px;
width:50%;
transition: top .5s;
margin: 0 auto;
}
.p_DisLrc {
overflow: hidden;
color:#b1abab;
width: 70%;
height: 600px;
position: relative;
margin: 0 auto;
}
#audio {
width: 100%;
}
.p_audio {
width: 50%;
margin: 0 auto;
}
.p_but {
position: absolute;
font-size: 26px;
font-weight: 900;
top: 40%;
right: 0%;
}
.p_but p {
cursor: pointer;
}
</style>
<link href="CSS/iconfont.css" rel="stylesheet" />
</head>
<body>
<p id="p_1" style="display: none;">
</p>
<!-- 歌詞顯示界面 -->
<p class="p_DisLrc">
<p id="p_lrc">
<p id="lrc_row1"></p>
</p>
<!-- 用于調(diào)整歌詞位置 -->
<p class="p_but">
<p onmousedown="time = setInterval(btn_down,0)" onmouseup="clearInterval
(time)"><i class="iconfont icon-top"></i></p>
<p onmousedown="time = setInterval(btn_top,0)" onmouseup="clearInterval
(time)"><i class="iconfont icon-down"></i></p>
</p>
</p>
<!-- 播放器控件 -->
<p class="p_audio">
<audio id="audio" controls="controls" autoplay="autoplay">
<source src="audio/起風(fēng)了.mp3" type="audio/mpeg">
</audio>
</p>
<script src="JavaScript/jquery-3.3.1.js"></script>
<script>
var audio = document.getElementById("audio");
var play = $("#lrc_row1");
//將歌詞添加到p中
$(document).ready(function () {
//加載歌詞
$('#p_1').load("LRC/qifengle.lrc");
//獲取所有歌詞
setTimeout(function () {
var lrcArr = $("#p_1").text().split('\n');
for (var i = 4; i < lrcArr.length; i++) {
var p = document.createElement("p");
//空白歌詞不進(jìn)行加載
if (lrcArr[i].substring(10) != "") {
p.innerText = lrcArr[i].substring(10);
$("#p_lrc").append(p);
}
}
}, 200)
})
function lrcDisplay() {
//獲取播放進(jìn)度(轉(zhuǎn)換的格式為: 00:00)
var minute = parseInt(audio.currentTime / 60);//分鐘
minute = minute == 0 ? "00" : (minute + "").length < 2 ? "0" + minute : minute;
//獲取秒數(shù)
var second = (parseInt(audio.currentTime)) % 60;
second = second == 0 ? "00" : (second + "").length < 2 ? "0" + second : second;
//正則表達(dá)匹配歌詞
var regex = new RegExp('\\[' + (minute + ":" + second) + '.+\\].+\n');
var text = regex.exec($("#p_1").text());
if (text != null) {
var str1 = new String($(play).next().text());
var str2 = new String(text[0].substring(10));
if (str1.trim() == str2.trim()) {
//歌詞顏色變色
$(play).attr("class", "overPlay");
play = $(play).next();
$(play).attr("class", "play");
//歌詞滾動(dòng)(自動(dòng))
var top = parseInt($("#p_lrc").css("top"));
$("#p_lrc").css("top", -1 * ((-1 * top) + 22) + "px");
}
}
}
setInterval(lrcDisplay, 500);
//歌詞滾動(dòng)(手動(dòng))
var time = null;
function btn_top() {
var top = parseInt($("#p_lrc").css("top"));
$("#p_lrc").css("top", -1 * ((-1 * top) + 100) + "px");
}
function btn_down() {
var top = parseInt($("#p_lrc").css("top"));
if (top <= 0)
$("#p_lrc").css("top", -1 * ((-1 * top) - 100) + "px");
}
//調(diào)整歌詞位置的函數(shù)
function btn_top() {
var top = parseInt($("#p_lrc").css("top"));
$("#p_lrc").css("top", -1 * ((-1 * top) + 30) + "px");
}
/*
1.歌詞文件不能是默認(rèn)編碼(記事本文件和lrc文件默認(rèn)為ANSI編碼) 只需要改為 UTF-8或
者GB2312,否則亂碼
2.歌曲因?yàn)闆](méi)有算毫秒差距,可能出現(xiàn)細(xì)微誤差
3.因?yàn)榫W(wǎng)頁(yè)同源策略的原因,外部直接打開html文件只能用firefox訪問(wèn),
不能進(jìn)行跨域訪問(wèn),如果不使用文件讀取可以在任意地方打開.
4.因?yàn)閍jax識(shí)別原因,會(huì)把空格當(dāng)做分割內(nèi)容,即歌詞文件名不能有空格
5.因?yàn)閖s對(duì)文件操作以及ajax請(qǐng)求存在諸多默認(rèn)限制,若以類似方法在winfrom asp等中很
多問(wèn)題都會(huì)得到解決.
6.setTimeout()和setInterval()，在瀏覽器窗口非激活的狀態(tài)下會(huì)停止工作或者以極慢的
速度工作。目前我已知就IE不會(huì)有這種問(wèn)題。
*/
</script>
</body>
</html>相關(guān)推薦：
HTML實(shí)現(xiàn)美化上傳文件樣式
HTML實(shí)現(xiàn)搶票功能(設(shè)定時(shí)間打開搶票的頁(yè)面)
以上就是Html實(shí)現(xiàn)歌曲歌詞同步的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
