<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: CORS Problem when playing Dropbox shared link mp3 file in Dropbox API Support &amp; Feedback</title>
    <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/CORS-Problem-when-playing-Dropbox-shared-link-mp3-file/m-p/285952#M17543</link>
    <description>&lt;P&gt;I can't speak to the behavior of&amp;nbsp;AudioContext, but for reference, if you just use an audio tag by itself, this does work:&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;PRE&gt;&amp;lt;audio controls src="https://www.dropbox.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"&amp;gt;&amp;lt;/audio&amp;gt;&lt;/PRE&gt;
&lt;P&gt;For that kind of link,&amp;nbsp;Dropbox will redirect the client, with the resulting URL containing the proper CORS headers.&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;If you do need to use&amp;nbsp;&lt;SPAN&gt;AudioContext, it looks like there are two issues:&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&lt;SPAN&gt;1) You have to specify&amp;nbsp;crossOrigin, e.g., &lt;A href="https://stackoverflow.com/questions/31308679/mediaelementaudiosource-outputs-zeros-due-to-cors-access-restrictions-local-mp3#32514394" target="_self"&gt;as covered here&lt;/A&gt;.&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&lt;SPAN&gt;2)&amp;nbsp;AudioContext apparently won't follow the redirects, so you need to give a direct URL.&amp;nbsp;Dropbox does not officially support this, but it does currently work:&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;PRE&gt;&amp;lt;audio crossorigin="anonymous" src="https://dl.dropboxusercontent.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"&amp;gt;&amp;lt;/audio&amp;gt;

&amp;lt;script&amp;gt;
  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();
      }
    });
  }
&amp;lt;/script&amp;gt;&lt;/PRE&gt;
&lt;P&gt;&lt;SPAN&gt;Again though, this isn't officially supported, so it's subject to change/break without warning, and accordingly I&amp;nbsp;don't recommend you rely on it.&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
    <pubDate>Mon, 23 Jul 2018 19:54:13 GMT</pubDate>
    <dc:creator>Greg-DB</dc:creator>
    <dc:date>2018-07-23T19:54:13Z</dc:date>
    <item>
      <title>CORS Problem when playing Dropbox shared link mp3 file</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/CORS-Problem-when-playing-Dropbox-shared-link-mp3-file/m-p/285942#M17539</link>
      <description>&lt;P&gt;Hi,&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I'm trying to use Web Audio to adjust tune of a song. I can play the song through a Dropbox shared link using&lt;/P&gt;&lt;P&gt;&amp;lt;audio src="&lt;A href="https://www.dropbox.com/s/[my" target="_blank"&gt;https://www.dropbox.com/s/[my&lt;/A&gt; shared link here]?dl=1"&amp;gt;&amp;lt;/audio&amp;gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;However, when I connect the audio node to Web Audio context and try to play it, it gives me this error:&lt;/P&gt;&lt;P&gt;MediaElementAudioSource outputs zeroes due to CORS access restrictions for &lt;A href="https://www.dropbox.com/s/" target="_blank"&gt;https://www.dropbox.com/s/&lt;/A&gt;&lt;SPAN&gt;[my shared link here]&lt;/SPAN&gt;?dl=1&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;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!&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;The javascript code is below:&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&amp;lt;script&amp;gt;&lt;BR /&gt;  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();
      }
    });
  }
&amp;lt;/script&amp;gt;&lt;/PRE&gt;</description>
      <pubDate>Wed, 29 May 2019 09:11:41 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/CORS-Problem-when-playing-Dropbox-shared-link-mp3-file/m-p/285942#M17539</guid>
      <dc:creator>danioyuan</dc:creator>
      <dc:date>2019-05-29T09:11:41Z</dc:date>
    </item>
    <item>
      <title>Re: CORS Problem when playing Dropbox shared link mp3 file</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/CORS-Problem-when-playing-Dropbox-shared-link-mp3-file/m-p/285952#M17543</link>
      <description>&lt;P&gt;I can't speak to the behavior of&amp;nbsp;AudioContext, but for reference, if you just use an audio tag by itself, this does work:&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;PRE&gt;&amp;lt;audio controls src="https://www.dropbox.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"&amp;gt;&amp;lt;/audio&amp;gt;&lt;/PRE&gt;
&lt;P&gt;For that kind of link,&amp;nbsp;Dropbox will redirect the client, with the resulting URL containing the proper CORS headers.&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;If you do need to use&amp;nbsp;&lt;SPAN&gt;AudioContext, it looks like there are two issues:&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&lt;SPAN&gt;1) You have to specify&amp;nbsp;crossOrigin, e.g., &lt;A href="https://stackoverflow.com/questions/31308679/mediaelementaudiosource-outputs-zeros-due-to-cors-access-restrictions-local-mp3#32514394" target="_self"&gt;as covered here&lt;/A&gt;.&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&lt;SPAN&gt;2)&amp;nbsp;AudioContext apparently won't follow the redirects, so you need to give a direct URL.&amp;nbsp;Dropbox does not officially support this, but it does currently work:&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;PRE&gt;&amp;lt;audio crossorigin="anonymous" src="https://dl.dropboxusercontent.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"&amp;gt;&amp;lt;/audio&amp;gt;

&amp;lt;script&amp;gt;
  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();
      }
    });
  }
&amp;lt;/script&amp;gt;&lt;/PRE&gt;
&lt;P&gt;&lt;SPAN&gt;Again though, this isn't officially supported, so it's subject to change/break without warning, and accordingly I&amp;nbsp;don't recommend you rely on it.&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Mon, 23 Jul 2018 19:54:13 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/CORS-Problem-when-playing-Dropbox-shared-link-mp3-file/m-p/285952#M17543</guid>
      <dc:creator>Greg-DB</dc:creator>
      <dc:date>2018-07-23T19:54:13Z</dc:date>
    </item>
  </channel>
</rss>

