[ANGULAR] Mettre en place un player mp3 dans ma SPA

Antoine Brsslt
Javascript

Je fais une petite app en side project pour faire ma première SPA

En gros l'app permet de jouer des mp3 dans différentes playlists

J'aimerai mettre en place un player sur tout le site, et c'est là que je visualise pas bien comment le faire.

Voilà ce que je souhaite accomplir :

Je voudrais donc que ce player soit sur toute les page et joue le dernier mp3

Voilà ce que j'ai réalisé :

J'ai créé une directive qui joue le son au clic. -> https://github.com/Antoinebr/Sur-la-Face-B/blob/master/js/directives/playsongs.js

Ce que je comprend pas c'est comment intégrer un plugin jQuery de player (que j'ai) et d'avoir le titre + bouton globalement sur toutes les pages.

Sur le Chan Grafikart ma conseillé de faire évoluer ma directive mais je coince un peu pour le coup :/

L'ensemble du code est sur github :
https://github.com/Antoinebr/Sur-la-Face-B/tree/master

Le démo live :
http://surlafaceb.tk/preprod/#/

Si quelqu'un à une petite idée :p

Merci beaucoup

2 réponses

Antoine Brsslt
Auteur

MAJ 22/02 12:08

J'ai réussi à faire quelque chose de fonctionnel mais je me demande si j'ai pas un peu fait n'importe quoi dans mes directives...

var audio = null;

// Inclure des ordres JQuery dans une directive
app.directive('playsong',function(){
  return{
    restrict: "C", // restriction sur une classe
    link: function(scope,element, attrs){
      ///console.log(scope);
      element.click(function(e){
        e.preventDefault();

        // On récupère l'url
        var songUrl = $(element).data('url');

        // On récupère le nom
        var songName = $(element).text();

        // On injecte le nom dans la page
        $('player h2').text(songName);

        /**
        *
        * Si un son est deja en lecture on le pause
        *
        */
        if(audio !== null){
          audio.pause();
        }

        /**
        *
        * Créer l'objet audio et joue le mp3
        *
        */
        audio = new Audio(songUrl);
        audio.play();

        /**
        *
        * Met à jour le timer
        *
        */
        setInterval(function(){
          $('player .curent-time').text( Math.round((audio.currentTime/60)*100) /100);
        },1000);

        /**
        *
        * Affiche la durée total en m:s
        *
        */
        audio.addEventListener("loadeddata", function() {
          console.log(audio.duration);
          $('player .duration').text( Math.round((audio.duration/60)*100) /100);
        });

      }); // click
    }
  };
});

app.directive('player',function(){
  return{
    restrict: "E", // restriction sur un element

    link: function(scope,element, attrs){

      element.click(function(e){
        e.preventDefault();

      }); // click

    }
  };
});

/**
*
* Permet de mettre en pause le mp3
*
*/
app.directive('pausesong',function(){
  return{
    restrict: "E",

    link: function(scope,element, attrs){

      element.click(function(e){
        e.preventDefault();

        if(audio !== null){
          audio.pause();
        }

      }); // click
    }
  };
});

/**
*
* Permet de repredre la lecture du mp3
*
*/
app.directive('playsong',function(){
  return{
    restrict: "E",
    link: function(scope,element, attrs){
      ///console.log(scope);
      element.click(function(e){
        e.preventDefault();

        if(audio !== null){
          audio.play();
        }

      }); // click
    }
  };
});

Voir sur Github -> https://github.com/Antoinebr/Sur-la-Face-B/blob/master/js/directives/playsongs.js

Scremi Nono

Salut , je souhaite faire le même projet que toi aurais-tu des conseils a donner STP ? MERCI