WEBSOUNDS

Ressources

Une connaissance de base du HTML, CSS et javascript est requise.

Le site Mozilla developper network est une ressource extrêmement complète sur l’audio et la video: Mozilla developper network

Exemples sonores

  • 00 Lecteur audio avec controls, autoplay & loop
  • 01 Lecteur audio controlé par javascript avec bouton personnalisé
  • 02 Multiples lecteurs audio controlés par javascript
  • 03 Multiples lecteurs audio controlés par javascript + random
  • 04 Multiples lecteurs audio controlés par javascript + random + couleur
  • 05 Variation de la vitesse de lecture
  • 06 Audio “autoplay”, avec bouton personnalisé et position de démarrage spécifique

Voir plus d’exemples dans la section dédiée du site.

HTML

Audio & video

La balise <audio> permet l’intégration d’un fichier son.

<audio src="sons/fichier.mp3" controls autoplay loop >

La balise <video> permet l’intégration d’un fichier vidéo : )

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Votre navigateur ne gère pas l'élément video
</video>

Elles permettent de déterminer le chemin vers le fichier (ou les fichiers) et des propriétés du lecteur audio ou video : affichage des éléments d’interface, autoplay (n’a pas d’effet sur mobile) et la lecture en boucle.

Pour une plus ample référence, voir MDN

Compatibilité

Les navigateurs web acceptent des formats de fichiers différents ; on peut donc, pour maximiser la compatibilité fournir les différents fichiers : mp3 et ogg pour l’audio, webm et mp4 pour la video.

<audio controls>
   <source src="elvis.mp3" type='audio/mpeg'>
   <source src="elvis.oga" type='audio/ogg'>
</audio>

<video controls>
    <source src="elvis.webm" type='video/webm'/>
    <source src="elvis.mp4" type='video/mp4'/>
</video>

Services web : Youtube & co.

Il est possible d’intégrer des vidéos depuis les principaux services d’hébergement audio ou vidéos : soundclound, youtube, vimeo, dailymotion…

Généralement, un code d’intégration est accessible en cliquant sur partager / intégrer. Le code est celui d’une iframe.

<iframe 
    src="https://player.vimeo.com/video/97605737" 
    width="640" height="360" frameborder="0" 
    webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>            
<!-- vimeo -->

<iframe 
    width="400" height="300" 
    src="https://www.youtube.com/embed/8xfoPxM9AO4" 
    frameborder="0" gesture="media" allowfullscreen></iframe>
<!-- youtube -->

Ces vidéos ne sont pas facilement controlables par la page web hôte, mis à part en utilisant une librairie telle que Plyr.

Javascript

Contrôler le son

Une fois le média intégré dans le document HTML on peut les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer la lecture :

<video id="mavideo" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"></video>
const vid = document.querySelector("#mavideo");
vid.play();

Évènements

L’élément vidéo émet des évènements : canplay, ended, timeupdate…

Plus d’infos sur MDN…

var vid = document.querySelector("#mavideo");
vid.addEventListener('ended', function(){
    alert('The end');
});

// écrit la position de la vidéo dans un <div id="current">>
vid.addEventListener( "timeupdate", function(event){
    document.querySelector("#current").text(this.currentTime + ' / ' + this.duration)
});

Exemple de player

Voir exemple simple

Html

<div id="player">
    <audio src="audio/WoodyGuthrie-TomJoad.mp3" id="audioplayer" autoplay></audio>
    <div id="playpause" class="play"></div>
</div>

Javascript

var player = document.getElementById('audioplayer');
var playpause = document.getElementById('playpause');
var playing = true;
playpause.addEventListener('click', function(){
    if (playing) {
        playpause.className='pause';
        player.pause();
    } else {
        playpause.className='play';
        player.play();
    }
    playing = !playing;
})

Web Audio Api

HTML5 permet aujourd’hui de manipuler l’audio via l’API Web audio

La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc. source

Howler.js

Une librairie, Howler.js permet de manipuler simplement l’audio dans le navigateur

<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

<script>
    var sound = new Howl({
    src: ['sound.webm', 'sound.mp3', 'sound.wav'],
    autoplay: true,
    loop: true,
    volume: 0.5,
    onend: function() {
        console.log('Finished!');
    }
});

Exemples (sur howlerjs.com)