Detaillierte Einführung in die Wirkung von HTML5 mithilfe von Audio-Tags zur Synchronisierung von Liedtexten

Das Leistungsstärkste an

HTML5 ist die Verarbeitung von Mediendateien. Beispielsweise kann durch die Verwendung eines einfachen Vedio-Tags die Wiedergabe von Videos realisiert werden. Ebenso gibt es in HTML5 ein entsprechendes Tag, das Audio-Dateien verarbeitet, nämlich das Audio-Tag. In diesem Artikel werde ich Ihnen die Wirkung von HTML5 vorstellen, die das Audio-Tag verwendet, um eine Songtext-Synchronisierung zu erreichen. Interessierte Freunde können gemeinsam lernen. Das Leistungsstärkste an HTML5 ist die Verarbeitung von Mediendateien. Beispielsweise kann die Videowiedergabe durch die Verwendung eines einfachen Vedio-Tags erreicht werden. Ebenso gibt es in HTML5 ein entsprechendes Tag für die Verarbeitung von Audiodateien, d Fügen Sie diesen Tag in die Seite ein. Dieses Mal habe ich einfach die Gelegenheit genutzt, einem Freund dabei zu helfen, ein paar Seiten zu erstellen und die Verwendung des Audio-Tags zu üben.
Zuerst müssen Sie ein Audio-Tag in die Seite einfügen. Dieses
-Attribut wird zum Festlegen der -Schleife verwendet Wiedergabe, da es später abgespielt wird. Wenn Sie das Attribut ended verwenden müssen und die Schleife auf „Schleife“ eingestellt ist, ist das Attribut „endet“ immer falsch.
autoplay='autoplay' legt fest, dass die Musik nach dem Laden der Seite automatisch abgespielt wird. Die Attribute „preload“ und „autoplay“ haben den gleichen Effekt ignoriert. controls='controls' legt die Steuerleiste für die Anzeige von Musik fest.

XML/HTML Code复制内容到剪贴板
<audio src="music/Yesterday Once More.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto">
您的浏览器不支持audio属性，请更换浏览器在进行浏览。    
</audio>

Nachdem Sie diesen Tag haben, herzlichen Glückwunsch, Ihre Seite kann jetzt Musik abspielen. Dies würde die Seite aber zu eintönig machen, deshalb habe ich der Seite einige Dinge hinzugefügt, damit die Liedtexte synchron auf der Seite angezeigt werden können und auch die abzuspielende Musik ausgewählt werden kann. Um diesen Effekt zu erzielen, müssen wir zunächst einige Textdateien im LRC-Format herunterladen und dann die Musik formatieren. Weil die anfängliche Musikdatei so aussieht:

Wir müssen jeden Liedtext in ein Zwei-Bit-
-Array einfügen und es formatieren. Die Liedtexte werden in diesem Format vorliegen Hier ist der Code zum Formatieren der Liedtexte angehängt

XML/HTML Code复制内容到剪贴板
//歌词同步部分    
function parseLyric(text) {    
//将文本分隔成一行一行，存入数组    
var lines = text.split('\n'),    
//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]    
pattern = /\[\d{2}:\d{2}.\d{2}\]/g,    
//保存最终结果的数组    
result = [];    
//去掉不含时间的行    
while (!pattern.test(lines[0])) {    
lineslines = lines.slice(1);    
};    
//上面用'\n'生成生成数组时，结果中最后一个为空元素，这里将去掉    
lines[lines.length - 1].length === 0 && lines.pop();    
lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {    
//提取出时间[xx:xx.xx]    
var time = v.match(pattern),    
//提取歌词    
vvalue = v.replace(pattern, '');    
//因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔    
time.forEach(function(v1, i1, a1) {    
//去掉时间里的中括号得到xx:xx.xx    
var t = v1.slice(1, -1).split(':');    
//将结果压入最终数组    
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);    
});    
});    
//最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词    
result.sort(function(a, b) {    
return a[0] - b[0];    
});    
return result;    
}

Hier sind wir dran Es ist einfach, die Liedtexte jedes Musikstücks zu verwenden. Wir benötigen eine Funktion, um die Liedtexte abzurufen und sie synchron auf der Seite anzuzeigen, damit die Musik normal umgeschaltet werden kann. Der Code ist unten angehängt.

