Un lecteur audio "vanilla" (sans librairie)

Ce script utilise des fonctions natives de javascript pour créer un lecteur audio.

Usage

Le code est placé dans le fichier javascript.js. Ce fichier doit être chargé à la fin de la page, après tout le code html.

Pour activer le lecteur, il est nécessaire de préparer le html avec cette structure :

<div class="lecteur">
        <audio controls>
          <source src="groove.mp3" type="audio/mp3">
          Your browser does not support the audio element.
        </audio>
      </div>

Le script détecte la classe "lecteur" et crée des éléments html supplémentaires à l’intérieur de celui-ci, dont les boutons de lecture.

Voici sa structure :

CSS

Le fichier css est volontairement vide, et comporte juste les classes principales associées au lecteur.

Plusieurs sons

Le code supporte plusieurs lecteurs. Ils auront tous le même comportement css de base, à vous de les dissocier en utilisant d’autres id et classes associé à l’élément "lecteur".