Question

我非常绝望。在我的网站上，我在html5音频标签中使用音乐如下：

<!--Music-->
    <audio id = "music_background" class="display_none"> 
        <source src="music/piece.mp3"/>
        <source src="music/piece.ogg"/> 
        HTML5 audio not supported
    </audio>

在桌面上，这与一些控制功能一起工作正常（在$（document）.ready ...上）：

var musicBackground = $("#music_background").get(0);
musicBackground.play();
musicBackground.volume = 0.50;

现在我知道在IPad上自动启动声音是不可能的，所以我不得不创建一个不可见的声音启动按钮：

if ( ( navigator.userAgent.match(/iPhone/i) ) || ( navigator.userAgent.match(/iPad/i) ) ) {

    $("body").append('<a id="init"></a>')
             .on( 'touchstart', function() {
                 soundInit();
             } );

    function soundInit() {
        var musicBackground = $("#music_background").get(0);
        musicBackground.play();
        musicBackground.volume = 0.50;
        $("#init").fadeOut(0);
    }
};

到目前为止，这种方法很有效（即使我不希望触发文档上的按钮，就像我希望的那样）。这只是令人烦恼但我发现了我所有的其他功能，例如：

function musicBackgroundFadeOut() {
var vol = 0.50;
var interval = 200; // 200ms interval
var musicBackground = $("#music_background").get(0);

var fadeout = setInterval(
  function() {
    // Reduce volume by 0.05 as long as it is above 0
    // This works as long as you start with a multiple of 0.05!
    if ( vol > 0.05 ) {  // if 0 „DOM Exception 1: Index or size was negative, or greater than the allowed value“
      vol -= 0.05;
      musicBackground.volume = vol;
    }
    else {
      // Stop the setInterval when 0 is reached
      clearInterval( fadeout );
    }
  }, interval );
}

即使由“触摸开始”触发，也不会再工作了。事件如：

$("#someElement").on( 'touchstart', function(e) {
        e.preventDefault();         
        musicBackgroundFadeOut();           
    } );

在Ipad上有这种（非）行为的特定已知原因吗？我无法领先于此。谷歌也没有帮助我:-(提前致谢！

Answer 1

不幸的是，自动播放选项在Apple iOS移动设备（iPhone，iPad，iPod）上不起作用，因为Apple特别禁止它。基本上，iOS设备需要实际的用户交互（物理触摸）才能开始播放音频/视频播放器。

在iPhone和全屏播放期间始终提供控件   iPod touch和占位符允许用户启动全屏   回放。在桌面或iPad上，您必须包含控件   使用JavaScript属性或提供播放控件。它是   因为自动播放在iPad上提供用户控件尤为重要   被禁用以防止未经请求的手机下载。

在iOS上的Safari（适用于所有设备，包括iPad）中，用户可以使用   在蜂窝网络上，按数据单位收费，预加载和   自动播放被禁用。在用户启动数据之前不会加载任何数据。   这意味着JavaScript play（）和load（）方法也处于非活动状态   直到用户启动播放，除非是play（）或load（）方法   由用户操作触发。换句话说，用户发起的播放   按钮工作，但onLoad =“play（）”事件不起作用。

iOS-Specific Considerations

Answer 2

在网上进行新搜索后，我发现了这一点：

在JavaScript中无法设置volume属性。读取volume属性始终返回1.

此处：https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

也许这就是原因。希望这可以帮助别人。

在ipad上使用音频标签html5和JQuery控制声音

2 个答案: