iOSのMobile Safari でWeb Audio API を利用したサウンドが以前は再生できていたが、再生できなくなった - JavaScript

iOSのMobile Safariで以前はWeb Audio API でサウンドが再生できていたが、バージョンアップ等で再生できなくなってしまう現象について紹介します。

現象

iOSのMobile SafariでWeb Audio APIのサウンド再生ができていたが、バージョンアップ等で最新のiOSではWeb Audio APIのサウンド再生ができない。

原因

複数の原因がありますが、createGainNode()メソッドを利用して gain オブジェクトを作成すると再生できなくなる場合があります。

以前は再生できていたが、最新のiOSでは再生できない

下記のコードは gain オブジェクトを作成しているため、以前のiOSでは再生できましたが、最新のiOSでは再生できません。

function completeOnLoad() {
  source = context.createBufferSource();
  gain = context.createGainNode();

  // オーディオをデコード
  context.decodeAudioData(request.response, function (evt) {
    source.buffer = evt;
    source.connect(gain);
    gain.connect(context.destination);
    source.loop = false;
    source.start(0);
  });
}

対処法1

gainオブジェクトの利用をやめます。

修正後のコード

function completeOnLoad() {
  source = context.createBufferSource();

  // オーディオをデコード
  context.decodeAudioData(request.response, function (evt) {
    source.buffer = evt;
    source.connect(gain);
    source.loop = false;
    source.start(0);
  });
}

対処法2

gainオブジェクトのコードの記述を下記に変更します。gainオブジェクトの生成をdecodeAudioData内で実行します。また、gainの値も明示的に設定します。

function completeOnLoad() {
  source = context.createBufferSource();

  // オーディオをデコード
  context.decodeAudioData(request.response, function (buf) {
    source.buffer = buf;
    source.loop = false;
    gainNode = context.createGain();
    source.connect(gainNode);
    gainNode.connect(context.destination);
    gainNode.gain.value = 0.5;
    source.start(0);
  });
}