Lecteur audio circulaire ( rond )

Télécharger le projet
Commenter

Description

et un lecteur audio circulaire qui utilise canvas pour dessiner le lecteur et la partie position de la video pour les commandes je superpose un div conteneur

plusieurs options son possible comme l'ajouter d'une playliste choisir le diametre du lecteur,les couleurs, mettre une image au centre faire tourner l'image...etc

la mise en place est des plus simple il suffit de creer une insrtances pour chaque player on peut donc en mettre plusieurs sur une page et on peut soit mettre un morceau soit creer une playliste dans un fichier json

page teste

configuration avec un seul titre 

var config={
  conteneur:'audio_conteneur2',      // id du conteneur ou se trouvera le lecteur
  couleur_centre:"rgba(0, 0, 255, 0.6)", //couleur du cercle centrale
  couleur_progres:"black",                //couleur de la barre de progression
  couleur_fond:"white",        //couleur du fond
  couleur_ombre:"black",      //couleur de l'ombre
  diametre_lecteur:350,        //diametre du lecteur
  diametre_detect:105,                    // afin de faire fonctionner la selection de la position de lecture en fonction d'un certain diametre parametrable en fonction du rayon du lecteur
  epaisseur_barre:0,         // épaisseure de la barre de défilement
  image:false,                // chemin et nom de l'image a afficher quand il n'y a pas de playliste
  rotation:true,            // true ou false si image doit elle etre en rotation ou fixe
  ressources:"res/",         //repertoire ou se trouve les images du lecteur
  class_suplementaire:"position",   //optionnel false ou nom de la classe, rajoute une class css suplementaire pour le positionnement individuel des commandes de lecture si plusieurs lecteur
  fichier:"http://scriptevol.free.fr/contenu/player_c/zic/l_allen_hard_out_here.mp3",     //optionnel si fichier audio unique indiquer le chemin du fichier sinon mettre false
  playliste:false         //optionnel si utilisation d'une playliste indiquer le nom de la playliste sinon mettre false
 }
 new cercle_audio(config);



configuration avec playliste 

var config={
  conteneur:'audio_conteneur',  // id du conteneur ou se trouvera le lecteur
  diametre_lecteur:300,         //diametre du lecteur
  couleur_centre:"coral",       //couleur du cercle centrale
  couleur_progres:"#7FFFBF",   //couleur de la barre de progression
  couleur_fond:"white",         //couleur du fond
  couleur_ombre:"black",        //couleur de l'ombre
  diametre_detect:130,          // afin de faire fonctionner la selection de la position de lecture en fonction d'un certain diametre parametrable en fonction du rayon du lecteur
  epaisseur_barre:15,           // épaisseure de la barre de défilement
  image:false,                  // chemin et nom de l'image a afficher quand il n'y a pas de playliste
  rotation:true,                // true ou false si image doit elle etre en rotation ou fixe
  ressources:"res/",            //repertoire ou se trouve les images du lecteur
  class_suplementaire:false,   //optionnel false ou nom de la classe, rajoute une class css suplementaire pour le positionnement individuel des commandes de lecture si plusieurs lecteur
  fichier:false,                //si fichier audio unique indiquer le chemin du fichier sinon mettre false
  playliste:playliste           //optionnel si utilisation d'une playliste indiquer le nom de la playliste sinon mettre false
 }
 new cercle_audio(config);


dans le cas d'une playliste il faut declarer la playliste dans l'entete du fichier html

exemple: 
<script src="res/playliste.json"></script>


exemple de playliste sans image 

var playliste=
[
{"chemin":"zic/nom_du_titre1.mp3"},

{"chemin":"zic/nom_du_titre2.mp3"},

{"chemin":"zic/nom_du_titre3.mp3"}
]


exemple de playliste avec image 

var playliste=
[
{
"chemin":"http://scriptevol.free.fr/contenu/player_c/zic/noa_neal_graffiti.mp3",
"image":"pochette/noa_neal.jpg"
},

{
"chemin":"http://scriptevol.free.fr/contenu/player_c/zic/j_jeff_f_prince__right_now.mp3",
"image":"pochette/kool.jpg"
},

{
"chemin":"http://scriptevol.free.fr/contenu/player_c/zic/d_soul_all_good.mp3",
"image":"pochette/d_l_s.jpg"
}
]
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)