XML/HTML Code复制内容到剪贴板
function fn(sgname){    
$.get('music/'+sgname+'.lrc',function(data){    
var str=parseLyric(data);    
for(var i=0,li;i<str.length;i++){    
li=$(&#39;<li>&#39;+str[i][1]+&#39;</li>&#39;);    
$(&#39;#gc ul&#39;).append(li);    
}    
$(&#39;#aud&#39;)[0].ontimeupdate=function(){//视屏 音频当前的播放位置发生改变时触发    
for (var i = 0, l = str.length; i < l; i++) {    
if (this.currentTime /*当前播放的时间*/ > str[i][0]) {    
//显示到页面    
$(&#39;#gc ul&#39;).css(&#39;top&#39;,-i*40+200+&#39;px&#39;); //让歌词向上移动    
$(&#39;#gc ul li&#39;).css(&#39;color&#39;,&#39;#fff&#39;);    
$(&#39;#gc ul li:nth-child(&#39;+(i+1)+&#39;)&#39;).css(&#39;color&#39;,&#39;red&#39;); //高亮显示当前播放的哪一句歌词    
}    
}    
if(this.ended){ //判断当前播放的音乐是否播放完毕    
var songslen=$(&#39;.songs_list li&#39;).length;    
for(var i= 0,val;i<songslen;i++){    
val=$(&#39;.songs_list li:nth-child(&#39;+(i+1)+&#39;)&#39;).text();    
if(val==sgname){    
i=(i==(songslen-1))?1:i+2;    
sgname=$(&#39;.songs_list li:nth-child(&#39;+i+&#39;)&#39;).text(); //音乐播放完毕之后切换下一首音乐    
$(&#39;#gc ul&#39;).empty(); //清空歌词    
$(&#39;#aud&#39;).attr(&#39;src&#39;,&#39;music/&#39;+sgname+&#39;.mp3&#39;);    
fn(sgname);    
return;    
}    
}    
}    
};    
});    
} fn($(&#39;.songs_list li:nth-child(1)&#39;).text());

Jetzt können hier Ihre Musiktexte synchron und normal auf der Seite angezeigt werden. Aber eines fehlt noch, nämlich eine Musikliste. Ich hoffe, dass ich auf die Musik in dieser Liste klicken kann, um die Musik abzuspielen.

HTML-Code

XML/HTML Code复制内容到剪贴板
<p class="songs_cnt">
<ul class="songs_list">
<li>Yesterday Once More</li>
<li>You Are Beautiful</li>
</ul>
<button class="sel_song">点<br/><br/>我</button>
</p>
<p id="gc">
<ul></ul>
</p>

CSS-Code

XML/HTML Code复制内容到剪贴板
#gc{    
width: 400px;    
height: 400px;    
background: transparent;    
margin: 100px auto;    
color: #fff;    
font-size: 18px;    
overflow: hidden;    
position: relative;    
}    
#gc ul{    
position: absolute;    
top: 200px;    
}    
#gc ul li{    
text-align: center;    
height: 40px;    
line-height: 40px;    
}    
.songs_cnt{    
float: left;    
margin-top: 200px;    
position: relative;    
}    
.songs_list{    
background-color: rgba(0,0,0,.2);    
border-radius: 5px;    
float: left;    
width: 250px;    
padding: 15px;    
margin-left: -280px;    
}    
.songs_list li{    
height: 40px;    
line-height: 40px;    
font-size: 16px;    
color: rgba(255,255,255,.8);    
cursor: pointer;    
}    
.songs_list li:hover{    
font-size: 20px;    
color: rgba(255,23,140,.6);    
}    
.sel_song{    
position: absolute;    
top: 50%;    
width: 40px;    
height: 80px;    
margin-top: -40px;    
font-size: 16px;    
text-align: center;    
background-color: transparent;    
border: 1px solid #2DCB70;    
font-weight: bold;    
cursor: pointer;    
border-radius: 3px;    
font-family: sans-serif;    
transition:all 2s;    
-moz-transition:all 2s;    
-webkit-transition:all 2s;    
-o-transition:all 2s;    
}    
.sel_song:hover{    
color: #fff;    
background-color: #2DCB70;    
}    
.songs_list li.active{    
color: #f00;    
}

jsCode

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Wirkung von HTML5 mithilfe von Audio-Tags zur Synchronisierung von Liedtexten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!