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
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.
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