CODEWITHSUNDEEP
javascriptioshtmlwebhtml5-audio
Ben Jackson
Ben Jackson

Reputation: 11922

feature test for html5 audio restrictions in iOS?

I know that you can't alter (or mute) the volume of HTML5 audio elements in iOS so I'm looking for a way to test for this (so that I can remove UI elements related to the volume).

After reading:

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10

Specifically:

"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."

I figured that I could create a new Audio object, attempt to change the volume to something other than 1 and then test the volume. i.e. : 

var isIOS = false; 
var test = new Audio(); 
test.volume = 0.5; 
if (test.volume === 1) { 
    isIOS = true; 
}

I was just wondering if anyone knew of any possible problems with this, and/or had a better solution. Is there a chance of false positives?

Additionally, does anyone know of any other devices that don't allow volume changes but that don't implement it in this way?

cheers.

Upvotes: 4

Views: 489

Answers (1)

Ben Jackson
Ben Jackson

Reputation: 11922

Ok, so I've tested this on a handful of devices and emulators, and it seems solid enough. The only danger I can see is that there exists (now or in the future) some other device which doesn't allow such volume changes, but that implements that restriction in some other way. It'd be great if anyone can let me know if they come across this. cheers.

EDIT: For the record, im now using this: http://mobiledetect.net/ and just turning off the volume UI elements for all mobile devices. It seemed like more devices were making restrictions on audio, and given the ease with which the volume can be altered via physical buttons, and the restricted screen space, it seemed best to just turn off the volume UI elements for all mobile devices.

Upvotes: 2

Related Questions