[Javascript]iPhone Safariブラウザでmp3の再生ができない問題

Safariブラウザでボタン押下時にmp3の音声ファイルを再生するJavascript処理があるのだが、稀に再生できない問題が発生していた。
解決方法を記載します。

事象は、再生できる時もあれば、できない時もあり、エラーも出力されていない。

プログラムとしては、下記のシンプルな処理。

click()
{
  const music = new Audio('/sample.mp3');
  music.play();  // 再生
}

原因は、mp3音声ファイルをPlayする直前に音声ファイルをnewで読み込んでいる事が原因でした。

再生するタイミングの時に、音声ファイルが読み込みが追いついていない様です。

解決策は、Webページの画面表示時に、事前に音声ファイルを、初期読み込みしておくことで、解決しました。

実装は、Angularなので、スコープ変数に音声ファイルを読み込ませたインスタンスをPlayで再生します。

//画面初期表示の際に、Audioインスタンスを生成しておく。
@scope.music = new Audio('/sample.mp3');

click()
{
  @scope.music.play();  // 再生
}