Préface: Ceci est un résumé des petites démos que j'ai apprises récemment. Il est encore loin de les utiliser, mais il est toujours bon de pratiquer et de consolider les points de connaissances. Récemment, je parcourais le code source de JS Books et Boostrap.css. Après avoir fait cette démo, c'est une fin temporaire. Ensuite, le code source de jQuery et le code source de boostrap.js. La tâche est très ardue. Allez, je ne publierai pas le code dans tout l'article. Si vous êtes intéressé, vous pouvez m'envoyer un message et vous pouvez vous transmettre le code ~
texte:
Premièrement, les rendus
1. Disposition: La disposition réactive et adaptative dans Boostrap ne peut pas être éliminée. La ligne imbriquée dans le conteneur est ensuite imbriquée et Main (h5 new tag) et div (id = "musicconsole") respectivement. Mis à part la liste de musique à gauche, Main est la zone d'affichage des paroles à droite, et Div est la boîte de contrôle ci-dessous.
2. Fonctions de mise en œuvre principales:
(1) Ajouter des chansons (l'icône "+" dans le coin supérieur droit de la liste des chansons) et supprimer des chansons (l'icône "Trump" dans le coin supérieur droit de la liste des chansons)
(2) Cliquez sur la chanson dans la liste des chansons: pour la piste sera jouée; S'il y a des paroles, les paroles seront affichées, et s'il n'y a pas de paroles, les "pas de paroles" seront affichées; La barre de progrès et le temps changent au fur et à mesure que la chanson joue.
(3) Cliquez sur le bouton précédent (ligne verticale + triangle) et la chanson précédente sera jouée: s'il y a des paroles, les paroles seront affichées en faisant défiler, et s'il n'y a pas de paroles, les "pas de paroles" seront affichées; La barre de progrès et le temps changent au fur et à mesure que la chanson joue.
En cliquant sur le bouton Play (Triangle), il passera au bouton Pause (Double Vertical Lines), et la chanson passera également de l'état de jeu à l'état de pause en conséquence.
Cliquez sur le bouton Suivant (Triangle + Ligne verticale) et la chanson suivante sera jouée: s'il y a des paroles, les paroles seront affichées, et s'il n'y a pas de paroles, les "pas de paroles" seront affichées; La barre de progrès et le temps changent au fur et à mesure que la chanson joue.
En cliquant sur le bouton audio (haut-parleur), il deviendra un bouton muet (haut-parleur + "x"), et la chanson deviendra également muette en conséquence.
Cliquer sur le bouton de boucle (cercle avec flèches) deviendra une lecture unique. Gardez le bouton de boucle et la boucle unique sera répétée.
3. Problèmes rencontrés:
(1) La taille du glyphicon est modifiée par la taille d'une police
Étant donné que l'icône Boostrap est utilisée, la taille par défaut est trop petite. J'ai essayé la largeur et la hauteur mais je n'ai pas répondu. J'ai réalisé que j'avais utilisé la taille d'une police pour changer la taille.
(2) Str.replace (Oldstr, Newstr)
Lorsque vous cliquez sur le bouton de lecture, l'état de lecture sera modifié et l'icône du bouton sera modifiée en conséquence. Par conséquent, le remplacement est utilisé, mais il n'a pas répondu depuis longtemps. Il s'est avéré que c'est parce qu'il régénère une chaîne, pas directement sur la chaîne d'origine, orz
(3) Il est difficile pour les navigateurs de lire des fichiers locaux en raison de considérations de sécurité
À l'origine, j'avais prévu d'utiliser LocalStorage pour stocker le contenu dans la liste de musique, mais je l'ai essayé avec FileReader de H5 pendant longtemps, mais il n'y avait aucun moyen. J'ai dû abandonner.
FileReader peut être utilisé pour lire des images ou des fichiers HTML. Sa méthode Readasdataurl peut obtenir le chemin du fichier. En parlant de cela, je veux vraiment rire. J'ai essayé d'enregistrer un fichier musical. Ok, allons-y, quoi? LocalStorage est-il à court de mémoire? 5m enregistre un chemin de fichier? Drôle moi?
Les questions suivantes sont toutes dans les paroles. . . Je me sens très fatigué en le faisant. . .
(4) problèmes rencontrés lors de l'analyse des paroles
Les paroles sont généralement des fichiers LRC, mais ils sont en fait du texte brut. Utilisez Ajax pour faire transmettre les données à partir de l'arrière-plan, mais il n'y a pas d'arrière-plan pour jouer avec moi, donc je ne peux que copier les paroles directement et les écrire dans une chaîne en tant que données mortes.
Il était à l'origine prévu d'utiliser Split ('/ R / N') pour diviser la chaîne en paroles de phrase par phrase et la mettre dans un tableau.
En conséquence, j'ai signalé diverses erreurs. Après une longue période de travail, je l'ai finalement trouvé sur cette scission. Je l'ai vérifié en ligne pendant longtemps, et il s'est avéré être le pot JS.
Parce que la syntaxe JS ne force pas un point-virgule à ajouter à la fin, en utilisant la rupture de la ligne du système (c'est-à-dire, le retour du chariot) sera bloqué. Il y a deux plans de réponse principaux:
1) Supprimez manuellement le caractère Newline et utilisez / n Newline à la place. Cette solution aura un nouveau effet sur la page.
2) Ajouter / Avant le caractère de rupture de la ligne du système, ce schéma n'a pas d'effet de rupture de ligne sur la page
(5) Problèmes rencontrés lors du défilement
Une fois les paroles ajoutées avec succès, elle est parfaitement affichée, mais elle doit être synchronisée avec la musique. En comparant avec le temps de lecture actuel, à quel point la liste des paroles correspondante se déplace vers le haut, lorsque les paroles sont vides, le jugement limite final, et après tous ces problèmes sont résolus, une lecture de boucle apparaît et les paroles ne peuvent pas être affichées. Après une longue période, j'y suis allé. C'était parce que lorsque Loop = True, l'événement terminé n'a pas pu être écouté. Il n'y avait aucun moyen, donc je ne pouvais qu'abandonner la boucle et ajouter le jugement de la boucle dans l'événement final.
Eh bien, c'est très bon, parfaitement affiché, et je suis un peu excité. C'est un peu désordonné partout, et le test montre s'il y a des problèmes. Quand j'ai pensé qu'il serait possible de terminer, j'ai fait une autre erreur [Indifférence.jpg], alors ajustez-le. Découvrez d'abord la raison de l'erreur. Dans l'outil de développeur F12 (je suis allé à Baidu, ce que j'ai écrit ci-dessus), j'ai vu que deux paroles ont été ajoutées en même temps, donc le défilement vers le haut sera si rapide, et il sautera de haut en bas. Le coupable a été trouvé, Settimeout. Parce qu'il s'agit d'un appel récursif, CLClearTimeout est nécessaire pour l'effacer. OK, il n'y a pratiquement plus de problème maintenant.
Plus tard:
Ah, et, parce que je suis fasciné par le cerf rouge récemment, j'ai gentiment nommé mon joueur "joueur marocain" ~ [Big Brother Bihart] Il a fallu trois jours pour faire cette démo, et les paroles ont été ajustées à elles seules plus de la moitié du temps. Et vous pouvez voir que les principaux problèmes rencontrés étaient les problèmes d'affichage des paroles, et j'étais ivre. Cependant, quoi qu'il arrive, je l'ai finalement fait. Voyant qu'il a finalement déployé normalement, le sentiment d'accomplissement était encore très bon. Bien que cela ait été fait, tout comme j'écrivais ce blog, j'ai retrouvé l'erreur Orz.
Ce qui précède est ce que l'éditeur vous a présenté pour créer un lecteur de musique simple utilisant HTML5 + Boostrap. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!