Bug 195043 - REGRESSION: CrossOrigin Audio with WebAudio API not working with Soundcloud
Summary: REGRESSION: CrossOrigin Audio with WebAudio API not working with Soundcloud
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Audio (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-02-26 03:47 PST by Gregg Tavares
Modified: 2020-11-03 05:21 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Gregg Tavares 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)
Comment 1 Radar WebKit Bug Importer 2019-02-26 10:42:16 PST
<rdar://problem/48405751>
Comment 2 Jer Noble 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.
Comment 3 Jer Noble 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.
Comment 4 Gregg Tavares 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
Comment 5 Josh 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.