Utiliser le lecteur audio disponible du visiteur et jouer plusieurs musiques

Publié le par Francisek

Description

Sélectionne le lecteur multimédia approprié et permet de changer le fichier lu (depuis un lien).
L'ordre de choix des lecteurs est le suivant : Quicktime, Windows Media Player, Realplayer.
FICHIER: audioplay.js / aplay.zip
VERSION : 1.0 - 2005 - francisek.over-blog.com

Installation

  1. Téléchargez et décompressez le fichier aplay.zip
  2. Editez le fichier audioplay.js (faites le glisser sur une fenêtre du bloc-notes par exemple), et placez-vous en fin de fichier (juste avant la ligne //-->).
  3. Pour définir le lecteur à créer, modifiez les lignes
    var id_du_conteneur = new MultimediaPlayer( 'id_du_conteneur','url_du_fichier.mp3','type_mime');
    id_du_conteneur.AjoutePiste('url_du_fichier1.mp3', 'type_mime1', 'titre de la piste');
    id_du_conteneur.CreeLecteur();

    avec
    id_du_conteneur : id du conteneur DIV qui recevra le lecteur
    url_du_fichier.mp3 : adresse du fichier à lire
    type_mime : type mime du fichier (audio/mpeg pour le mp3)

    Par exemple:
    var monLecteur = new MultimediaPlayer('monLecteur', , 'audio/mpeg');
    monLecteur.AjoutePiste( , 'audio/mpeg', 'Titre de la piste');
    monLecteur.CreeLecteur();
    La ligne monLecteur.AjoutePiste('/lib/1/5/1851/files/verdi-requiem.mp3', 'audio/mpeg', 'Titre de la piste'); permet d'ajouter automatiquement des liens vers d'autres pistes à jouer dans le lecteur. Elle est optionnelle et vous pouvez la supprimer si la fonctionnalité ne vous intéresse pas. Le troisème paramètre permet de définir le titre du lien qui sera affiché.
    Le contenu du DIV conteneur sera entièrement remplacé.
  4. Sauvegardez le fichier audioplayer.js (attention, le bloc-note rajoute l'extention .txt, supprimez cette extension ou choisissez Enregistrer sous... puis Tous les fichiers).
  5. Mettez en ligne le fichier audioplayer.js sur votre blog (dans Mes fichiers).
  6. Placez les lignes suivantes dans votre blog (dans un texte libre, l'entête ou le pied de page) en mode HTML:
    <div ID='id_du_conteneur'>&nbsp;</div>
    <script type='text/javascript'
    </script>

Personnalisations

Vous pouvez redéfinir le style des liens pour changer de musique en ajoutant dans votre CSS la ligne suivante :

.PlayerList a {}

 

Si vous souhaitez que le lecteur n'apparaisse pas, ajoutez cette ligne dans votre CSS (en remplaçant id_du_conteneur par celui que vous aurez défini :

#FSKOPlayer_id_du_conteneur {display: none}

 

Vous pouvez changer la taille du lecteur en ajoutant ces lignes dans audioplay.js :

id_du_conteneur._width = nouvelle_largeur;
id_du_conteneur._height = nouvelle_hauteur;

La largeur par défaut est de 175px et la hauteur de 30px (ne descendez pas en dessous de 30px).

 

Vous pouvez définir si la lecture débute automatiquement (par défaut) ou non en ajoutant dans audioplay.js :

id_du_conteneur.AutoStart(true); ou id_du_conteneur.AutoStart(false);

 

Vous pouvez définir si la lecture se fait en boucle ou non (par défaut) en ajoutant dans audioplay.js :

id_du_conteneur.Boucle(true); ou id_du_conteneur.Boucle(false);

 

Exemple d'utilisation :

 

 

Publié dans Les inserts

Commenter cet article

Flo Bo'M 23/04/2008 08:58

Ce lecteur n'est pas conseillé sur typepad parce qu'il ralenti l'ouverture des pages. Ou en tout cas, il vaut mieux insérer une fonction de démarrage à la commande. Mais quel super choix de musique pour la démo! Merci!!!

Marine 25/04/2007 03:01

Salut
jusqu'a l'étape 4 ca va jai su me débrouillé par contre a partir de l'étape 5 jarrive plus la^^
aidez moi je craque lol

Francisek 27/04/2007 13:43

Il faut avoir un blog en Privilège ou Premium pour enregistrer des fichiers autres que des images et pouvoir mettre du javascript dans ton blog. Est-ce bien le cas ?

Elfen 25/04/2007 02:01

Salut,

Je crois que c'est toi qui ma donné des conseils pour mettre de la musique sur mon blog.
Je croi bien que c ce que tu expliques dans cette page.
Le probleme c'est que je ne comprend pa comment éditer le ficher audioplay.js (je c meme pa ce que c'est...)
Si tu pouvais m'aider ca serai cool.
Merci

Francisek 25/04/2007 13:58

Ce fichier est à télécharger depuis cette page.

moi 05/05/2006 09:41

et oui c'est encor moi j'ai un problème, a chaque fois que je tappe : ID='monLecteur' , au moment ou j'enregistre il se transforme en : id="monLecteur" du coup j'ai ni lecteur ni lien de chansons

Francisek 05/05/2006 10:57

 Pour une fois, ça n'a aucune importance, id peut être en majuscules ou en minuscules.Par contre dans la balise script, il te manque un guillement après src=

moi 04/05/2006 02:49

miracle j'y suis arriver désolé c moi ki ai merder désolé de mon désagréable naturel kan j'y arrive pas

Francisek 04/05/2006 09:44

 Marvelous !