Отключение звука / включение звука HTML5 с помощью jQuery

Я создаю пользовательские элементы управления для "воспроизведения" и "отключения/включения звука" аудио-элемента HTML5.

Следующий код работает как ожидается в Chrome:

$( document ).ready(function() {
var audioPlayer;

function init(){
    audioPlayer = $('audio')[0];
}

function startPlaying(){
    $('button#play').hide();
    audioPlayer.play();
}

function toggleMute(){
    if(audioPlayer.muted == false){ 
        audioPlayer.muted = true;
        $('button#mute').addClass('muted');
    }
    else{ 
        audioPlayer.muted = false;
        $('button#mute').removeClass('muted');
    }
}

init();
$('button#play').on('click', startPlaying );
$('button#mute').on('click', toggleMute );

});

Однако в мобильном Safari (iOS 5) первое нажатие на кнопку "mute" будет успешно запускать хотя бы линию

$('button#mute').addClass('muted');

который обновляет изображение значка, но фактически не отключает звук. Последующие нажатия кнопки "mute" ничего не делают (не отключите звук/отключите звук или, похоже, измените класс).

Как я могу включить этот переключатель mute/unmute для работы в мобильном Safari?

JS Fiddle