HTML5 mobile: Play only one side of audio from a video stream on iOS

Question

I am trying to play a video on iOS while listening to only one side of the stereo audio.

Code below works fine on desktop Chrome but not on Safari on iPhone5 with 8.3 iOS.

var AudioContext = window.webkitAudioContext;
  var audioCtx = new AudioContext();
  var splitter = audioCtx.createChannelSplitter(2);
  var merger = audioCtx.createChannelMerger(1);

  source = audioCtx.createMediaElementSource(video);
  source.connect(splitter);
  splitter.connect(merger, 0); 
  merger.connect(audioCtx.destination);

'video' is the reference to the DOM video element.

Any help would be much appreciated

thanks, a lot

Sa'ar

Answer 1

Check what kind of audio context the device uses instead of using ||. For example:

var AudioContext 
if('webkitAudioContext' in window) {
   AudioContext = new webkitAudioContext();
}
else{
   AudioContext = new AudioContext ();
}

Answer 2

Here is a polyfill that checks whether Web audio exists and whether to use -webkit or not.

//borrowed from underscore.js
function isUndef(val){
    return val === void 0;
}

if (isUndef(window.AudioContext)){
    window.AudioContext = window.webkitAudioContext;
} 

if (!isUndef(AudioContext)){
    audioContext = new AudioContext();
} else {
    throw new Error("Web Audio is not supported in this browser");
}

Also there is a similar IOS error here that might help.