communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > HTML5 utilise la balise Audio pour obtenir l'effet de synchronisation des paroles _html5 compétences du didacticiel

HTML5 utilise la balise Audio pour obtenir l'effet de synchronisation des paroles _html5 compétences du didacticiel

WBOY
Libérer： 2016-05-16 15:51:56
original
2509 Les gens l'ont consulté

L'aspect le plus puissant du HTML5 est le traitement des fichiers multimédias. Par exemple, la lecture vidéo peut être réalisée en utilisant une simple balise vedio. De même, il existe une balise correspondante pour le traitement des fichiers audio en HTML5, c'est-à-dire que la balise audio
HTML5 est disponible depuis si longtemps, mais la balise audio qu'elle contient n'a été utilisée qu'une seule fois, et bien sûr c'est juste pour insérez cette balise dans la page. Cette fois, j'ai juste profité d'aider un ami à créer quelques pages et à m'entraîner à utiliser la balise audio.
Vous devez d'abord insérer une balise audio dans la page. Notez qu'il est préférable de ne pas définir loop='loop' ici. Cet attribut est utilisé pour définir la lecture en boucle, car lorsque vous devez utiliser l'attribut terminé plus tard, si la boucle est définie sur If looping, l'attribut terminé sera toujours faux.
autoplay='autoplay' définit la page pour qu'elle joue automatiquement de la musique après le chargement. Les attributs de préchargement et de lecture automatique ont le même effet. Si l'attribut de lecture automatique apparaît dans la balise, l'attribut de préchargement sera ignoré.
controls='controls' définit la barre de contrôle pour afficher la musique.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <audio src="musique/Hier encore une fois .mp3" id="aud" lecture automatique="lecture automatique" contrôles="contrôles" préchargement="auto"> 
  2. Votre navigateur ne prend pas en charge l'attribut audio, veuillez changer de navigateur pour parcourir. 
  3. audio> 

Après avoir ce tag, félicitations, votre page peut désormais jouer de la musique. Mais cela rendrait la page trop monotone, j'ai donc ajouté quelques éléments à la page pour que les paroles puissent être affichées sur la page de manière synchrone et que la musique à jouer puisse également être sélectionnée. Donc, pour obtenir cet effet, nous devons d’abord télécharger des fichiers de paroles au format lrc, puis formater la musique. Parce que le fichier musical au début ressemblait à ça


Nous devons insérer chaque parole dans un tableau à deux chiffres. Après le formatage, les paroles deviendront comme ceci
Voici ci-joint le code de formatage des paroles

.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. //Partie synchronisation des paroles
  2. fonction parseLyric(texte) {
  3. //Séparez le texte ligne par ligne et stockez-le dans le tableau
  4. var lignes = texte.split('n'),
  5. //Expression régulière utilisée pour faire correspondre l'heure, le résultat correspondant est similaire à [xx:xx.xx]
  6. motif = /[d{2}:d{2}.d{2}]/g,
  7. //Array pour enregistrer le résultat final
  8. résultat = [];
  9. //Supprimer les lignes sans heure
  10. while (!pattern.test(lines[0])) {
  11. ligneslignes = lignes.slice(1);
    12. };
    13. //Lorsque vous utilisez 'n' pour générer le tableau ci-dessus, le dernier élément du résultat est un élément vide, qui sera supprimé ici
    14. lignes[lines.length - 1]
  14. .length === 0 && lignes.pop(); lines.forEach(function(v /*valeur de l'élément du tableau*/ , i /*index de l'élément*/ , a /*tableau lui-même*/ ) {
  15. //Heure d'extraction [xx:xx.xx]
  16. var
    17. heure
  17. = v.match(motif), //Extrait des paroles
    19. v
  19. valeur = v.replace(motif, '' ); //Comme il peut y avoir plusieurs heures sur une même ligne, l'heure peut être sous la forme de [xx:xx.xx][xx:xx.xx][xx:xx.xx], qui doit être encore plus séparés
  20. time.forEach(function(v1, i1, a1) {
  21. //Supprimez les crochets dans le temps pour obtenir xx:xx.xx
  22. var
    23. t
  23. = v1.slice(1, -1).split(':'); //Pousser le résultat dans le tableau final
  24. result.push([parseInt(t[0], 10) * 60 parseFloat(t[1]), valeur]);
    25. });
    26. });
    27. //Enfin, triez les éléments du tableau de résultats par heure afin que les paroles puissent s'afficher normalement après l'enregistrement
    28. result.sort(function(a, b) {
    29. retourner a[0] - b[0]
    30. });
    31. résultat de retour
    32. }
  33. À ce stade, nous pouvons facilement utiliser les paroles de chaque morceau de musique. Nous avons besoin d'une fonction pour obtenir les paroles et les afficher sur la page de manière synchrone, afin que la musique puisse être commutée normalement. Le code est joint ci-dessous.
Code XML/HTML

