Multi-sound

Here is a sample code for playing multi-sound in an app with Web Audio API and audio element. This sample is to show how to initialize Web Audio API as well as handling app visibility in webOS TV. On app suspend, pause audio element (background music) and stop all Web Audio API sounds (sound effects). When the app goes back to the foreground, resume the background music.

We recommend you to use the following sample code. If not, audio resource conflict may occur, and audio sound may not be played on app switching at Launcher UI.

Handling App Visibility

This code is for guiding how to handle playing sounds in an app when the app goes to the background and comes back to the foreground. This part should be necessarily included in your code so that your app plays sound normally on app switching. For the detailed guide on how to handle the app visibility change in webOS TV, you should see Managing App Visibility in App Lifecycle.

[index.html]

// Set the name of the "hidden" property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {   // To support the standard web browser engine
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {   // To support the webkit engine
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
....

function initAudioElement() {
  // Handle page visibility change 
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
}

...
// On app suspend, pause the audio element and stop all web audio api sounds
function suspend() {
  var audioElement = document.getElementById("audioElement");
  audioElement.pause();
  source.stopAll();
}

function resume() {
  var audioElement = document.getElementById("audioElement");
  audioElement.play();
}

// If the page is hidden, pause the audio
// if the page is shown, play the audio
function handleVisibilityChange() {
  if (document[hidden]) {
    console.log("app suspend");
    suspend();
  } else {
    console.log("app resume");
    resume();
  }
}

Initializing and Using Web Audio API

You need to create the AudioContext object and use AudioContext.decodeAudioData() method to decode each sound file.

[index.html]

function initWebAudio() {
  var sounds = ["./sounds/shutter.wav",
                "./sounds/camstart.wav",
                "./sounds/camstop.wav",
                "./sounds/strings3.wav" ];
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  context = new AudioContext();
  source = new SoundSource(context, sounds, finishedLoading);
}
...

function finishedLoading(bufferList) {
  // Create two sources and play them both together.
}

[soundEffet.js]

function SoundSource (context, urlList, callback) {
  this.context = context;
  this.urlList = urlList;
  this.onload = callback;
  this.bufferList = new Array();
  this.sound = new Array();
  this.soundBuf = new Array();
  this.loadCount = 0;

  this.load();

  var loader = this;
}

SoundSource.prototype.loadBuffer = function(url, index) {
  // Load buffer asynchronously
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.responseType = "arraybuffer";

  var loader = this;

  request.onload = function() {
    // Asynchronously decode the audio file data in request.response
    loader.context.decodeAudioData(
      request.response,
      function(buffer) {
        if (!buffer) {
          console.log('error decoding file data: ' + url);
          return;
        }
        loader.bufferList[index] = buffer;
        loader.prepareSound(index);
        loader.sound[index] = null;
        if ((++loader.loadCount == loader.urlList.length) && (loader.onload != null))
          loader.onload(loader.bufferList);
      }
    );
  };

  request.onerror = function() {
    console.log('BufferLoader: XHR error');
  };

  request.send();
};

SoundSource.prototype.prepareSound = function(index) {
  this.soundBuf[index] = this.context.createBufferSource();
  this.soundBuf[index].buffer = this.bufferList[index];
  this.soundBuf[index].connect(this.context.destination);
};

SoundSource.prototype.load = function() {
  for (var i = 0; i < this.urlList.length; ++i)
    this.loadBuffer(this.urlList[i], i);
};

SoundSource.prototype.start = function(index) {
  this.stop(index);
  this.soundBuf[index].start(0);
  this.sound[index] = this.soundBuf[index];

  this.prepareSound(index);
};

...

Playing Background Music and Sound Effects

Play background music with the audio element, and sound effects by calling functions that are using Web Audio API.

[index.html]

<head><script>
...
function takePicture() {
  source.start(0);
}

function startRecording() {
  source.start(1);
}

function stopRecording() {
  source.start(2);
}

function playLongSound() {
  source.start(3, false);
}
...
<body onload="initPage()>
  <audio id="audioElement" controls autoplay loop>
    <source src="./sounds/demo_secret_garden.mp3" type="audio/mp3">
  </audio><br><br>

  <h1>webaudio source</h1>
  <input type="button" value="Take Picture" onclick="takePicture();" style="font-size:20px;"></input><br>
  <input type="button" value="Start Recording" onclick="startRecording();" style="font-size:20px;"></input><br>
  <input type="button" value="Stop Recording" onclick="stopRecording();" style="font-size:20px;"></input><br>
  <input type="button" value="Play Long Sound" onclick="playLongSound();" style="font-size:20px;"></input><br>

Download

For your understanding on the multi-sound in the webOS TV app, you can download the sample code and its IPK file at the below link for free.

Result in the webOS TV Emulator 

You can install the sample app and check the sample app in the webOS TV emulator as below image.