The audio is distorted in Safari and iOS

Luigi Pulcini — Wed, 27 Jan 2021 03:28:47 +0000

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.

The player is stuck with a spinning icon

Luigi Pulcini — Mon, 25 Jan 2021 03:56:24 +0000

There might be several causes leading to this situation. The following ones are just the ones we encountered most often:

Optimization plugins

The WavePlayer script is not loading as expected and a syntax error is reported in the Javascript Console of the Developer Tools in your browser. In most cases, this occurs when there is an optimization plugin that minifies and defers the loading of the scripts. If the deferral causes a script to load before its dependencies have been loaded, the script cannot run as expected and generates the error

Please configure your optimization plugin so that either all the scripts are aggregated/combination/concatenated (the exact terminology might be different depending on the optimization plugin you are using) or that jquery.min.js and waveplayer.min.js are excluded from the deferral

CORS policy for external files

You are trying to playback external audio files but the browser blocks the files because of a missing CORS Policy on the remote server.

Please make sure that your domain is included in the CORS policy of the remote server as an AllowedOrigin and that at least the HEAD and GET methods are listed as the AllowedMethods.

HTTPS vs HTTP

Your website is currently loading through the secure HTTPS protocol but the resource is loaded insecurely and the browser blocks it as a safety precaution.

Please go to Settings > General and make sure that the two options WordPress Address (URL) and Site Address (URL) both include the HTTPS protocol https://
It is worth noting that this is not a bug in WavePlayer. This seems to be a problem coming from a WordPress core function that returns whatever is in those two options without checking whether the website is loaded securely or not.

File not accessible by the browser (“404 Not Found” or “403 Forbidden” errors)

Your file is not accessible by the browser and returns a 404 Not found or a 403 Forbidden error.

In most cases, this happens because you are mistakenly using a WooCommerce Downloadable File as a preview file, which is not possible because of how WooCommerce restricts access to its downloadable files. Please remember that Downloadable files are uploaded to a folder that is not accessible by the browser. Also, it is not enough to select a file by the Preview File button to make it accessible: if the file was previously uploaded using the Downloadable File button, that file is permanently restricted from being accessed by the browser. You should upload your preview files either from the regular Media Library or through the Preview File list.

Troubleshooting – WavePlayer