WEBSOUNDS

Websounds

Ressources

Exemples

Exemples sonores

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>

Youtube & co.

Services web

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.

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 :

// html : <video id="mavideo" (…)></video>
var qs_v = document.querySelector("#mavideo");
qs_v.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 Voir l’exemple avancé

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