REGRESSION: CrossOrigin Audio with WebAudio API not working with Soundcloud 
https://bugs.webkit.org/show_bug.cgi?id=195043
Summary REGRESSION: CrossOrigin Audio with WebAudio API not working with Soundcloud
Gregg Tavares
Reported 2019-02-26 03:47:41 PST
Sometime between I think October and now Safari stopped working with the WebAudio API and Soundcloud for me. I spent some time putting together a repo. Here's a relatively simple example https://greggman.github.io/doodles/test/safari-soundcloud-webaudio-issue/safari-soundcloud-webaudio-issue.html All it does is setup an audio tag, and the WebAudio API to a visualization of the FFT data from the WebAudio API and it uses either an mp3 from twgljs.org or from soundcloud.com (with permission and CORS headers set in both cases). PS: My client id is in the sample. Please don't abuse it Trie both Safari 12 and Tech Preview REPO: Before clicking start UNCHECK the "Use Soundcloud" box. In this case it will use an mp3 file from https://twgljs.org (so the file is cross origin) You'll see it works. Now refresh the page, this time leave the "Use Soundcloud" box checked, click start. In this case it will ask soundcloud for the url for a track on their site. It will then use that URL on an audio.src (same as the code above) You'll hear like 0.1 second of the audio and then nothing. If you check the audio.currentTime you'll see it's incrementing Note: This works in Firefox and Chrome and it used to work in Safari on both MacOS and iOS last summer. Sometime since then it broke. I have didn't have time to make a small repo until now. Here's the network requests/responses if they are helpful When using twgljs.org for the mp3 ---------- Request :method: GET :scheme: https :authority: twgljs.org :path: /examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3 Accept: */* Origin: http://localhost:8080 Connection: keep-alive Range: bytes=0-1 Host: twgljs.org Accept-Language: en-us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.2 Safari/605.1.15 Referer: http://localhost:8080/safari-webaudio-issue.html Accept-Encoding: identity X-Playback-Session-Id: 46C03A8D-36FF-48B6-8870-D4FF43B26DE9 Response :status: 206 Content-Type: audio/mp3 Access-Control-Allow-Origin: * Set-Cookie: __cfduid=d2271506b3da4905171db469d919ae8151551177241; expires=Wed, 26-Feb-20 10:34:01 GMT; path=/; domain=.twgljs.org; HttpOnly Expires: Tue, 26 Feb 2019 10:44:01 GMT Cache-Control: max-age=600 Date: Tue, 26 Feb 2019 10:34:01 GMT Content-Length: 2 ETag: "5c7430da-7c1727" Content-Range: bytes 0-1/8132391 Last-Modified: Mon, 25 Feb 2019 18:15:54 GMT Server: cloudflare x-github-request-id: DBBC:6671:8529F:AFBA6:5C751619 expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" cf-ray: 4af1c1bcde9da5fc-NRT Request :method: GET :scheme: https :authority: twgljs.org :path: /examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3 Accept: */* Origin: http://localhost:8080 Connection: keep-alive Range: bytes=0-65535 Host: twgljs.org Accept-Language: en-us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.2 Safari/605.1.15 Referer: http://localhost:8080/safari-webaudio-issue.html Accept-Encoding: identity X-Playback-Session-Id: 46C03A8D-36FF-48B6-8870-D4FF43B26DE9 Response :status: 206 Content-Type: audio/mp3 Access-Control-Allow-Origin: * Set-Cookie: __cfduid=d2271506b3da4905171db469d919ae8151551177241; expires=Wed, 26-Feb-20 10:34:01 GMT; path=/; domain=.twgljs.org; HttpOnly Expires: Tue, 26 Feb 2019 10:44:01 GMT Cache-Control: max-age=600 Date: Tue, 26 Feb 2019 10:34:01 GMT Content-Length: 65536 ETag: "5c7430da-7c1727" Content-Range: bytes 0-65535/8132391 Last-Modified: Mon, 25 Feb 2019 18:15:54 GMT Server: cloudflare x-github-request-id: DD04:5D7B:1F71C4:29350E:5C751619 expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" cf-ray: 4af1c1bfcafea5fc-NRT ---------- When using soundcloud for the mp3 Request GET /tracks/113332220/stream Accept: */* Range: bytes=0-1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.2 Safari/605.1.15 Referer: http://localhost:8080/safari-webaudio-issue.html Accept-Encoding: identity Connection: Keep-Alive Origin: http://localhost:8080 X-Playback-Session-Id: 3C505FFB-790C-4469-8131-090181944003 Redirect Response 302 Moved Temporarily Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, PUT, POST, DELETE Access-Control-Expose-Headers: Date Access-Control-Allow-Headers: Accept, Authorization, Content-Type, Origin Cache-Control: no-cache Location: https://cf-media.sndcdn.com/93KvqnPvC3eJ.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vOTNLdnFuUHZDM2VKLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1NTExNzc5NzR9fX1dfQ__&Signature=p31o0i2YMOu2q9vcZzOe-BaeKKYl~6JEEUmPyzeVA127VwLcqDlMnhJCzSXeQiSgzI4VD5NpBVsVc1wwZ14eTo8R47268qMsQVO6nCG6PWUvGPe2X1ZR14zrIMOuybp9toUeCjQy6fU1Kl5OCUMuZ2XWo6rm0GMT3xYd~AcX9UCcJGgjlCb25zypDn4MI7hH0rtPd5utFepIg9xTDIMuPnmOzOZ2Rg7jbGdW1D4wSnBcyDlz2OGBtrqrbmOS~l9uEwGIY4CE-luNOHyAx2vgSy3iga0~muoAGzigxrUbAAXMRJMYNy~RaLSkuYoivtwpVHlgFL-Rs8EzT~ZW2ogBsg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ Date: Tue, 26 Feb 2019 10:40:35 GMT Request GET /93KvqnPvC3eJ.128.mp3 HTTP/1.1 Accept: */* Origin: null Range: bytes=0-1 Host: cf-media.sndcdn.com User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.2 Safari/605.1.15 Referer: http://localhost:8080/safari-webaudio-issue.html Connection: keep-alive X-Playback-Session-Id: 3C505FFB-790C-4469-8131-090181944003 Response HTTP/1.1 206 Partial Content Access-Control-Allow-Methods: GET Cache-Control: max-age=252460800 Accept-Ranges: bytes Access-Control-Allow-Origin: * Content-Length: 2 Via: 1.1 6dd1fb730ba34e9c2dcda211a88fd854.cloudfront.net (CloudFront) Date: Tue, 26 Feb 2019 09:11:12 GMT Connection: keep-alive Age: 5364 Access-Control-Max-Age: 3000 Content-Type: audio/mpeg ETag: "002b0b87588401d0369537da6257085e" Content-Range: bytes 0-1/3501243 Last-Modified: Thu, 16 Jun 2016 01:15:28 GMT Server: AmazonS3 x-amz-meta-job: 93KvqnPvC3eJ x-amz-meta-duration: 218848 x-amz-meta-bitrate: 128 x-amz-server-side-encryption: AES256 X-Amz-Cf-Id: gHrglde0jt5570Ib1n3zDO7DiwwaSkungZBOo1bj0qjc2Xy7CEWyrw== x-amz-version-id: r99TAWvBU6m9Vz73goT02AgaTx.kVOEy X-Cache: Hit from cloudfront Query String Parameters Policy: eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vOTNLdnFuUHZDM2VKLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1NTExNzc5NzR9fX1dfQ__ Signature: p31o0i2YMOu2q9vcZzOe-BaeKKYl~6JEEUmPyzeVA127VwLcqDlMnhJCzSXeQiSgzI4VD5NpBVsVc1wwZ14eTo8R47268qMsQVO6nCG6PWUvGPe2X1ZR14zrIMOuybp9toUeCjQy6fU1Kl5OCUMuZ2XWo6rm0GMT3xYd~AcX9UCcJGgjlCb25zypDn4MI7hH0rtPd5utFepIg9xTDIMuPnmOzOZ2Rg7jbGdW1D4wSnBcyDlz2OGBtrqrbmOS~l9uEwGIY4CE-luNOHyAx2vgSy3iga0~muoAGzigxrUbAAXMRJMYNy~RaLSkuYoivtwpVHlgFL-Rs8EzT~ZW2ogBsg__ Key-Pair-Id: APKAJAGZ7VMH2PFPW6UQ Request GET /93KvqnPvC3eJ.128.mp3 HTTP/1.1 Accept: */* Origin: http://localhost:8080 Connection: keep-alive Range: bytes=0-16383 Host: cf-media.sndcdn.com Accept-Language: en-us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.2 Safari/605.1.15 Referer: http://localhost:8080/safari-webaudio-issue.html Accept-Encoding: identity X-Playback-Session-Id: 3C505FFB-790C-4469-8131-090181944003 Response HTTP/1.1 206 Partial Content Access-Control-Allow-Methods: GET Cache-Control: max-age=252460800 Accept-Ranges: bytes Access-Control-Allow-Origin: * Content-Length: 16384 Via: 1.1 6dd1fb730ba34e9c2dcda211a88fd854.cloudfront.net (CloudFront) Date: Tue, 26 Feb 2019 09:11:12 GMT Connection: keep-alive Age: 5364 Access-Control-Max-Age: 3000 Content-Type: audio/mpeg ETag: "002b0b87588401d0369537da6257085e" Content-Range: bytes 0-16383/3501243 Last-Modified: Thu, 16 Jun 2016 01:15:28 GMT Server: AmazonS3 x-amz-meta-job: 93KvqnPvC3eJ x-amz-meta-duration: 218848 x-amz-meta-bitrate: 128 x-amz-server-side-encryption: AES256 X-Amz-Cf-Id: 3RYfpEU2mZYlK01Jnv3T6dhFpFDFTDySLQILOMn3-yGG6TO0XAJewA== x-amz-version-id: r99TAWvBU6m9Vz73goT02AgaTx.kVOEy X-Cache: Hit from cloudfront Query String Parameters Policy: eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vOTNLdnFuUHZDM2VKLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1NTExNzc5NzR9fX1dfQ__ Signature: p31o0i2YMOu2q9vcZzOe-BaeKKYl~6JEEUmPyzeVA127VwLcqDlMnhJCzSXeQiSgzI4VD5NpBVsVc1wwZ14eTo8R47268qMsQVO6nCG6PWUvGPe2X1ZR14zrIMOuybp9toUeCjQy6fU1Kl5OCUMuZ2XWo6rm0GMT3xYd~AcX9UCcJGgjlCb25zypDn4MI7hH0rtPd5utFepIg9xTDIMuPnmOzOZ2Rg7jbGdW1D4wSnBcyDlz2OGBtrqrbmOS~l9uEwGIY4CE-luNOHyAx2vgSy3iga0~muoAGzigxrUbAAXMRJMYNy~RaLSkuYoivtwpVHlgFL-Rs8EzT~ZW2ogBsg__ Key-Pair-Id: APKAJAGZ7VMH2PFPW6UQ Note I tried to run the bisect-builds tool but it failed to run a single version of safari successful. It would download and start but no pages would load, not apple.com, not anything. One started loading icloud.com but kept failing and refreshing, after 5 different revisions I gave up (T_T)
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-02-26 10:42:16 PST
<rdar://problem/48405751>
Jer Noble
Comment 2 2019-02-27 15:47:43 PST
In the soundcloud case, I believe it fails the "Has Single Security Origin" check because of the 301 redirect.
Jer Noble
Comment 3 2019-02-27 15:49:38 PST
And yes, in Mojave, we added cross-site security checks to the MediaElementSourceNode; this is likely fallout from that security fix.
Gregg Tavares
Comment 4 2019-05-27 07:47:21 PDT
This doesn't seem to have anything to do with re-directing. Here's another example which doesn't seem to use a redirect but still fails https://codepen.io/greggman/pen/wbXXWp
Josh
Comment 5 2020-08-20 07:05:08 PDT
Over a year later and it's still broken! I needed to create a positional audio stream using THREE.js, and on Safari (even on iOS 14 beta as well) the volume simply doesn't change. In fact, it's like the audio element isn't a part of the AudioContext's graph at all. Maybe "createMediaElementSource" is actually not doing anything when the audio's source is an http stream? I tried commenting out createMediaElementSource in the codepen above, and it is exactly the same.
Note You need to log in before you can comment on or make changes to this bug.