So I recently discovered that iOS Safari does not allow volume to be controlled through javascript on audio elements. Fine. But how do I detect it to not show a control for it in my custom player?
From their documentation:
On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.
So I thought I'd extend some trust to Apple's documentation (which is always a mistake), and believe them when they say Reading the volume property always returns 1. So I created this function that simply changes the volume of an audio element and then checks if it changed, and changes it back if not.
Turns out the documentation was wrong, and actually, at least in synchronous code, it momentarily stays at 0.9 and so this function always returns true.
function isVolumeChangeable(audioElement) {
const lastSetting = audioElement.volume
audioElement.volume = 0.9
const changed = audioElement.volume == 0.9 // Supposed to equal one in iOS
audioElement.volume = lastSetting // Change it back
return changed
}
Now I can be really dirty and put some kind of timeout in there, but there has to be a better way.
Why not use navigator.userAgent (docs: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent) and do some regex to detect iOS / Safari?