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"
}
]
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.