HTMLAudioElement wont mute properly in Safari on iPod Touch (5.0.1)

Question

Problem: I am having issues toggling the muted property on an html5 audio tag.

Platform: Only on iPod Touch (Safari) [iOS 5.0.1]. Works fine in Chrome.

// This code resides in my click binding.
var audios = document.getElementsByTagName('audio')[0];
console.log(audios.muted); // returns false by default
if(audios.muted == true){
  audios.muted = false;
}
else{
  audios.muted = true;
}

In chrome, the console.log will toggle true/false, however on the iPod, it will always stay false.

Answer 1

According to the docs:

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.

Looks like you have to use the hardware switch. It seems that on an iPhone the volume switch will not affect Safaris volume (defaults to the ringer volume, unless a sound a sound is playing then you can adjust Safaris volume), whereas, on the iPod, the volume switch does.

Hopefully this helps someone else.