Play oscillator in left/right channel with Web Audio Api, Ionic and Crosswalk

Question

I want to play an oscillator in left, right or both channel and to achieve this i use the StereoPannerNode from the Web Audio Api. When i run "ionic serve" on Chrome everything works fine, but when i test the code on Android (i installed the crosswalk plugin) the sound comes from both channels (lower in the channel i don't want the sound to play).

I also tried Merger and Splitter nodes with the same results: works on Chrome, doesn't work on Android.

I tried to use Asus ZenFone with Android 4.4.2 and Huawei p8 with Android 6.0.

This is how i create my audio context and the panner node.

var contextClass = (window.AudioContext);
var audioCtx = new contextClass();
var panNode = audioCtx.createStereoPanner();

I don't know how to fix this, any idea?

score 0 · Answer 1 · edited Mar 23 '17 at 03:04

On Android 6.0, the following script works. It makes use of the Web Audio API. I have not yet tested it on iOS, but I have a good feeling it will work there (please comment if it does not).

You need an "omg.mp3" file in your root directory to test with. You also should build using Cordova and not worry about the CORS or Same-domain error you might get in your browser

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>StereoPannerNode example</title>

    <link rel="stylesheet" href="">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>StereoPannerNode example</h1>
    <audio controls>  
      <source src="omg.mp3" type="audio/mp3">   
      <p>Browser too old to support HTML5 audio? How depressing!</p>
    </audio>
    <h2>Set stereo panning</h2>
    <input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
    <span class="panning-value">0</span>

  </body>
<script>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');

var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');


// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a stereo panner
var panNode = audioCtx.createStereoPanner();

// Event handler function to increase panning to the right and left
// when the slider is moved

panControl.oninput = function() {
  panNode.pan.value = panControl.value;
  panValue.innerHTML = panControl.value;
}

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);
  </script>
</html>

Play oscillator in left/right channel with Web Audio Api, Ionic and Crosswalk

1 Answers1