jaudioPlayer

Présentation

jaudioPlayer est un plugin jQuery qui propose une interface web de lecture pour les balises audio HTML5 :

[Evapoa] - dead joshua

Ce plugin a été développé dans un premier temps pour l'association Revolution Sound Records, pour la lecture des morceaux sur son site. Il s'inspire d'Audiojs, qui a été envisagé un moment pour l'association.

Ce plugin s'inspire aussi du thème pour Audiojs développé par Whiteshoulders, pour les players audio sur son site.

Fonctionnalités

• Utilise exclusivement le support natif des navigateurs sur les balises audio (pas de flash. si le navigateur ne supporte pas les formats proposés, les players ne sont pas activés)
• Une waveform (non générée par le plugin) peut être affichée dans la barre de progression
• La lecture d'un morceau peut démarrer à un moment choisi, au clique sur la barre de progression
• arrêt d'un player si la lecture est démarrée sur un autre
• Paramètre pour activer ou non la lecture automatique du morceau suivant
• Paramètre loop pour boucler

Installation

1. L'archive jaudio-player.<version>.tar.gz fourni un dossier jaudio-player.<version>
2. ce dossier contient un exemplaire de cette page et un sous-dossier jaudio-player
3. copiez ce sous-dossier jaudio-player dans le dossier contenant votre document HTML (*)
4. Dans l'entête de votre document HTML, incluez JQuery, le script de jaudioPlayer et sa feuille de styles

   <script type="text/javascript" src="jaudio-player/jquery-1.9.1.min.js"></script>
   <script type="text/javascript" src="jaudio-player/jaudio-player.1.1.js"></script>
   <link rel="stylesheet" type="text/css" href="jaudio-player/jaudio-player.1.1.css" />

(*) Dans sa configuration par défaut, le plugin s'attend à trouver les fichiers

• jaudio-player/jap-graphics.png pour les boutons du player
• jaudio-player/jap-loading.gif pour l'image de chargement

Si vous voulez utiliser d'autres images ou les placer ailleurs, précisez les chemin dans les paramètres.

Utilisation

Crée un player sur toutes les balises audio du document :

$(document).ready(
  function(){
    $("audio").jaudioPlayer();
  }
);

Crée un player sur les balises audio qui ont une classe player :

$(document).ready(
  function(){
    $("audio.player").jaudioPlayer();
  }
);

Paramètres

Appeler la fonction jaudioPlayer sans paramètre revient à l'appeler avec ses paramètres par défaut :

$(document).ready(
  function(){
    $("audio").jaudioPlayer({
      "player_graphics": "jaudio-player/jap-graphics.png",
      "loading_img": "jaudio-player/jap-loading.gif",
      "auto_play_next_track": false,
      "loop": false,
      "waveform_class": ""
    });
  }
);

player_graphics

le fichier image pour les boutons play, pause et stop

loading_img

le fichier pour l'image d'attente

auto_play_next_track

lorsqu'une lecture se termine, la lecture reprend sur le player suivant

loop

lorsque la lecture sur le dernier player se termine, la lecture reprend sur le premier. si loop vaut true, les lectures s'enchaînent et la valeur pour auto_play_next_track est ignorée

waveform_class

le player peut afficher une waveform dans la barre de défilement. Si un nom de classe est précisé pour waveform_class, le player cherchera une balise img avec cette classe, dans la balise audio. si la balise est trouvée, l'image est utilisée pour afficher une waveform.

$(document).ready(
  function(){
    $("audio").jaudioPlayer({
      "waveform_class": "my_waveform_class"
    });
  }
);

<audio>
  <source src="http://some.domaine.tld/audio_file.ogg" type="audio/ogg">
  <img class="my_waveform_class" src="http://some.domaine.tld/waveform_file.png" alt="waveform" />
</audio>

Fonctions

set_option: function(option_name, value)

affecte la valeur value au paramètre option_name

$(document).ready(
  function(){

    // creation des players avec les parametres par defaut
    $("audio").jaudioPlayer();

    // passe le parametre loop a true
    $("audio").jaudioPlayer("set_option", "loop", true);

  }
);

get_option: function(option_name)

retourne la valeur pour le parametrètre option_name

resize: function()

réajuste les waveforms à la taille de la barre de progression

$(document).ready(
  function(){
    $("audio").jaudioPlayer({
      "waveform_class": "waveform"
    });
    $(window).resize(
      function(){
        $("audio").jaudioPlayer("resize");
      }
    );
  }
);