CORS Problem when playing Dropbox shared link mp3 file

[danioyuan]

Hi,

I'm trying to use Web Audio to adjust tune of a song. I can play the song through a Dropbox shared link using

<audio src="https://www.dropbox.com/s/[my shared link here]?dl=1"></audio>

However, when I connect the audio node to Web Audio context and try to play it, it gives me this error:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://www.dropbox.com/s/[my shared link here]?dl=1

I searched around and found that this CORS error is from the server side restrictions. Can you help me to resovle this? Thank you very much!

The javascript code is below:

<script>
  var audioContext = new (window.AudioContext || window.webkitAudioContext)();
  var audioNode = document.querySelector("audio");
  var playable = false;
  window.onload = function() {
    document.body.addEventListener("click", function() {
      if (playable) {
        audioNode.play();
      } else {
        audioNode.addEventListener("loadstart",      function(event) { console.log(event.type); });
        audioNode.addEventListener("loadedmetadata", function(event) { console.log(event.type); });
        audioNode.addEventListener("canplay",        function(event) { console.log(event.type);
          playable = true;
          audioContext.createMediaElementSource(audioNode).connect(audioContext.destination);
          audioNode.play();
        });
        audioNode.load();
      }
    });
  }
</script>

[Greg-DB · Accepted solution]

I can't speak to the behavior of AudioContext, but for reference, if you just use an audio tag by itself, this does work:

<audio controls src="https://www.dropbox.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"></audio>

For that kind of link, Dropbox will redirect the client, with the resulting URL containing the proper CORS headers.

If you do need to use AudioContext, it looks like there are two issues:

1) You have to specify crossOrigin, e.g., as covered here.

2) AudioContext apparently won't follow the redirects, so you need to give a direct URL. Dropbox does not officially support this, but it does currently work:

<audio crossorigin="anonymous" src="https://dl.dropboxusercontent.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"></audio>

<script>
  var audioContext = new (window.AudioContext || window.webkitAudioContext)();
  var audioNode = document.querySelector("audio");
  var playable = false;
  window.onload = function() {
    document.body.addEventListener("click", function() {
      if (playable) {
        audioNode.play();
      } else {
        audioNode.addEventListener("loadstart",      function(event) { console.log(event.type); });
        audioNode.addEventListener("loadedmetadata", function(event) { console.log(event.type); });
        audioNode.addEventListener("canplay",        function(event) { console.log(event.type);
          playable = true;
          audioContext.createMediaElementSource(audioNode).connect(audioContext.destination);
          audioNode.play();
        });
        audioNode.load();
      }
    });
  }
</script>

Again though, this isn't officially supported, so it's subject to change/break without warning, and accordingly I don't recommend you rely on it.