Buzz, une librairie audio JavaScript/HTML5

5 juillet 2011

Buzz est une librairie JavaScript qui vous permet de mettre en place facilement la lecture de fichiers audio sur vos pages web. Développé par un français, Jay Salvat, l’outil utilise la balise HTML5 audio et fonctionne sur les principaux navigateurs du marché.

Du JavaScript… et du HTML5

Buzz s’appuie sur un unique fichier JavaScript qui vous permet d’inclure et de gérer un ou plusieurs sons sur vos pages web grâce à la balise HTML5 audio. Seuls les navigateurs capables de supporter cette technologie seront en mesure de lire le fichier : Firefox 3.6+, Chrome 6+, Opera 10.5+, IE9 et Safari 5+. Buzz est capable de détecter les navigateurs non compatibles et peut même permettre à l’utilisateur de masquer les éléments de l’interface (volume, bouton, etc).

La librairie possède de nombreuses fonctionnalités pour rendre votre application efficace : déclaration d’un ou plusieurs fichiers, gestion de plusieurs formats audio (ogg, mp3, wav et aac), mise en place d’une minuterie, événements pour déclencher la lecture, détection des navigateurs non compatibles avec HTML5, détection des navigateurs qui ne comprennent pas les formats audio utilisés, lecture en boucle, mise en pause, ou encore gestion du volume sonore… Bref, les possibilités sont grandes !

Exemple de base

Pour déclarer un fichier, on procède la manière suivante :

var mySound = new buzz.sound( "/sounds/myfile", {
    formats: [ "ogg", "mp3", "acc" ]
});

Et pour lancer la lecture du fichier, on utilise la fonction play() :

mySound.play();

Buzz est donc une librairie JavaScript pratique pour utiliser facilement des fichiers audio sur vos pages web et qui met en avant une des nombreuses innovations qu’apporte HTML5. A tester !

Requis : navigateur compatible HTML5
Démonstration : http://buzz.jaysalvat.com/
Licence : MIT

Commentaires

  • E Neum

    Bonjour,

    c’est en cherchant des informations sur cette librairie audio HTML5 « Buzz », du très sprolixe et décidément très compétent Jay Salvat, que je suis tombé sur votre article. J’ai déjà eu l’occasion de parler à Jay il y a quelques mois, mais depuis sa nouvelle prise de fonction, il est très difficilement joignable. Or j’ai un souci crucial de compréhension quant à l’usage de son script :

    Comment déclenche-t-on un fichier audio en cliquant sur un lien?

    J’ai téléchargé le « js » et mis en place son lien dans le head :

    Puis j’ai mis en place la déclaration javascript « var mySound », avec le lien vers le fichier audio :

    var mySound = new buzz.sound( « mondossieraudio/monfichier.mp3 », {
    formats: [ « mp3 » ]
    });
    mySound.play()
    .fadeIn()
    .loop()
    .bind( « timeupdate », function() {
    var timer = buzz.toTimer( this.getTime() );
    document.getElementById( « timer » ).innerHTML = timer;
    });

    Et enfin, quand je mets en place un lien du type :
    mon lien
    il ne se passe strictement rien…

    Comment doit-on s’y prendre alors?

    Par avance merci pour toutes les informations et éclaicissements que vous voudrez bien me donner.
    Cordialement,
    Neum

    • Jerome

      Hello, je suppose qu’il faut retirer l’extension .mp3 lors de la déclaration de la variable mySound, si tu spécifies le type de fichier dans les options de format, comme tu l’as fait.

      De mon côté, j’ai deux autres soucis :

      1. j’ai plusieurs sons à jouer, et je voudrais passer en paramètre de la fonction d’appel (via onClick) l’URL de chaque son. Problème : l’URL source se définit en dehors de la fonction…

      2. lorsque je rejoue un son après l’avoir stopper, il faut que je clique deux fois avant qu’il ne se joue à nouveau.

      Une idée ?

      Merci d’avance !

  • Neum

    Oups, votre formulaire de commentaire a converti le code du lien…

    voici le code du lien qui ne fonctionne pas donc : (sans les balises ni les guillemets…)

    ahref = # onclick= mySound.play();