Question

我有一个节拍器是一个节拍器。使用Web Audio API我使用振荡器功能使一切工作正常，但切换到使用wav文件时，真实设备（iPhone）上没有播放音频。

使用Ionic Serve（chrome）在浏览器中测试时，音频播放效果很好。

这就是我所拥有的：

function snare(e) {
    var audioSource = 'assets/audio/snare1.wav';
    var request = new XMLHttpRequest();
    request.open('GET', audioSource, true);
    request.responseType = 'arraybuffer';

    // Decode asynchronously
    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(theBuffer) {
            buffer = theBuffer;
            playSound(buffer);
        });
    }
    request.send();
}

function playSound(buffer) {
    var source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start(0);
}

音频样本位于www / assets / audio。

任何可能出错的想法？

Answer 1

我相信iOS设备需要某种用户手势来播放音频。

Answer 2

2017年7月，iOS 10.3.2，我们仍在iPhone上的Safari上发现此问题。有趣的是，MacBook上的Safari很好。 @Raymond Toy的一般观察似乎仍然是真实的。但是@ padenot的方法（通过https://gist.github.com/laziel/7aefabe99ee57b16081c）对我来说并不适用于我想要响应某些外部事件/触发器发出声音的情况。

使用原始海报的代码，我已经取得了一些成功

var buffer; // added to make it work with OP's code

// keep the original function snare()

function playSound() { // dropped the argument for simplicity.
   var source = audioContext.createBufferSource();
   source.buffer = buffer;
   source.connect(audioContext.destination);
   source.start(0);
}

function triggerSound() {

    function playSoundIos(event) {
        document.removeEventListener('touchstart', playSoundIos);
        playSound();
    }

    if (/iPad|iPhone/.test(navigator.userAgent)) {
        document.addEventListener('touchstart', playSoundIos);
    }
    else { // Android etc. or Safari, but not on iPhone 
        playSound();
    }
}

现在调用triggerSound()会立即在Android上产生声音，并在触摸浏览器页面后在iOS上产生声音。

仍然不理想，但总比没有声音好......

Web Audio API不在设备上播放声音样本，但可以在浏览器中使用

2 个答案: