9/27/2018 - 6:51 AM



<!DOCTYPE html>
<html lang="en">
  <title>Xhr2 and binary files + Web Audio API</title>
  <p>Example of using Xhr2 and <code>xhr.responseType = 'arraybuffer';</code> to download a binary sound file
  and start playing it on user-click using the WebAudio API.</p>
   <h2>Load file using Ajax / Xhr2 and the arrayBuffer response type</h2>
  <button onclick="downloadSoundFile('');">Download and play example song</button>
    <button onclick="playSound()" disabled>Start</button>
  <button onclick="stopSound()" disabled>Stop</button>
  <progress id="downloadProgress" value=0></progress>
// WebAudio context
var context = new window.AudioContext();
var source = null;
var audioBuffer = null;
// progress element
var progress = document.querySelector('#downloadProgress');
function stopSound() {
  if (source) {

function playSound() {
  // Build a source node for the audio graph
  source = context.createBufferSource();
  source.buffer = audioBuffer;
  source.loop = false;
  // connect to the speakers
  source.start(0); // Play immediately.

function initSound(audioFile) {
  // The audio file may be a mp3, we must decode it before playing it from memory
  context.decodeAudioData(audioFile, function(buffer) {
    console.log("Song decoded!");
    // audioBuffer the decoded audio file we're going to work with
    audioBuffer = buffer;
    // Enable all buttons once the audio file is
    // decoded
    var buttons = document.querySelectorAll('button');
    buttons[1].disabled = false; // play
    buttons[2].disabled = false; // stop
    alert("Binary file has been loaded and decoded, use play / stop buttons!")
  }, function(e) {
    console.log('Error decoding file', e);

  // Load a binary file from a URL as an ArrayBuffer.
function downloadSoundFile(url) {
   var xhr = new XMLHttpRequest();'GET', url, true);

   xhr.responseType = 'arraybuffer'; // THIS IS NEW WITH HTML5!
   xhr.onload = function(e) {
      console.log("Song downloaded, decoding...");
      initSound(this.response); // this.response is an ArrayBuffer.
   xhr.onprogress = function(e) {
     progress.value = e.loaded;
     progress.max =;
   xhr.onerror = function(e) {
    console.log("error downloading file");

   console.log("Ajax request sent... wait until it downloads completely");