ウェブオーディオAPIはデバイス上でサウンドサンプルを再生していませんが、ブラウザで動作します。

Question

私はメトロノームであるIonicアプリを持っています。 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 /資産/オーディオです。

これは間違っている可能性のあるアイディアですか？

Answer 1

iOSデバイスでは、オーディオの再生を許可するために何らかのユーザージェスチャーが必要と考えています。

Answer 2

これは2017年7月のiOS 10.3.2で、iPhoneでSafariでこの問題を解決しています。興味深いことにMacBookのSafariは問題ありません。 @Raymond Toyの一般的な観察はまだ真実であるように見えます。しかし、@ padenotのアプローチ（https://gist.github.com/laziel/7aefabe99ee57b16081c経由）は私がいくつかの外部イベント/トリガーに応答してサウンドを演奏したいという状況ではうまくいかなかった。オリジナルポスターのコードを使用して

は、私が今triggerSound()は、Android上ですぐに音になりますし、ブラウザのページがタッチされた後のiOS上の音になります呼び出すこの

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(); 
    } 
} 

といくつかの成功を収めてきました。それでも

ない