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

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

1. <Audio src="music/Yesterday Once More .mp3" id="aud" Autoplay="Autoplay" Steuerelemente="Steuerelemente" Vorspannung="auto"> 
2. Ihr Browser unterstützt das Audioattribut nicht. Bitte ändern Sie den Browser zum Durchsuchen. 
3. 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

1. //Lyrics-Synchronisationsteil
2. Funktion parseLyric(text) {
3. //Teilen Sie den Text Zeile für Zeile auf und speichern Sie ihn im Array
4. var lines = text.split('n'),
5. //Regulärer Ausdruck, der zum Abgleichen der Zeit verwendet wird. Das Abgleichsergebnis ähnelt [xx:xx.xx]
6. Muster = /[d{2}:d{2}.d{2}]/g,
7. //Array zum Speichern des Endergebnisses
8. Ergebnis = [];
//Linien ohne Zeit entfernen
while (!pattern.test(lines[0])) {
11. lineslines =lines.slice(1); };
12. //Wenn Sie „n“ zum Generieren des obigen Arrays verwenden, ist das letzte Element im Ergebnis ein leeres Element, das hier entfernt wird
13. lines[lines.length - 1]
.length
14. === 0 &&lines.pop( lines.forEach(function(v /*array element value*/ , i /*element index*/ , a /*array yourself*/ ) {
15. //Extrahierungszeit [xx:xx.xx]
16. var
time
17. = v.match(pattern), //Liedtext extrahieren
v
19. 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
20. time.forEach(function(v1, i1, a1) {
21. //Entfernen Sie rechtzeitig die eckigen Klammern, um xx:xx.xx zu erhalten
22. var
t
23. = v1.slice(1, -1).split(':'); //Schiebe das Ergebnis in das endgültige Array
24. result.push([parseInt(t[0], 10) * 60 parseFloat(t[1]), value]);
25. });
26. });
27. //Sortieren Sie abschließend die Elemente im Ergebnisarray nach Zeit, damit der Liedtext nach dem Speichern normal angezeigt werden kann
28. result.sort(function(a, b) {
29. Gib a[0] - b[0] zurück;
});
Ergebnis zurückgeben
}
33. 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

1. Funktion fn(sgname){
2. $.get('music/' sgname '.lrc',function(data){  
3. var str=parseLyric(data);
4. for(var i=0,li;i<str.length;i ){
5. li=$('<li>' str[i][1] 'li>'); 
6. $('#gc ul').append(li);
7. }
8. $('#aud')[0].ontimeupdate=function(){//video Wird ausgelöst, wenn sich die aktuelle Wiedergabeposition des Audios ändert
9. for (var i = 0, l = str.length; i < l; 🎜>
10. if (this.currentTime /*Aktuelle Wiedergabezeit*/ > str[i][0]) {
11. //Auf Seite anzeigen
12. $('#gc ul').css('top',-i*40 200 'px'); //Liedtext nach oben verschieben
13. $('#gc ul li').css('color','#fff'); $('#gc ul li:nth-child(' (i 1) ')').css('color','red'); //Markieren Sie, welcher Text gerade gespielt wird
14. }
15. }
16. if(this.ended){ //Bestimmen Sie, ob die aktuell abgespielte Musik zu Ende gespielt wurde
17. var
18. songslen=$('.songs_list li').length; for(var
19. i= 0,val;i<songslen;i ){
20. val=$('.songs_list li:nth-child(' (i 1) ')').text(); if(
21. val==sgname){
22. i=(i==(songslen-1))?1:i 2; 
23. sgname=$('.songs_list li:nth-child(' i ')').text(); //Umschalten, nachdem die Musik fertig ist Ein Musikstück spielen $('#gc ul').empty(); //Text löschen
24. $('#aud').attr('src','music/' sgname '.mp3');
25. fn(sgname);
26. zurück;
27. }
28. }
29. }
30. };
31. });
32. } fn($('.songs_list li:nth-child(1)').text());
33. 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

XML/HTML-Code
Inhalt in die Zwischenablage kopieren

1. <div class="songs_cnt" >    
2. <ul class="songs_list" >    
3. <li>Gestern noch einmal li>    
4. <li>Du bist wunderschön li>    
5. ul>    
6. <button class="sel_song" >点<br/>< br/>我Schaltfläche>
7. div>    
8. <div id="gc" >    
9. <ul>ul>    
10. div>   

css代码

XML/HTML-Code复制内容到剪贴板

1. #gc{    
2. Breite: 400px;    
3. Höhe: 400px;    
4. Hintergrund: transparent;    
5. Rand: 100px automatisch;    
6. Farbe: #fff;    
7. Schriftgröße: 18px;    
8. Überlauf: versteckt;    
9. Position: relativ;    
10. }    
11. #gc ul{    
12. Position: absolut;    
13. oben: 200px;    
14. }    
15. #gc ul li{    
16. text-align: center;    
17. Höhe: 40px;    
18. Zeilenhöhe: 40px;    
19. }    
20. .songs_cnt{    
21. float: links;    
22. Rand oben: 200px;    
23. Position: relativ;    
24. }    
25. .songs_list{    
26. Hintergrundfarbe: rgba(0,0,0,.2);    
27. Rahmenradius: 5px;    
28. float: links;    
29. Breite: 250px;    
30. Auffüllung: 15px;    
31. Rand links: -280px;    
32. }    
33. .songs_list li{    
34. Höhe: 40px;    
35. Zeilenhöhe: 40px;    
36. Schriftgröße: 16px;    
37. Farbe: rgba(255,255,255,.8);    
38. Cursor: Zeiger;    
39. }    
40. .songs_list li:hover{    
41. Schriftgröße: 20px;    
42. Farbe: rgba(255,23,140,.6);    
43. }    
44. .sel_song{    
45. Position: absolut;    
46. oben: 50 %;    
47. Breite: 40px;    
48. Höhe: 80px;    
49. margin-top: -40px;    
50. Schriftgröße: 16px;    
51. text-align: center;    
52. Hintergrundfarbe: transparent;    
53. Rahmen: 1 Pixel durchgezogen #2DCB70;    
54. Schriftstärke: fett;    
55. Cursor: Zeiger;    
56. Grenzradius: 3px;    
57. Schriftfamilie: serifenlos;    
58. Übergang:alle 2er;    
59. -moz-transition:all 2s;    
60. -webkit-transition:all 2s;    
61. -o-transition:all 2s;    
62. }    
63. .sel_song:hover{    
64. Farbe: #fff;    
65. Hintergrundfarbe: #2DCB70;    
66. }    
67. .songs_list li.active{    
68. Farbe: #f00;    
69. }   

js代码

XML/HTML-Code复制内容到剪贴板

1. $('.songs_list li:nth-child(1)').addClass('active');    
2. $('.songs_cnt').mouseenter(function () {    
3. var e=event||window.event;    
4. var tag= e.target||e.srcElement;    
5. if(tag.nodeName=='BUTTON'){    
6. $('.songs_list').animate({'marginLeft':'0px'},'slow');    
7. }    
8. });    
9. $('.songs_cnt').mouseleave(function () {    
10. $('.songs_list').animate({'marginLeft':'-280px'},'slow');    
11. });    
12. $('.songs_list li').each(function () {    
13. $(this).click(function () {    
14. $('#aud').attr('src','music/' $(this).text() '.mp3');    
15. $('#gc ul').empty();    
16. fn($(this).text());    
17. $('.songs_list li').removeClass('active');    
18. $(this).addClass('active');    
19. });    
20. })  

好了,到了这里,那么你的这个歌词同步的效果的一些功能差不多都有了,关于HTML5使用Audio标签实现歌词同步的效果今天也就到这里了.更多信息请登录脚本之家网站了解更多！