There was an ongoing problem with Safari/iOS that Apple has acknowledged but not fixed until very recently. This seems to be a compatibility issue between Safari/iOS and the WebAudio API introduced in Safari/iOS 13 and related to the sample rate of a device trying to play back files using the WebAudio API. The problem is intermittent because it depends on how the device is initialized and is triggered only when a resampling occurs during the playback.
Glitches, clicks and pops
You can read more details about the issue on this bug report where I personally interacted with a WebKit developer from Apple who was able to reproduce and track down the issue. Apparently, when there is a discrepancy between the sample rate of the audio file and the one of the current device, Safari/iOS is not capable of resampling the audio without generating an intense stream of clicks and crackles.
More recently, we had to submit a new bug report because the Safari Technology Preview Apple released in the meantime did not seem to have completely fixed the problem. The development team tried again to track down the issue and offered a new patch. This problem seems to be fixed in the latest Safari/iOS 15. It is not clear whether or not this patch will be made available for earlier versions of Safari and iOS.
Faster speed, higher pitch
In April 2022, we reported a new bug causing a different issue: several users reported that the audio speeds up at a higher pitch for less than a second and then adjusts to its regular speed/pitch. This problem seems to be a regression bug introduced in version 15 and, as such, it should not affect earlier versions of Safari and iOS. We extensively tested the latest version of Safari – version 15.6 at the time of writing this article – and we can confirm this problem should be fixed now.
A possible workaround if nothing else works
If you fear your customer base might not be up to date with the latest Safari and iOS versions, you can deactivate the WebAudio API support for Safari/iOS.This can be done by simply adding the following code to the Custom JS box you find in the Advanced section of the WavePlayer settings (Settings > WavePlayer > Advanced):
$(window).on('load', (event) => {
WavePlayer.vars.options.force_ios_media_element = true
WavePlayer.vars.options.force_safari_media_element = true
WavePlayer.setupAudioEngine()
})You need to consider that, after you add that code, the playback in Safari and iOS will fall back to a regular HTML5 Audio Element. That means that the waveform animation won’t be rendered in those environments. Of course, WavePlayer will continue working as expected for any other browser, device and operating system.
You have also to bear in mind that older devices and versions of Safari, might not be updated due to the Apple support policy of older models and versions. We always urge our customers to update to the latest versions.