Création d'une application Music Player avec Kendo UI et jQuery

Dans ce didacticiel, nous créons un lecteur de musique utilisant jQuery et le composant de l'interface utilisateur de Kendo pour les notifications. Le joueur mettra en pause et jouera des chansons, et délivrera des notifications en fonction de la lecture de la chanson.

Les lecteurs de musique sont partout ces jours-ci. Sur nos téléphones, sur les sites Web et sur les ordinateurs. La façon la plus populaire de distribuer de la musique est via Internet. Au fil des ans, de nombreuses applications ont vu le jour nous permettant de diffuser, télécharger ou acheter de la musique dans le confort de nos lits.

Kendo UI est un ensemble d'outils et de composants créés pour aider à réduire la quantité de code nécessaire pour effectuer certaines tâches de l'interface utilisateur.

Dans ce didacticiel, nous tentons de créer un lecteur de musique de base avec jQuery tout en utilisant l'un des composants pratiques de l'interface utilisateur de Kendo.

Prérequis

Pour suivre ce didacticiel, une compréhension de base de jQuery et JavaScript est requis. La connaissance HTML / CSS est également recommandée mais pas obligatoire.

Pour construire l'application, voici quelques outils que nous utiliserons:

Initialisation de l'application

Notre objectif est d'avoir un lecteur de musique fonctionnel à partir duquel la musique peut être lue. Nous allons parcourir les étapes nécessaires pour en créer un avec HTML / CSS et jQuery.

Créez un dossier appelé musicplayer et définissez cette structure de dossier à l'intérieur:

     musicplayer /
          css /
           player.css
          js /
           player.js
          index.html

Commençons par ajouter des données et des fonctionnalités à notre application.

Ouvrez votre fichier index.html et ajoutez-y les lignes de code suivantes:

    
    
     
         
            
            
            
            
            
        
      
               
                   

                     


                    

                      
                        - 
                      
                    

                    

                      

                        
                      
                      

                        
                      
                      

                        
                      

                      

                        
                      
                    

                    

                      
                      

                    

                    

                  
               
                  

                    
 Piste 1 
                    
 Piste 2 
                    
 Piste 3 [19659020] Piste 4 
                  
              
                                                     
    

Dans notre fichier index.html nous avons quatre sections. Voyons brièvement leur utilisation:

• Section un: Ici, nous importons les bibliothèques qui seront nécessaires pour notre application.
• Section deux: Nous définissons les balises HTML nécessaires pour contrôler les sections du corps du joueur . Nous afficherons le nom de l'artiste et le titre de la chanson, afficherons quelques boutons et un tracker pour notre lecteur.
• Section trois: Nous définissons notre liste de chansons. Lorsque nous ajouterons nos fonctions JavaScript, nous verrons comment transmettre dynamiquement les valeurs aux balises créées ci-dessus.
• Section quatre : Nous importons notre fichier JavaScript et les bibliothèques nécessaires à notre application.

