Comment créer des paroles défilantes en HTML

Comment faire des paroles défilantes en HTML : écrivez d'abord le format d'encodage dans la balise, introduisez le style css et jQuery puis placez le lecteur, le code est [

L'environnement d'exploitation de ce tutoriel : système Windows7, version html5, ordinateur DELL G3.

html Comment faire des paroles défilantes :

Nous créons d'abord un fichier html avec un nom aléatoire, tel que : index.html, c'est simple, inutile de le dire, ne vous précipitez pas pour commencer en écrivant du code, nous créons un css. Pour le fichier, vous pourriez aussi bien le nommer musicplay.css. Pour js, nous pouvons l'écrire directement dans le fichier html pour une lecture et un ajustement faciles. Nous ne créerons pas de nouveau fichier js, mais vous devez préparer un fichier jQuery. Ce n'est pas grave si vous n'en avez pas. Nous parlerons de la solution plus tard. Le travail de préparation est terminé et nous commençons à écrire le format d'encodage. balise, et introduisons également le style css et jQuery que nous avons créés auparavant. Le code est le suivant :

Le code est le suivant :

<meta charset="UTF-8"><title>爱在西元前-周杰伦
</title><link type="text/css" rel="stylesheet" href="css/musicplay.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--注意：这种从网上直接引入的方法需要链接网络，如果你本地下载好了，就把这句话删除，采用下面的映入方式-->
<script src="js/jquery-1.9.1.min.js"></script></head>

Une fois le contenu principal écrit, nous commençons à écrire le corps. Nous utilisons d'abord le lecteur de placement, qui est l'étiquette. Le code est le suivant :

<center> 
<audio autoplay="autoplay src="爱在西元前.mp3" controls></audio>
</center><!--这里修改播放器里面播放的音乐，这里只有简单的控制，没做上一曲，下一曲的功能 ，autoplay="autoplay"属性为自动播放，不想让自动播放删去即可 -->

Ensuite, écrivez une boîte, le code est le suivant :

Le code css de la box est le suivant (voir notes pour les fonctions) :

La prochaine étape est le script js, notre idée de design est (complétée par les fonctions suivantes) :

Fonction 1 : parseLyric() divise les paroles. Cette étape consiste principalement à afficher les paroles sur des lignes séparées.

Fonction 2 : highLight() pour mettre en évidence les paroles actuellement placées, afin d'indiquer où se trouvent les paroles. la chanson actuelle est. Une phrase

Fonction 3 : audio.addEventListener() est restituée en temps réel, car elle défile, elle doit donc être restituée en continu

Fonction 4 : getLineNo() obtient le nombre de lignes à ce moment, si lorsque nous effectuons une avance ou un retour rapide, les paroles changeront également en fonction de nos ajustements

Fonction 5 : audio.addEventListener() revient au début après la lecture. Vous n'en avez pas besoin. pour faire cela, cela n'a pas beaucoup de sens. C'est pour Après avoir perfectionné les fonctions et expliqué ces fonctions, je publierai le code directement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!