Arts numériques

Sans jQuery

JQuery est une librairie puissante et assez complète, mais s’il s’agit de produire des scripts simples, on a parfois l’impression de prendre un bazooka pour tuer des mouches. Un script simple comme celui qui suit peut être fait de manière rapide, en javascript "pur".

Le html

Vous devez disposer d’un son court pour réaliser cet exercice. J’ai été en chercher un sur la bibliothèque de la BBC, en affichant les sons par durée.

<audio controls id="bip">
    <source src="bip.wav" type="audio/wav">
</audio>

l’attribut "controls" dans le tag audio est ce qui fait apparaitre le lecteur. Pour en savoir plus àce sujet, lire l’article sur la balise audio sur ce site.
En appuyant sur le bouton play, on peut tester le son, vérifier que tout se passe bien àce stade.

Déclencher avec javascript

Nous allons maintenant créer un bouton, qui devra déclencher le son. Nous avons ajouté un id au tag audio pour facilement y accéder.

<audio controls id="bip">
    <source src="bip.wav" type="audio/wav">
</audio>
<bouton onclick="joueson()">Jouer le son</bouton>
<script>
    function joueson(){
        // atteindre l'élément par son id
        var leson=document.getElementById("bip");
        // jouer le son
        leson.play();
    }
</script>

Le problème de ce code est qu’une fois le son joué, il ne se passe plus rien quand on clique ànouveau sur le bouton. La tête de lecture du son ne revient pas automatiquement au début de celui-ci. On va donc ajouter un ligne qui met le son au début du fichier chaque fois que le bouton est cliqué.

<audio controls id="bip">
    <source src="bip.wav" type="audio/wav">
</audio>
<bouton onclick="joueson()">Jouer le son</bouton>
<script>
    function joueson(){
        // atteindre l'élément par son id
        var leson=document.getElementById("bip");
        // remettre le son au début
        leson.currentTime=0;
        // jouer le son
        leson.play();
    }
</script>

Et voilà. Il suffit de cacher le lecteur en retirant l’attribut "controls" et le lecteur disparait, laissant seul le bouton.

Une version du code pour plusieurs boutons
Il est possible de faire facilement une version de ce code qui permettent de déclencher différentes balises audio àpartir de la même fonction.

Il suffit de transmettre l’id du tag audio que l’on veut déclencher dans l’appel de la fonction, comme ceci :

<audio controls id="bip">
    <source src="bip.wav" type="audio/wav">
</audio>
<audio controls id="honk">
    <source src="honk.wav" type="audio/wav">
</audio>
<bouton onclick="joueson('bip')">Biiip</bouton>
<bouton onclick="joueson('honk')">Hooonk</bouton>

<script>
    function joueson(tag){
        // atteindre l'élément par son id
        var leson=document.getElementById(tag);
        // remettre le son au début
        leson.currentTime=0;
        // jouer le son
        leson.play();
    }
</script>