Question

我正在制作自定义控件以“播放”和“静音/取消静音”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）中，首次点击“静音”按钮将至少成功运行

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

，它会更新图标图像，但实际上并不会使音频静音。 “静音”按钮上的后续点击不执行任何操作（不要将音频静音/取消静音或似乎更改类）。

如何在移动Safari中使用此静音/取消静音切换功能？

JS Fiddle

Answer 1

“在iOS设备上，音频级别始终在用户的物理控制之下。在JavaScript中无法设置音量属性。读取音量属性始终返回1.”

看起来你必须使用硬件开关。似乎在iPhone上，音量开关不会影响Safaris音量（默认为铃声音量，除非声音正在播放，然后您可以调节Safaris音量），而在iPod上，音量开关可以。 “

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf

使用jQuery静音/取消静音HTML5音频

1 个答案: