HTML5 use the Audio tag to achieve the effect of lyrics synchronization _ html5 tutorial skills-

HTML5 is most powerful in processing media files. For example, you can use a simple vedio tag to play a video. Similarly, there is a corresponding tag for processing audio files in HTML5, that is, the audio tag. This article describes how HTML5 uses the Audio tag to synchronize the lyrics. If you are interested, you can learn about it. The most powerful feature of HTML5 is the processing of media files, for example, you can use a simple vedio tag to play a video. Similarly, there is a corresponding tag for processing audio files in HTML5, that is, the audio tag.
HTML5 has been used for so long, but the audio tag in it has been used once. Of course, this tag is just inserted into the page. This time, I just helped my friends build several pages and use this audio tag to train my hands.
First, you need to insert an audio tag to the page. Note that loop = 'loop 'should not be set here. This attribute is used to set loop playback, this is because when the ended attribute needs to be used later, if the loop is set to loop, the ended attribute will always be false.
Autoplay = 'autoplay' sets the automatic playing of music after page loading. The preload and autoplay attributes play the same purpose. If the autoplay attribute appears in the tag, the preload attribute is ignored.
Controls = 'controls' sets the control bar for displaying music.

Copy XML/HTML Code to clipboard

2. Your browser does not support the audio attribute. Change the browser to browse.

With this tag, congratulations! You can play music on your page. But will this make the page seem too monotonous? So I added some things to the page so that the lyrics can be displayed on the page synchronously and the music to be played can be selected. First, we need to download some lrc-format lyrics, and then you need to format these music. Because this is the first music file.

We need to insert each lyrics into a two-digit array. After formatting, the lyrics will become in this format.
The code for formatting the lyrics is attached here.

Copy XML/HTML Code to clipboard

