Bug 258864

Summary:	Web Audio becomes distorted after switching to Bluetooth speaker
Product:	WebKit	Reporter:	Peter Woods <peter.woods>
Component:	Web Audio	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Major	CC:	cdumez, jer.noble, lolwebkitbugtracker, peter.woods, pp, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari 16
Hardware:	iPhone / iPad
OS:	iOS 16

Description Peter Woods 2023-07-04 20:44:05 PDT

If you open a web page in Safari on iOS or iPadOS that uses Web Audio for audio playback then switch to external Bluetooth speakers, the audio becomes distorted and played at the wrong speed.

Demo URL: https://d2aweagde7jntk.cloudfront.net/webaudio.html

Steps to reproduce:
1. On an iPhone or iPad, disconnect all external Bluetooth devices, remove headphones, make sure device is not muted and set audio output of device to internal speakers.

2. Open this page in Safari: https://d2aweagde7jntk.cloudfront.net/webaudio.html

3. Click / tap on the "Init" button.
An alert is shown giving the AudioContext sampleRate. This is likely to be 48000.

4. Click / tap on the "Play" button.
The audio will play through the internal speakers

5. Click / tap on the "Stop" button.
The audio will stop. Leave this page open.

6. Switch to the Settings app and connect to an external Bluetooth speaker.

7. Switch back to Safari

8. Click / tap on the "Play" button.
The audio will play but is very likely to be badly distorted and play at the wrong speed.
Once the page is in this state, using the "Init" button again does not fix the audio.
Refreshing may fix the problem (but may require several refreshes)

9. With the external Bluetooth speaker still connected, close the page then reopen it.
Follow steps 3 and 4 and the audio will play ok (with the sampleRate showing as 41000).

The problem seems to affect any web page that plays audio using Web Audio.
Audio played using the HTML <audio> element is not affected by this.
I've managed to reproduce the problem on iOS 16 and iOS 17 beta 2 (21A5268h) on an iPhone XS with a MIFA A20 Bluetooth Speaker.

Comment 1 Peter Woods 2023-07-06 10:40:12 PDT

If it's any help, I can confirm that the problem exists in iOS 17 beta 3 (21A5277h).

I can also get it to happen on macOS 13.4 running Safari 16.5 and Safari Technology Preview (Release 173) as follows:

1. Open the page with the Bluetooth speaker disconnected
2. Play through the Mac's external speakers (NOT headphones) so the sample rate is 48000 when you click on "Init"
3. While the audio is playing, connect to the Bluetooth speaker and the audio is played but distorted.

Note that the problem does not happen with Chrome, FireFox or Edge...

Comment 2 Radar WebKit Bug Importer 2023-07-11 20:45:16 PDT

<rdar://problem/112117675>

Comment 3 Jer Noble 2023-08-10 12:32:41 PDT

Seems like this might be a dup of bug #259899, a fix for which was just landed, which caused caused by the sample rate of the output device changing when a different route (i.e., headphone vs. speaker vs. bluetooth) was selected.

We are tracking this fix internally as <radar://112621241> and will update the bugzilla bug there when a fix is available for testing.

Comment 4 Peter Woods 2023-09-08 05:32:24 PDT

Great news !

I can confirm that the problem is fixed in Safari Technology Preview Release 178 (which includes this commit: https://commits.webkit.org/266747@main).

However, that change does not appear to be in iOS 17 beta 8 (21A5326a) :(
It would be SO good if the change made it into iOS 17.0 ....

Comment 5 Peter Woods 2023-09-14 03:21:05 PDT

Hmm - I've tested iOS 17 Release Candidate (21A329) and it looks like the fix didn't get included :(

Looks like we'll have to wait for iOS 17.1 to see if it's in there...

Comment 6 Peter Paul Elfferich 2024-07-26 06:50:00 PDT

We've run into a very similar issue while using an AudioWorkletNode with the AudioContext and everything set to sample rate 48000. It's all working just fine, but then when an audio device is connected using bluetooth (seemingly even when p.e. AirPods are not being used) the playback becomes distorted.

Since we can't really afford to wait for this to be fixed we've resorted to using AudioBufferSourceNode based playback but that's not ideal.

That being said WebKit is not ideal either for lack of WebCodecs AudioDecoder support. In browsers where AudioDecoder is available and AudioWorklet works as intended we can control our streaming audio playback completely from a Worker without being bothered by a customer page blocking the main thread.

Let me know if you intend to look into this and need help getting a reproduction. I'll see if I can find some time to prepare one for you in that case.