HTML5 verwendet das Audio-Tag, um den Effekt der Liedtextsynchronisierung zu erzielen. _html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

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. Es empfiehlt sich, hier nicht „loop='loop‘“ festzulegen. Dieses Attribut wird zum Festlegen der Loop-Wiedergabe verwendet, da Sie später das Attribut „ended“ verwenden müssen. Wenn die Schleife auf „Bei Schleife“ eingestellt ist, ist das beendete Attribut immer falsch.
autoplay='autoplay' legt fest, dass die Seite nach dem Laden automatisch Musik abspielt. Die Attribute „preload“ und „autoplay“ haben den gleichen Effekt. Wenn das Attribut „autoplay“ im Tag erscheint, wird das Attribut „preload“ ignoriert.
controls='controls' legt die Steuerleiste für die Anzeige von Musik fest.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<Audio src="music/Yesterday Once More .mp3" id="aud" Autoplay="Autoplay" Steuerelemente="Steuerelemente" Vorspannung="auto">
Ihr Browser unterstützt das Audioattribut nicht. Bitte ändern Sie den Browser zum Durchsuchen.
Audio>

Nachdem Sie dieses 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. Denn die Musikdatei am Anfang sah so aus

Wir müssen jeden Text in ein zweistelliges Array einfügen. Nach der Formatierung sieht der Text so aus:
Hier ist der Code zum Formatieren des Liedtextes enthalten.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

//Lyrics-Synchronisationsteil
Funktion parseLyric(text) {
//Teilen Sie den Text Zeile für Zeile auf und speichern Sie ihn im Array
var lines = text.split('n'),
//Regulärer Ausdruck, der zum Abgleichen der Zeit verwendet wird. Das Abgleichsergebnis ähnelt [xx:xx.xx]
Muster = /[d{2}:d{2}.d{2}]/g,
//Array zum Speichern des Endergebnisses
Ergebnis = [];
lineslines =lines.slice(1); };
//Wenn Sie „n“ zum Generieren des obigen Arrays verwenden, ist das letzte Element im Ergebnis ein leeres Element, das hier entfernt wird
lines[lines.length - 1]
=== 0 &&lines.pop( lines.forEach(function(v /*array element value*/ , i /*element index*/ , a /*array yourself*/ ) {
//Extrahierungszeit [xx:xx.xx]
var
= v.match(pattern), //Liedtext extrahieren
Wert = v.replace(muster, '' ). //Da es in einer Zeile mehrere Zeiten geben kann, kann die Zeit in der Form [xx:xx.xx][xx:xx.xx][xx:xx.xx] vorliegen, was erforderlich ist weiter getrennt werden
time.forEach(function(v1, i1, a1) {
//Entfernen Sie rechtzeitig die eckigen Klammern, um xx:xx.xx zu erhalten
var
= v1.slice(1, -1).split(':'); //Schiebe das Ergebnis in das endgültige Array
result.push([parseInt(t[0], 10) * 60 parseFloat(t[1]), value]);
});
});
//Sortieren Sie abschließend die Elemente im Ergebnisarray nach Zeit, damit der Liedtext nach dem Speichern normal angezeigt werden kann
result.sort(function(a, b) {
Gib a[0] - b[0] zurück;
An diesem Punkt können wir problemlos die Liedtexte jedes Musikstücks 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

Inhalt in die Zwischenablage kopieren

Funktion fn(sgname){
$.get('music/' sgname '.lrc',function(data){
var str=parseLyric(data);
for(var i=0,li;i<str.length;i ){
li=$('<li>' str[i][1] 'li>');
$('#gc ul').append(li);
}
$('#aud')[0].ontimeupdate=function(){//video Wird ausgelöst, wenn sich die aktuelle Wiedergabeposition des Audios ändert
for (var i = 0, l = str.length; i < l; 🎜>
if (this.currentTime /*Aktuelle Wiedergabezeit*/ > str[i][0]) {
//Auf Seite anzeigen
$('#gc ul').css('top',-i*40 200 'px'); //Liedtext nach oben verschieben
$('#gc ul li').css('color','#fff'); $('#gc ul li:nth-child(' (i 1) ')').css('color','red'); //Markieren Sie, welcher Text gerade gespielt wird
}
}
if(this.ended){ //Bestimmen Sie, ob die aktuell abgespielte Musik zu Ende gespielt wurde
var
songslen=$('.songs_list li').length; for(var
i= 0,val;i<songslen;i ){
val=$('.songs_list li:nth-child(' (i 1) ')').text(); if(
val==sgname){
i=(i==(songslen-1))?1:i 2;
sgname=$('.songs_list li:nth-child(' i ')').text(); //Umschalten, nachdem die Musik fertig ist Ein Musikstück spielen $('#gc ul').empty(); //Text löschen
$('#aud').attr('src','music/' sgname '.mp3');
fn(sgname);
zurück;
}
}
}
};
});
} fn($('.songs_list li:nth-child(1)').text());
Jetzt können hier Ihre Musiktexte normal und synchron 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