Monday, 28 June 2021

Web audio volume fade for iOS 13+ devices

I hope somebody here in the Stack Overflow community will be able to provide a workaround for this. It's been a constant thorn in my side for a long time now.

My requirement is pretty simple: fade-in the volume for audio playback on a page.

There are a few ways to do this with javascript:

  1. Update the "volume" property on an HTMLAudioElement. This does not work at all for iOS devices because the property is read-only for the OS.
  2. Use Web Audio API AudioContext.createMediaElementSource() with GainNode. This currently works, however the sound output will often be distorted - cracks and pops will ruin the experience for any streamed audio. This is not caused by using a different sampling rate with the AudioContext.
  3. Use Web Audio API AudioBuffer with the file downloaded via XMLHttpRequest with arraybuffer response type. This seems to result in no volume at all. It works with the simulator, but not on physical devices.

All three approaches work on practically any browser on any device excluding modern iOS devices. iOS versions prior to 13 work fine for approach 2 or 3. I don't mean to go all conspiracy theorist, but could apple be intentionally breaking PWA support to funnel more revenue to their app store?



from Web audio volume fade for iOS 13+ devices

No comments:

Post a Comment