Web Audio Playback

by juberti

HTML

<button onclick="play();">Play</button>
<ul id="result">
</ul>

JavaScript

function play() {

        var resultList = document.getElementById('result');
        var startTime = (new Date()).getTime();
        var lastTime = startTime;

        function addResult(message) {
          var li = document.createElement('li');

          var time = (new Date()).getTime();
          var timeTaken = time - lastTime;

          lastTime = time;
          message += ' (' + timeTaken + 'ms)';

          li.innerHTML = message;
          resultList.appendChild(li);
        };

        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        addResult('AudioContext created');
        addResult('Max Channel Count = ' + audioCtx.destination.maxChannelCount);

        var source;



        // use XHR 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();
          var request = new XMLHttpRequest();

          request.open('GET', 'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3', true);

          request.responseType = 'arraybuffer';


          request.onload = function() {
            addResult('Request onload triggered');
            var audioData = request.response;

            addResult('Calling decodeAudioData now');
            audioCtx.decodeAudioData(audioData, function(buffer) {
              addResult('decodeAudioData callback fired');

                source.buffer = buffer;

                addResult('About to call "connect"');
                source.connect(audioCtx.destination);
                addResult('"connect" called');
                source.loop = true;

                source.start(0);
                addResult('Audio started');
              },

              function(e){
                addResult('ERROR! / "Error with decoding audio data' + e.err);
              });
          }

          addResult('About...