iOS + safariでWeb Audio APIを利用して音を発生させる方法

Question

過去に下記質問でWeb Audio APIを利用して音を発生させる方法をご教示頂いたのですが、「パソコン+chrome」並びに「android端末+chrome」では音が発生したのですが、「iOS端末(iPhone7) + safari」で試したところ、音が発生しませんでした。
(音が出るようにiOS端末の設定はしました。)

こちらの記事(https://qiita.com/pentamania/items/2c568a9ec52148bbfd08)を拝見すると、下記コードで画面タップで音が発生すると記載されているのですが、記事と全く同じコードを利用したのですが、残念ながら手元の端末(iPhone7)で試したところ、画面をタップしても音が出ませんでした。

原因が分かる方、もしくは他にiOS + safariで音の鳴らす方法があれば、ご教示頂きたく宜しくお願い申し上げます。

 var event = "click";
  document.addEventListener(event, function() {
    // 無音再生
    wa.playSilent();

    // ロード後コールバック再生
    wa.loadFile("./assets/sample.mp3", function(buffer) {
      wa.play(buffer);
    });
  });

###試したこと
こちらのサイトではiOS + safariで音が鳴るとされているサンプルページがあるのですが、
iPhone(5s) + safariでアクセスしたところ音はなりませんでした。

https://freefielder.jp/blog/2014/12/web-audio-api-sample.html

###過去の質問
チャットを受け取った際に、受け取り側で通知音を発生させることは可能ですか？(Socket.io + WebAudioAPI 利用)
https://teratail.com/questions/162440

Answer 1

howler.js を利用すると、容易に音を再生させることができます。
私もこのライブラリを使用して、Safari上で音を再生することができました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>

上記をHTMLファイル内に追記し、

var sound = new Howl({ src: ['./assets/sample.mp3'] })
sound.play()

と記述することで、音を再生することができます。

これでも音が再生されない場合、Safariのバージョンアップデートがされていないことが考えられます。
Web Audio APIのブラウザ対応を確認してみてください。

Comments

[k.t.est]

ありがとう御座いました！ほぼ諦めていたのですが、お陰様で iOS + Safari で音を鳴らすことができました。