La méthode createMediaElementSource() de l’interface AudioContext est utilisée pour créer un nouvel objet MediaElementAudioSourceNode d’après un élément HTML <audio> ou <video> existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.

Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de MediaElementAudioSourceNode.

Syntaxe

var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);

Paramètres

myMediaElement
Un objet HTMLMediaElement que vous voulez injecter dans un graphe de traitement audio pour le manipuler.

Valeur de retour

Un MediaElementAudioSourceNode.

Exemple

Cet exemple simple crée une source depuis un élément <audio> grâce à createMediaElementSource(), puis passe le signal audio à travers un GainNode avant de l’injecter dans le AudioDestinationNode pour la lecture. Quand le pointeur de la souris est déplacé, la fonction updatePage() est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.

Note : Vous pouvez également voir cet exemple en temps réel, ou examiner le code source.

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

// Crée un MediaElementAudioSourceNode
// et y injecte le HTMLMediaElement
var source = audioCtx.createMediaElementSource(myAudio);

// Crée un nœud gain
var gainNode = audioCtx.createGain();

// Crée les variables pour stocker la position Y du pointeur
// et la HAUTEUR de l’écran
var CurY;
var HEIGHT = window.innerHeight;

// Récupère les nouvelles coordonnées du pointeur quand la souris est déplacée
// et définit la nouvelle valeur de gain

document.onmousemove = updatePage;

function updatePage(e) {
    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    gainNode.gain.value = CurY/HEIGHT;
}


// connecte le AudioBufferSourceNode au nœud gain
// et le nœud gain à la destination, de sorte qu’on puisse jouer la
// musique et ajuster le volume avec le curseur de la souris
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

Note : Du fait de l’appel à createMediaElementSource(), la lecture de l’audio du HTMLMediaElement est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.

Spécifications

Spécification Statut Commentaire
Web Audio API
La définition de 'createMediaElementSource()' dans cette spécification.
Version de travail  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple141225 Non156
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui14 Oui2615 ? Oui

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Watilin
Dernière mise à jour par : Watilin,