Tengo el siguiente código para un reproductor de audio simple con un controlador de equilibrio.
¿Cómo puedo crear dos jugadores que pueda controlar de forma independiente? (para que cada botón de panorama se aplique solo al reproductor adecuado).
¿Cuál es la forma más fácil de hacer esto?
<html> <button onclick="playPause()">play/pause</button> <br><br> <button onclick="setBalance(-1)">Left</button> <button onclick="setBalance(0)">Center</button> <button onclick="setBalance(+1)">Right</button> <script> const audioElement = new Audio("https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"); audioElement.crossOrigin = "anonymous"; // cross-origin - if file is stored on remote server const audioContext = new AudioContext(); const audioSource = audioContext.createMediaElementSource(audioElement); const volumeNodeL = new GainNode(audioContext); const volumeNodeR = new GainNode(audioContext); volumeNodeL.gain.value = 2; volumeNodeR.gain.value = 2; const channelsCount = 2; // or read from: 'audioSource.channelCount' const splitterNode = new ChannelSplitterNode(audioContext, { numberOfOutputs: channelsCount }); const mergerNode = new ChannelMergerNode(audioContext, { numberOfInputs: channelsCount }); audioSource.connect(splitterNode); splitterNode.connect(volumeNodeL, 0); // connect OUTPUT channel 0 splitterNode.connect(volumeNodeR, 1); // connect OUTPUT channel 1 volumeNodeL.connect(mergerNode, 0, 0); // connect INPUT channel 0 volumeNodeR.connect(mergerNode, 0, 1); // connect INPUT channel 1 mergerNode.connect(audioContext.destination); let isPlaying; function playPause() { // check if context is in suspended state (autoplay policy) if (audioContext.state === 'suspended') { audioContext.resume(); } isPlaying = !isPlaying; if (isPlaying) { audioElement.play(); } else { audioElement.pause(); } } function setBalance(val) { volumeNodeL.gain.value = 1 - val; volumeNodeR.gain.value = 1 + val; } </script>