Copier le contenu dans le presse-papiers

  1. fonction fn(sgname){
  2. $.get('music/' sgname '.lrc',function(data){  
  3. var str=parseLyric(données);
    4. pour(var
  4. i=0,li;i<str.length;i ){
  5. li=$('<li>' str[i][1] 'li>'); 
    6. $('#gc ul').append(li);
    7. }
    8. $('#aud')[0]
  8. .ontimeupdate=fonction(){//vidéo Déclenché lorsque la position de lecture actuelle de l'audio change
    9. pour (var
  9. i = 0, l = str.length; je < l ; 🎜> if (this.currentTime /*Durée de lecture actuelle*/
  10. > str[i][0]) { //Afficher à la page
  11. $('#gc ul').css('top',-i*40 200 'px'); //Déplacer les paroles vers le haut
  12. $('#gc ul li').css('color','#fff');
  13. $('#gc ul li:nth-child(' (i 1) ')').css('color','red'); //Sélectionnez les paroles en cours de lecture
  14. }
  15. }
  16. if(this.ended){ //Détermine si la musique en cours de lecture a fini de jouer
  17. var
  18. songslen=$('.songs_list li').length pour(var
  19. i= 0,val;i<chanson;i ){
  20. val=$('.songs_list li:nth-child(' (i 1) ')').text(); > if(val
  21. ==sgname){ i
  22. =(i==(songslen-1))?1:i 2;  sgname
  23. =$('.songs_list li:nth-child(' i ')').text( // Changer une fois la musique terminée jouer un morceau de musique $('#gc ul').empty(); //Effacer les paroles
  24. $('#aud').attr('src','music/' sgname '.mp3'); fn(sgname);
  25. retour
  26. }
  27. }
  28. }
  29. };
  30. });
  31. } fn($('.songs_list li:nth-child(1)').text());
  33. Maintenant, ici, les paroles de votre musique peuvent être affichées sur la page normalement et de manière synchrone. Mais il manque encore une chose, c'est une liste de musique. J'espère pouvoir cliquer sur la musique dans cette liste pour lire la musique. Le code est joint ci-dessous. Code HTML


Code XML/HTML
Copier le contenu dans le presse-papiers

  1. <div classe="songs_cnt" >    
  2. <ul class="songs_list" >    
  3. <li>Hier Une fois de plus li>    
  4. <li>Tu es belle li>    
  5. ul>    
  6. <bouton classe="sel_song" >点<br/>< br/>我bouton>
  7. div>    
  8. <div id="gc" >    
  9. <ul>ul>    
  10. div>   

css代码

Code XML/HTML复制内容到剪贴板
  1. #gc{    
  2. largeur : 400 px ;    
  3. hauteur : 400 px ;    
  4. fond : transparent ;    
  5. marge : 100 px auto ;    
  6. couleur : #fff ;    
  7. taille de police : 18 px ;    
  8. débordement : masqué ;    
  9. position : relative ;    
  10. }    
  11. #gc ul{    
  12. position : absolue ;    
  13. haut : 200 px ;    
  14. }    
  15. #gc ul li{    
  16. text-align : center ;    
  17. hauteur : 40 px ;    
  18. hauteur de ligne : 40 px ;    
  19. }    
  20. .songs_cnt{    
  21. flotteur : gauche ;    
  22. marge supérieure : 200 px ;    
  23. position : relative ;    
  24. }    
  25. .songs_list{    
  26. couleur de fond : rgba(0,0,0,.2);    
  27. rayon de bordure : 5 px ;    
  28. flotteur : gauche ;    
  29. largeur : 250 px ;    
  30. remplissage : 15 px ;    
  31. marge gauche : -280px ;    
  32. }    
  33. .songs_list li{    
  34. hauteur : 40 px ;    
  35. hauteur de ligne : 40 px ;    
  36. taille de police : 16 px ;    
  37. couleur : rgba(255,255,255,.8);    
  38. curseur : pointeur ;    
  39. }    
  40. .songs_list li:hover{    
  41. taille de police : 20 px ;    
  42. couleur : rgba(255,23,140,.6);    
  43. }    
  44. .sel_song{    
  45. position : absolue ;    
  46. haut : 50 % ;    
  47. largeur : 40 px ;    
  48. hauteur : 80 px ;    
  49. marge supérieure : -40 px ;    
  50. taille de police : 16 px ;    
  51. text-align : center ;    
  52. couleur de fond : transparent ;    
  53. bordure : 1px solide #2DCB70 ;    
  54. font-weight : gras ;    
  55. curseur : pointeur ;    
  56. rayon de bordure : 3 px ;    
  57. famille de polices : sans-serif ;    
  58. transition : tous 2 ;    
  59. -moz-transition:tous 2 ;    
  60. -webkit-transition : tous 2 ;    
  61. -o-transition : tous 2 ;    
  62. }    
  63. .sel_song:hover{    
  64. couleur : #fff ;    
  65. couleur de fond : #2DCB70 ;    
  66. }    
  67. .songs_list li.active{    
  68. couleur : #f00 ;    
  69. }   

js代码

Code XML/HTML复制内容到剪贴板
  1. $('.songs_list li:nth-child(1)').addClass('active');    
  2. $('.songs_cnt').mouseenter(function () {    
  3. var e=événement||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标签实现歌词同步的效果今天也就到这里了。更多信息请登录脚本之家网站了解更多！

Étiquettes associées：
audio html5
source：php.cn
Article précédent：Explication détaillée de la balise