UnityのWebGLビルド：iOSで音声が再生されないの対処法

Unityで作ったアプリでWebGLビルドを行なったものの、iOSで見ようとすると音声が再生されない！ということはないでしょうか？この問題は何年も続いているようで、筆者もさんざん英語のサイトを検索しましたが、答えに辿り着くまでにかなりの時間を要してしまいました。

この記事では、UnityでWebGLビルドしたアプリをiOSで開くと音声が再生されないという場合の対処法についてメモを共有しておきたいと思います。

UnityのWebGLビルド

UnityのWebGLビルドとは？

Unityには、iOSやAndroid向けのアプリを作る機能だけでなく、ウェブサイトなどで公開できるWebGLビルドの機能も備わっています。アプリストアなどを使わず自分のサイトのサーバーにアップロードするだけ絵公開できるので、初期費用もかからずとても便利な機能です。

ところがこのWebGL、何年もの間、モバイル端末には公式に対応していません。つまりパソコンで見るということに限られてしまうわけです。とはいえ、最近のスマホではこのWebGLビルドのアプリも見ることができるものが増えているようで、以前に比べるとエラーなどが起こる確率もかなり低くなっているようです。

iOSで音声が出ない問題

ところがこのWebGLビルド、Android端末であれば正常にスマホでもアプリを操作することができるものの、iPhoneやiPadなどのiOSの端末だと、音声が出ないという問題が発生します。

これについては世界の開発者たちが色々と知恵を絞ったようですが、根本的な解決法が存在せず、さらにUnityの方もこれを改善するという気はさらさらないようです。筆者自身もさまざまなセッティングを試してみましたがうまくいかず、悪戦苦闘にかなりの時間を費やしてしまいました。

iOSで音声が出ない時の対処法

iOSの音声再生の仕組み

試行錯誤の末にたどり着いたのは、ビルドでできてくるフォルダーの中にある、htmlテンプレートに音声が再生されるボタンを書き込んで設置するという方法です。

iOSには広告などの音声が自動再生されるのを防ぐために、なにかユーザーがアクションを起こして初めて音声が再生される仕組みがあるということで、アプリの外で最初にユーザーにボタンを押して音声を再生してもらうことで、ブラウザーに音声再生を許可したと認識させることができるのだそうです。

htmlボタンのコード

htmlテンプレートには、以下のようなhtmlコードを使ってボタンを設置することができます。

<button id="ASong" onClick="playPause()" style="color:black">
      <audio
        src="https://ceriseworks.com/wp-content/uploads/2023/09/bell.mp3"></audio>
      Sound ON
    </button>
    
    <script>
      var aud = document.getElementById("ASong").children[0];
      var isPlaying = false;
      aud.pause();
    
      function playPause() {
        if (isPlaying) {
          aud.pause();
        } else {
          aud.play();
        }
        isPlaying = !isPlaying;
      }
    </script>

こんな感じでボタンができますね。押すと、シンプルな音が再生されます。

Sound ON

これをクリックしてもらうことで、アプリの音声がiOSでも再生されるようになります。

まとめ

いかがでしたでしょうか？パソコンのブラウザーでもAndroid端末でもちゃんと再生できるのに、iOSだけ音声が再生されないという問題はちょっと面倒なのですが、筆者自身小さなボタンをつけることで解決できたので、共有しておきたいと思います。