Pour visualiser notre écran, nous avons besoin de quelques styles css. Ajoutons-les. Ouvrez votre fichier player.css et ajoutez-y ce qui suit:

     // js / player.css
    * {
      marge: 0;
      rembourrage: 0;
    }
    corps {
      couleur de fond: #fff;
      font-family: 'lato', sans-serif! important;
    }
    .player {
      fond: # 242628;
      fond: -moz-gradient linéaire (haut, # 242628 0%, # 000000 100%);
      fond: -webkit-gradient-linéaire (haut, # 242628 0%, # 000000 100%);
      fond: gradient linéaire (vers le bas, # 242628 0%, # 000000 100%);
      filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 242628', endColorstr = '# 000000', GradientType = 0);
      position: relative;
      largeur: 500 px;
      marge: 0 auto;
      margin-top: 80px;
      indice z: 2;
    }
    .splitTxt,
    .Icônes {
      couleur: #ffffff;
    }
    .trackDetails {
      alignement du texte: centre;
      marge: 4px auto;
      largeur: 300px;
      hauteur: 38px;
      bordure: 1px solide # 1e1e1e;
      fond: # 000000;
      rayon-frontière: 4px;
      rembourrage: 6px;
    }
    .Titre,
    .artist {
      couleur: # 999;
      gauche: 167px;
    }
    .Titre {
      taille de police: 14px;
      poids de police: gras;
    }
    .artist {
      taille de police: 12px;
    }

Ici, nous ajoutons des styles pour l'apparence de base de notre lecteur de musique. Puisque nous voulons des options de contrôle de la musique dans notre application, ajoutons un peu plus de style pour cela. Dans le même fichier, ajoutez les lignes de code suivantes:

     .volumeIcon {
      position: absolue;
      à droite: 0;
      curseur: pointeur;
      hauteur: 34px;
      largeur: 32px;
    }
    .volumeIcon {
      en bas: 6px;
      bloc de visualisation;
    }
    .les contrôles {
      curseur: pointeur;
      hauteur: 40px;
      largeur: 120 px;
      marge: 0 auto;
    }
    .controls .play,
    .controls .pause,
    .controls .rew,
    .controls .fwd {
      flotteur: gauche;
      hauteur: 40px;
      largeur: 40px;
      hauteur de ligne: 40 px;
      alignement du texte: centre;
    }
    .controls .play,
    .controls .pause,
    .plIcon,
    .volumeIcon {
      taille de police: 26px;
    }
    .controls .pause {
      affichage: aucun;
    }
    .hidden {
      affichage: aucun;
    }
    .controls .visible {
      affichage: bloc en ligne;
    }
    .tracker {
      curseur: pointeur;
      hauteur: 5px;
    }
    .ui-widget.ui-widget-content {
      bordure: 0;
    }
    .ui-corner-all {
      border-radius: 0;
    }
    .ui-slider .ui-slider-handle {
      bloc de visualisation;
      hauteur: 14px;
      rayon-frontière: 14px;
      largeur: 14px;
      -webkit-transition: tous les .3s faciles à utiliser;
      transition: tous .3s avec facilité;
    }
    .tracker .ui-slider-range {
      fond: # 00dbde;
      fond: -moz-gradient linéaire (gauche, # 00dbde 0%, # fc00ff 100%);
      fond: -webkit-linear-gradient (gauche, # 00dbde 0%, # fc00ff 100%);
      fond: gradient linéaire (à droite, # 00dbde 0%, # fc00ff 100%);
      filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 00dbde', endColorstr = '# fc00ff', GradientType = 1);
      -webkit-transition: tous les .3s faciles à utiliser;
      transition: tous .3s avec facilité;
      hauteur: 100%;
      en haut: 0;
    }
    .volume .ui-slider-range {
      fond: # 333333;
      -webkit-transition: tous les .3s faciles à utiliser;
      transition: tous .3s avec facilité;
    }
    .volume.ui-widget-content {
      fond: # 00dbde;
    }
    .ui-slider-handle {
      curseur: pointeur;
      hauteur: 10px;
      marge gauche: -5px;
      haut: 2px;
      largeur: 10 px;
      indice z: 2;
    }
    .le volume {
      affichage: aucun;
      à droite: 12px;
      position: absolue;
      haut: 35px;
      hauteur: 100px;
      largeur: 20 px;
      boîte-ombre: 0px 0px 10px # 000;
    }
    .volume .ui-slider-handle {
      affichage: aucun;
    }
    .playlist {
      couleur de fond: # 1e1e1e;
      type de liste: aucun;
      rembourrage-bas: 10px;
      rembourrage: 15px;
      position: relative;
      largeur: 100%;
      indice z: 1;
      affichage: aucun;
      -webkit-transition: tous les .1s de facilité;
      transition: tous facilité-in-out .1s;
    }
    .playlist li {
      couleur: #eeeeee;
      curseur: pointeur;
      marge en bas: 4px;
      rembourrage: 6px 12px;
      -webkit-transition: tous les .1s de facilité;
      transition: tous facilité-in-out .1s;
    }
    .playlist li: hover {
      fond: # 333333;
    }
    .playlist li.active {
      poids de police: gras;
      fond: # 000000;
    }
    .montrer {
      bloc de visualisation;
    }
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    bouton .ui,
    html .ui-button.ui-state-disabled: survoler,
    html .ui-button.ui-state-disabled: actif {
      bordure: 0;
    }
    .ui-widget-content {
      fond: # 666666;
    }

Maintenant, lorsque vous ouvrez votre fichier index.html, vous verrez ceci:

Nous avons notre écran de base ouvert. Ensuite, nous devons ajouter une certaine interaction.

Écriture de notre fonction de lecteur de musique

Nous utiliserons un mélange de JavaScript et de jQuery pour ajouter des fonctionnalités à notre interface utilisateur pour le faire fonctionner comme prévu. Ouvrez maintenant votre fichier player.js et ajoutez-y le code suivant:

     // js / player.js
    fonction init () {
       chanson var;
       var tracker = $ ('. tracker');
       var volume = $ ('. volume');

      fonction initAudio (elem) {
        var url = elem.attr ('audiourl');

        var title = elem.text ();
        var artist = elem.attr ('artiste');

        $ ('. player .title'). text (title);
        $ ('. player .artist'). text (artiste);

        // song = new Audio ('media /' + url);
        chanson = nouvel audio (url);

        // écouteur d'événements timeupdate
        song.addEventListener ('timeupdate', function () {
          var curtime = parseInt (song.currentTime, 10);
          tracker.slider ('value', curtime);
        });

        $ ('. playlist li'). removeClass ('active');
        elem.addClass ('actif');
      }

      fonction playAudio () {
        song.play ();

        tracker.slider ("option", "max", song.duration);

        $ ('. play'). addClass ('caché');
        $ ('. pause'). addClass ('visible');
      }

      fonction stopAudio () {
        song.pause ();

        $ ('. play'). removeClass ('caché');
        $ ('. pause'). removeClass ('visible');
      }

      // lire le clic
      $ ('. play'). cliquez sur (fonction (e) {
        e.preventDefault ();
        // playAudio ();

        song.addEventListener ('terminé', function () {
          var next = $ ('. playlist li.active'). next ();
          if (next.length == 0) {
            suivant = $ ('. playlist li: premier enfant');
          }
          initAudio (suivant);

          song.addEventListener ('chargermetadata', fonction () {
            playAudio ();
          });

        }, faux);

        tracker.slider ("option", "max", song.duration);
        song.play ();
        $ ('. play'). addClass ('caché');
        $ ('. pause'). addClass ('visible');

      });

      // pause clic
      $ ('. pause'). cliquez sur (fonction (e) {
        e.preventDefault ();
        stopAudio ();
      });

      // piste suivante
      $ ('. fwd'). cliquez sur (fonction (e) {
        e.preventDefault ();

        stopAudio ();

        var next = $ ('. playlist li.active'). next ();
        if (next.length === 0) {
          suivant = $ ('. playlist li: premier enfant');
        }
        initAudio (suivant);
        song.addEventListener ('chargermetadata', fonction () {
          playAudio ();
        });
      });

      // piste précédente
      $ ('. rew'). cliquez sur (fonction (e) {
        e.preventDefault ();

        stopAudio ();

        var prev = $ ('. playlist li.active'). prev ();
        si (longueur précédente === 0) {
          prev = $ ('. playlist li: dernier enfant');
        }
        initAudio (précédent);
        song.addEventListener ('chargermetadata', fonction () {
          playAudio ();
        });
      });

      // éléments de playlist - cliquez
      $ ('. playlist li'). cliquez sur (fonction () {
        stopAudio ();
        initAudio ($ (this));
      });

      // initialisation - premier élément de la playlist
      initAudio ($ ('. playlist li: premier enfant'));

      song.volume = 0,8;

      volume.slider ({
        orientation: «verticale»,
        plage: «max»,
        max: 100,
        min: 1,
        valeur: 80,
        start: fonction (événement, ui) {},
        slide: fonction (événement, ui) {
          song.volume = ui.value / 100;
        },
        stop: fonction (événement, ui) {},
      });

      $ ('. volumeIcon'). cliquez sur (fonction (e) {
        e.preventDefault ();
        $ ('. volume'). toggleClass ('show');
      });

      // curseur de suivi vide
      tracker.slider ({
        plage: «min»,
        min: 0,
        max: 10,
        start: fonction (événement, ui) {},
        slide: fonction (événement, ui) {
          song.currentTime = ui.value;
        },
        stop: fonction (événement, ui) {}
      });

    }
    $ (init);

Passons en revue certaines fonctions définies:

• Nous définissons d'abord la fonction wrapper (init) pour héberger toutes les autres variables, événements et fonctions. Il est initialisé à la fin du fichier.
• Nous déclarons des variables pour référencer les contrôleurs de lecteur dans notre fichier HTML.
• Ensuite, nous définissons une fonction pour initialiser et lire notre fichier audio en lui passant une valeur.
• Nous ajoutons ensuite un écouteur d'événements à la fin de la fonction pour écouter quand notre tracker est cliqué ou changé de position.
• Ensuite, nous définissons une fonction de lecture. Ceci sera déclenché chaque fois que le bouton de lecture est cliqué.
• Ensuite, nous définissons une fonction d'arrêt. Ceci sera déclenché à chaque fois que le bouton pause est cliqué.
• Les fonctions qui suivent définissent ce qui se passe lorsque les boutons play, pause, suivant et précédent sont cliqués.
• Les deux dernières fonctions définissent les actions pour quand le bouton de volume ou le tracker de musique est cliqué.

Ajout de notifications à notre lecteur à l'aide de l'interface utilisateur de Kendo

Nous voulons recevoir une notification chaque fois que notre chanson est modifiée. Pour ce faire, nous utiliserons le composant de notification de l'interface utilisateur de Kendo. Nous devons ajouter du code à nos fichiers HTML et JavaScript pour que cela fonctionne.

Ouvrez votre fichier index.html et ajoutez le code suivant à notre premier et quatrième section.

Ici, nous importons tous nos fichiers nécessaires au fonctionnement de Kendo UI. Ensuite, nous mettons à jour des parties de notre HTML pour permettre l'affichage. Puisque nous voulons qu'une notification se produise lorsque le bouton de lecture est cliqué, nous lui donnons un ** id ** afin que nous puissions le référencer dans notre fichier JavaScript. Enfin, nous ajoutons un intervalle pour afficher la notification.

Ajoutez ce code au fichier player.js :

     // js / player.js

    // ajoute ceci dans la fonction initAudio après déclarer la variable de titre.
     var popupNotification = $ ("# popupNotification"). kendoNotification (). data ("kendoNotification");
      $ ("# showPopupNotification"). click (function () {
           popupNotification.show ("Vous jouez" + titre);
       });

Maintenant, chaque fois que vous cliquez sur le bouton de lecture, vous recevrez une notification sur la chanson que vous jouez.

Conclusion

Dans ce didacticiel, nous avons appris à utiliser jQuery, HTML et CSS pour construire un lecteur de musique. Les connaissances d'ici peuvent vous aider à créer plus d'applications en temps réel. Assurez-vous de poster des commentaires pour plus de clarté sur les parties que vous ne comprenez pas. Bon codage.