Fetch arrayBuffer example

    // define variables
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var source;

    var pre = document.querySelector('pre');
    var myScript = document.querySelector('script');
    var play = document.querySelector('.play');
    var stop = document.querySelector('.stop');
    var errorDisplay = document.querySelector('.error');

    // use fetch to load an audio track, and
    // decodeAudioData to decode it and stick it in a buffer.
    // Then we put the buffer into the source
    function getData() {
      source = audioCtx.createBufferSource();

      return fetch('viper.ogg')
      .then(function(response) {
        if (!response.ok) {
          throw new Error("HTTP error, status = " + response.status);
        }
        return response.arrayBuffer();
      })
      .then(function(buffer) {
        audioCtx.decodeAudioData(buffer, function(decodedData) {
          source.buffer = decodedData;
          source.connect(audioCtx.destination);
        });
      });
    };

    // wire up buttons to stop and play audio
    play.onclick = function() {
      getData()
      .then(function() {
        errorDisplay.innerHTML = '';
        source.start(0);
        play.disabled = true;
      })
      .catch(function(error) {
        errorDisplay.appendChild(
          document.createTextNode('Error: ' + error.message)
        );
      });
    };

    stop.onclick = function() {
      source.stop(0);
      play.disabled = false;
    };

    // dump script to pre element
    pre.innerHTML = myScript.innerHTML;