CODEWITHSUNDEEP
javascriptvideo-streaminghtml5-videohtml5-audioaudio-streaming
graystech
graystech

Reputation: 23

Is there a way I can play video audio out of either the left or right audio channels?

I am creating a custom video player using Javascript, HTML and CSS. The video player needs a feature in which the user can swap between the left and right audio channels. However, I noticed that the video properties do not seem to support L-R channel switching, is there a possible way I can work around this?

UPDATE I had originally not phrased the question as I should have (my bad). What I am trying to do is access the sounds on one channel and redirect them to play through both speakers. E.g. If I had a single audio file which contained rain forest noises and bird cheeps play through the left channel and frog croaks on the right channel, I would want to only play what is on the right channel e.g. the frog croaks.

UPDATE I am attempting to split the nodes however am struggling with the implementation, the example I found is for AudioBuffer and does not use an file. How do I get the audio context to use the audio file and set the destination of the manipulated back to that same audio file in a playable manner? I would ideally need to be able to have functions which could switch off either channel e.g. playFrogNoises() and playBirdNoises()

<body>
  <audio id="myAudio" src="audio/Squirrel Nut Zippers - Trou Macacq.mp3"></audio>
</body>
<script>
  var myAudio = document.getElementById('myAudio')
  var context = new AudioContext();
  var audioSource = context.createMediaElementSource(myAudio)
  var splitter = context.createChannelSplitter(2);
  audioSource.connect(splitter);
  var merger = context.createChannelMerger(2)

  //REDUCE VOLUME OF LEFT CHANNEL ONLY
  var gainNode = context.createGain();
  gainNode.gain.setValueAtTime(0.5, context.currentTime);
  splitter.connect(gainNode, 0);

  //CONNECT SPLITTER BACK TO SECOND INPUT OF THE MERGER
  gainNode.connect(merger, 0, 1);
  splitter.connect(merger, 1, 0);

  var destination = context.createMediaStreamDestination();

  merger.connect(destination)

  myAudio.play()

</script>

Upvotes: 2

Views: 1959

Answers (1)

Robert
Robert

Reputation: 2763

You have to use WebAudio Api with paneer node.

(or what you need, basically you can do everything with you audio channels in that way)

PannerNode

<video id="my-video" controls
       src="myvideo.mp4" type="video/mp4">
</video>

const context = new AudioContext(),
    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
    panner = context.createStereoPanner();
audioSource.connect(panner);
panner.connect(context.destination);

// Configure panner -1 left and 1 for right. 
panner.pan.setValueAtTime(-1, context.currentTime)

Upvotes: 1

Related Questions