JavaScript async/await処理がiOS/iPadOSでのみ動作しない

Question

実現したいこと

JavaScriptの非同期処理を用いてHowler.jsによる音源再生とアラート表示を順番に実行させたい

前提

HTML/JavaScript/CSSを使ってブラウザ上で動作する音感・記憶力ゲームを作成しています。

その中でゲーム終了時に

• 得点がハイスコアを上回っている場合にはlocalStorageを上書き
• Howler.jsを通し、ハイスコア更新の有無に応じて音源(3秒程度)を再生
• 3000ミリ秒(検証のため問題発生個所では倍に設定中)待機
• ハイスコア更新の有無に応じてアラートを表示

という処理を設定しているのですが、何故かiOS/iPadOSでのみ、ハイスコアを更新できなかった場合の音源が再生されず、またゲーム終了後に再度スタートした場合にボタン押下時のビープ音が一切再生されなくなるという問題が発生しています。

なお、テスト環境・結果は以下の通りです。

OS	ブラウザ	結果
Windows 11	Chrome	○
Android 13	Chrome	○
iOS/iPadOS 18	Safari・chrome	×

この問題の原因・解決策をご存じでしたら、教えていただけないでしょうか。

発生している問題・エラーメッセージ

発生している問題は下記の通りです。

• ゲーム終了時(ハイスコア非達成)に限り設定した音源が再生されない
• 2度目以降のゲーム開始時に出題・ボタン押下時のビープ音が再生されない

なおiPhone/iPadではコンソールを見ることができず、またWindows/Chrome環境では特にエラーは出力されていないようです。

該当のソースコード

const notes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; // 各音階の周波数
let sequence = [];
let userInput = [];
let score = 0;
let isPlayerTurn = false;

const context = new (window.AudioContext || window.webkitAudioContext)();
const buttons = document.querySelectorAll(".note-button");
const startBtn = document.getElementById("start-btn");

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
  
function updateHighScore() {
  let highscore = document.getElementById('highscore');
  let onkanHigh = 0;
  if(localStorage.getItem('onkanHigh')) {
    onkanHigh = localStorage.getItem('onkanHigh');
  }
  highscore.innerText = `現在のハイスコア: ${onkanHigh}回`;
}

function playTone(freq, duration = 500) {
  const osc = context.createOscillator();
  const gain = context.createGain();

  osc.type = "sine";
  osc.frequency.value = freq;

  osc.connect(gain);
  gain.connect(context.destination);
  gain.gain.setValueAtTime(0.2, context.currentTime);

  osc.start();
  osc.stop(context.currentTime + duration / 1000);
}

function flashButton(noteIndex) {
  const btn = document.querySelector(`.note-button[data-note="${noteIndex + 1}"]`);
  btn.classList.add("active");
  setTimeout(() => btn.classList.remove("active"), 300);
}

function playSequence() {
  isPlayerTurn = false;
  let i = 0;
  const interval = setInterval(() => {
    const note = sequence[i];
    playTone(notes[note]);
    flashButton(note);
    i++;
    if (i >= sequence.length) {
      clearInterval(interval);
      isPlayerTurn = true;
    }
  }, 700);
}

function nextLevel() {
  const nextNote = Math.floor(Math.random() * 8);
  sequence.push(nextNote);
  userInput = [];
  playSequence();
}

async function endGame() {
  isPlayerTurn = false;
  let onkanHigh = parseInt(localStorage.getItem("onkanHigh")) || 0;
  // ハイスコア更新時
  if (score > onkanHigh) {
    localStorage.setItem("onkanHigh", score);
    playSuccess();
    await sleep(3000);
    alert(`おめでとうございます、${score}回連続正解でハイスコア更新です!!`);
  } else {
    playFailure();
    await sleep(6000);
    alert(`残念、ゲームオーバーです。今回の得点は${score}回でした。`);
  }
  score = 0;
  sequence = [];
  updateHighScore();
  document.getElementById('info').classList.remove('hidden');
  document.getElementById('buttons-container').classList.add('hidden');
}

function handleUserInput(noteIndex) {
  if (!isPlayerTurn) return;

  playTone(notes[noteIndex]);
  flashButton(noteIndex);
  userInput.push(noteIndex);

  for (let i = 0; i < userInput.length; i++) {
    if (userInput[i] !== sequence[i]) {
      endGame();
      return;
    }
  }

  if (userInput.length === sequence.length) {
    score++;
    setTimeout(nextLevel, 1000);
  }
}

buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    const noteIndex = parseInt(btn.dataset.note) - 1;
    handleUserInput(noteIndex);
  });
});

document.addEventListener("keydown", (e) => {
  if (!isPlayerTurn) return;
  const key = parseInt(e.key);
  if (key >= 1 && key <= 8) {
    handleUserInput(key - 1);
  }
});

startBtn.addEventListener("click", () => {
  score = 0;
  sequence = [];
  document.getElementById('info').classList.add('hidden');
  document.getElementById('buttons-container').classList.remove('hidden');
  nextLevel();
});

document.addEventListener("DOMContentLoaded", updateHighScore);

※サーバ上で実際に動作するページはこちらからご確認ください。 (アフィリエイト・広告などは含まれていません。

試したこと

iOS/iPadOSでは処理により時間がかかるのかと思い、待機時間を2倍まで伸ばしましたが効果はありませんでした。

---

以上です。何卒よろしくお願いいたします。

Comments

[maisumakun]

AudioContextにはiOS特有の癖があるようですが、そちらではなく「async-awaitに問題がある」と判断した背景はどのようなものでしょうか？

https://qiita.com/zprodev/items/7fcd8335d7e8e613a01f#ios-safari%E3%81%AFbgm%E3%81%AA%E3%81%A9%E3%81%AE%E8%87%AA%E5%8B%95%E5%86%8D%E7%94%9F%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

[numin]

コメント・ご助言ありがとうございます。

まずAudioContextの不安定性についてあまり存じていなかったのですが、初回プレイ時にビープ音再生に問題がないこと、そしてasyncファンクション内で発生していることからの予測でした。

基礎知識が足りておらずお手数をおかけしますが、よろしくお願いいたします。

Answer 1

1日色々な検証を重ね、なんとか解決することができました。

なおコメント欄でご指摘いただいた通り、非同期処理ではなくAudio Context関連の問題っだったようです。

以下、解決いできた手順を記載します。

---

1.playFailure()ファンクションが正しく動作しなかった件

MP3形式はiOS/iPadOS環境において問題が起きやすいということで、M4A形式に変換して利用しました。

これにより奇数回のプレイでは正しく音源が再生されるようになりました。

偶数回では何故か相変わらず再生されなかったものの、最終的にゲーム終了後、結果通知のalertをconfirmに変え、「OK」が選ばれた場合にページを再読み込みする形に落ち着きました。

2.2度目以降の開始時にビープ音が再生されなくなっていた件

まずは下記の通り、ゲーム開始時にAudio Contextをリロードさせることで解決できました。
ただ最終的には前述の通りゲーム再開時にページそのものをリロードする形に変更したため、どちらにしても問題なく動作するようになりました。

startBtn.addEventListener("click", async () => {
  if (context.state === 'suspended') {
    await context.resume();
...

---

以上、状況を開設させていただきました。

閲覧・ご協力いただいた皆様、ありがとうございました。