Así que recientemente descubrí que iOS Safari no permite controlar el volumen a través de javascript en elementos de audio. Multa. Pero, ¿cómo lo detecto para que no muestre un control en mi reproductor personalizado?
De su documentación :
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.
Así que pensé en confiar un poco en la documentación de Apple (que siempre es un error), y creerles cuando dicen que Reading the volume property always returns 1 . Así que creé esta función que simplemente cambia el volumen de un elemento de audio y luego verifica si cambió, y lo vuelve a cambiar si no.
Resulta que la documentación era incorrecta y, de hecho, al menos en el código síncrono, permanece momentáneamente en 0.9, por lo que esta función siempre devuelve verdadero.
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 }Ahora puedo estar muy sucio y poner algún tipo de tiempo de espera allí, pero tiene que haber una mejor manera.
¿Por qué no usar navigator.userAgent (docs: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent ) y hacer algunas expresiones regulares para detectar iOS/Safari?