AudioContext.createMediaElementSource()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

js
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

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.

js
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

Specification
Web Audio API
# dom-audiocontext-createmediaelementsource

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi