cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Are you interested in hearing how one of our Community members uses Dropbox for sailing trips? Read all about it here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

CORS Problem when playing Dropbox shared link mp3 file

CORS Problem when playing Dropbox shared link mp3 file

danioyuan
New member | Level 2
Go to solution

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>
1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to 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.

 

View solution in original post

1 Reply 1

Greg-DB
Dropbox Staff
Go to 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.

 

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
What do Dropbox user levels mean?