iOS iPad 禁用网络音频 API

Question

请注意：此问题已于 2016 年 11 月在 iOS 10.1.1 中修复。谢谢苹果！

我无法在 iPad 上通过网络音频 API 播放任何音频。这是使用最新版本的 iOS（从 9.3.2 开始 - 目前是 10.1）。

测试用例

这里 a bare-bones test I have set up (code below). None of the tests work on iPad for me. No problems on iPhone or other compatible browsers. There is another test page here (from William Malone). None of those sounds play on three iPads tried. Finally this game 使用网络音频 API（感谢 Derek）并且也被静音。

如果您正在 iPad 上阅读此内容，请尝试 bare-bones test and report in the comments (or contact me privately) 如果加载，然后播放，工作并播放声音。请包括 iOS 版本号（设置 -> 通用 -> 关于 -> 版本）。

任何见解或反馈将不胜感激！

这里是测试代码：

<!DOCTYPE html>
<html>
<head>
    <title>Web Audio API - iPad Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./jquery-2.2.3.min.js"></script>
    <style>
        section { padding:10px; margin:0 0 10px; background:DarkSeaGreen }
        a { cursor:pointer; display:block; background: DarkSeaGreen; padding:10px; margin:0 0 3px }
    </style>
</head>
<body>
    <script>
        var app = {};
        $(document).ready(function() {
            // Do we have Web Audio API?
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                audioContext = new AudioContext();
            } catch (e) {
                alert('Web Audio API is not supported in this browser');
            }
            $('#loadClick').on('click',function(){load('./ipad_test.mp3')});
            $('#playTouchEnd').on('touchend',play);
            $('#playTouchStart').on('touchstart',play);
            $('#playClick').on('click',play);
            $('#unlockTouchEnd').on('touchend',unlock);
            $('#unlockTouchStart').on('touchstart',unlock);
            $('#unlockClick').on('click',unlock);
        });
        function unlock() {
            // play empty buffer to unmute audio
            var buffer = audioContext.createBuffer(1, 1, 22050);
            var source = audioContext.createBufferSource();
            source.audioContext = buffer;
            source.connect(audioContext.destination);
            source.start(0);
            $('#messages').append('<p>Unlocked.</p>');
        }
        function load(file) {
            if(app.loaded) {
                $('#messages').append('<p>Already loaded.</p>');
                return;
            }
            var request = new XMLHttpRequest();
            request.open ('GET', file, true);
            request.responseType = 'arraybuffer';
            request.onload = function () {
                audioContext.decodeAudioData(
                        request.response,
                        function (buffer) {
                            app.buffer = buffer;
                            $('#messages').append('<p>Loaded.</p>');
                            app.loaded = 1;
                        },
                        function(){alert('Load error.');}
                )
            };
            request.send();
        }
        function play() {
            if(!app.loaded) {
                $('#messages').append('<p>Please load before playing.</p>');
                return;
            }
            var sourceNode = audioContext.createBufferSource();
            sourceNode.buffer = app.buffer;
            sourceNode.connect (audioContext.destination);
            sourceNode.start(0);
            $('#messages').append('<p>Playing.</p>');
        }
    </script>
    <h1>Web Audio API Test</h1>
    <p>Unlock should not be needed at all, but offers an alternative way to try and get the audio going. Load and then play should be all any compatible device needs. Refresh to start again.</p>
    <a id="unlockTouchEnd">Unlock (touchend)</a>
    <a id="unlockTouchStart">Unlock (touchstart)</a>
    <a id="unlockClick">Unlock (click)</a>
    <a id="loadClick" style="background:#c0c0c0">Load (click)</a>
    <a id="playTouchEnd">Play Audio (touchend)</a>
    <a id="playTouchStart">Play Audio (touchstart)</a>
    <a id="playClick">Play Audio (click)</a>
    <section id="messages"></section>
</body>
</html>

背景

Apple documentation makes it clear 必须从用户操作启动音频，Web 音频 API 才能工作。他们说：

Note: On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap. Calling noteOn() from an onload event will not play sound.

网上有很多关于此问题的线程，最新的线程是 2015 年秋季 iOS 9.0 到 9.2：

Thread from HTML 5 Game Devs（2015 年秋季习题）
William Malone（2015 年秋季习题）
Paul Bakaus（解锁技巧）
Adrian Holovaty（2015 年秋季习题）

他们建议从 touchstart 事件触发音频以解锁 iOS 音频（或在当时出现问题时触发 touchend）。我已经尝试了所有建议的技术，但无法使用 touchstart、touchend 或 click 来工作。 iPad.

音频始终静音

Answer 1

Apple 在 iOS 10.1.1 2016 年 11 月修复了这个问题。谢谢 Apple！

iOS iPad 禁用网络音频 API

iOS on iPad Disabling Web Audio API

javascript

safari

ipad

ios

web-audio-api