1. // Synchronization of the lyrics
2. Function parseLyric (text ){
3. // Separate the text into one row and save it to an array
4. Var lines = text. split ('\ n '),
5. // The regular expression used to match the time. The matching result is similar to [xx: xx. xx].
6. Pattern =/\ [\ d {2 }:\ d {2}. \ d {2} \]/g,
7. // Save the final result Array
8. Result = [];
9. // Remove rows without time
10. While (! Pattern. test (lines [0]) {
11. Lineslines = lines. slice (1 );
12. };
13. // When '\ n' is used to generate an array, the last empty element in the result is removed.
14. Lines [lines. length-1]. length = 0 & lines. pop ();
15. Lines. forEach (function (v/* array element value */, I/* element index */, a/* array itself */){
16. // Extract time [xx: xx. xx]
17. Var time = v. match (pattern ),
18. // Extract the lyrics
19. Vvalue = v. replace (pattern ,'');
20. // Because a row may have multiple times, the time may be [xx: xx. xx] [xx: xx. xx] [xx: xx. xx] format, which needs to be further separated
21. Time. forEach (function (v1, i1, a1 ){
22. // Remove the brackets in the time To get xx: xx. xx
23. Var t = v1.slice (1,-1). split (':');
24. // Press the result into the final Array
25. Result. push ([parseInt (t [0], 10) * 60 + parseFloat (t [1]), value]);
26. });
27. });
28. // Finally, sort the elements in the result array by time, so that the lyrics can be displayed normally after they are saved.
29. Result. sort (function (a, B ){
30. Return a [0]-B [0];
31. });
32. Return result;
33. }

Here we can easily use the lyrics of each music. We need a function to get the lyrics and make them synchronously displayed on the page, switch the music normally. The code is attached below.

Copy XML/HTML Code to clipboard

1. Function fn (sgname ){
2. $. Get ('music/'+ sgname +'. lrc ', function (data ){
3. Var str = parseLyric (data );
4. For (var I = 0, li; I
5. Li = $ ('
6. '+ Str [I] [1] +'
');
7. $ ('# Gc ul'). append (li );
8. }
9. $ ('# Aud') [0]. ontimeupdate = function () {// triggered when the current playback position of the Video audio changes
10. For (var I = 0, l = str. length; I <l; I ++ ){
11. If (this. currentTime/* Current playback time */> str [I] [0]) {
12. // Display to the page
13. $ ('# Gc ul'0000.css ('top',-I * 40 + 200 + 'px'); // move the lyrics up
14. $ ('# Gc ul li'0000.css ('color',' # fff ');
15. $ ('# Gc ul li: nth-child('{( I }1}'{'}.css ('color', 'red'); // highlight which lyrics are currently played
16. }
17. }
18. If (this. ended) {// determines whether the current music has been played.
19. Var songslen = $ ('. songs_list li'). length;
20. For (var I = 0, val; I
21. Val = $ ('. songs_list li: nth-child (' + (I + 1) + '). text ();
22. If (val = sgname ){
23. I = (songslen-1 ))? 1: I + 2;
24. Sgname = $ ('. songs_list li: nth-child (' + I + '). text (); // switch to the next music after the music is played.
25. $ ('# Gc ul'). empty (); // clear the lyrics
26. $ ('# Aud'). attr ('src', 'music/'{sgname='hangzhou ');
27. Fn (sgname );
28. Return;
29. }
30. }
31. }
32. };
33. });
34. } Fn ($ ('. songs_list li: nth-child (1)'). text ());

Now, your music lyrics can be normally displayed on the page. However, there is still something missing, that is, a music list. I want to click the music in this list to play the music. The code is attached below.
HTML code

Copy XML/HTML Code to clipboard

2. • Yesterday Once More
   • You Are Beautiful
3. Point
   
   Me

Css code

Copy XML/HTML Code to clipboard

1. # Gc {
2. Width: 400px;
3. Height: 400px;
4. Background: transparent;
5. Margin: 100px auto;
6. Color: # fff;
7. Font-size: 18px;
8. Overflow: hidden;
9. Position: relative;
10. }
11. # Gc ul {
12. Position: absolute;
13. Top: 200px;
14. }
15. # Gc ul li {
16. Text-align: center;
17. Height: 40px;
18. Line-height: 40px;
19. }
20. . Songs_cnt {
21. Float: left;
22. Margin-top: 200px;
23. Position: relative;
24. }
25. . Songs_list {
26. Background-color: rgba (0, 0,. 2 );
27. Border-radius: 5px;
28. Float: left;
29. Width: 250px;
30. Padding: 15px;
31. Margin-left:-280px;
32. }
33. . Songs_list li {
34. Height: 40px;
35. Line-height: 40px;
36. Font-size: 16px;
37. Color: rgba (255,255,255,. 8 );
38. Cursor: pointer;
39. }
40. . Songs_list li: hover {
41. Font-size: 20px;
42. Color: rgba (140,. 6 );
43. }
44. . Sel_song {
45. Position: absolute;
46. Top: 50%;
47. Width: 40px;
48. Height: 80px;
49. Margin-top:-40px;
50. Font-size: 16px;
51. Text-align: center;
52. Background-color: transparent;
53. Border: 1px solid #2DCB70;
54. Font-weight: bold;
55. Cursor: pointer;
56. Border-radius: 3px;
57. Font-family: sans-serif;
58. Transition: all 2 s;
59. -Moz-transition: all 2 s;
60. -Webkit-transition: all 2 s;
61. -O-transition: all 2 s;
62. }
63. . Sel_song: hover {
64. Color: # fff;
65. Background-color: #2DCB70;
66. }
67. . Songs_list li. active {
68. Color: # f00;
69. }

Js Code

Copy XML/HTML Code to clipboard

1. $ ('. Songs_list li: nth-child (1)'). addClass ('active ');
2. $ ('. Songs_cnt'). mouseenter (function (){
3. Var e = event | window. event;
4. Var tag = e.tar get | e. srcElement;
5. If (tag. nodeName = 'button '){
6. $ ('. Songs_list'). animate ({'marginleft': '0px '}, 'low ');
7. }
8. });
9. $ ('. Songs_cnt'). mouseleave (function (){
10. $ ('. Songs_list'). animate ({'marginleft': '-280px'}, 'low ');
11. });
12. $ ('. Songs_list li'). each (function (){
13. $ (This). click (function (){
14. $ ('# Aud'). attr ('src', 'music/'{}(this}.text ');
15. $ ('# Gc ul'). empty ();
16. Fn ($ (this). text ());
17. $ ('. Songs_list li'). removeClass ('active ');
18. $ (This). addClass ('active ');
19. });
20. })

Now, some of the functions of your lyrics synchronization are available. The effect of using the Audio tag to synchronize the lyrics in HTML5 is now here. For more information, log on to the script home website!