Я создаю пользовательские элементы управления для "воспроизведения" и "отключения/включения звука" аудио-элемента 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?
"на устройствах iOS уровень звука всегда находится под физическим контролем пользователей. Свойство volume не устанавливается в JavaScript. Чтение свойства volume всегда возвращает 1."
Похоже, вы должны использовать аппаратный переключатель. Кажется, что на iPhone переключатель громкости не повлияет на громкость Safaris (по умолчанию на громкость звонка, если звук звучит не воспроизводится, тогда вы можете отрегулировать громкость Safaris), тогда как на iPod переключатель громкости работает. "