[JavaScript] iOSのMobile SafariでWeb Audio API を利用してサウンドを再生する

このページのタグ:[JavaScript] [サウンド] [iOS] [Web Audio API]
iOSのMobile SafariでWeb Audio API を利用してサウンドを再生するコードを紹介します。

方法1: ページの表示時にHttpRequestを初期化する方法

ページの表示時にHttpRequestを初期化するコードを紹介します。下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />

  <script type="text/javascript">
    var request, source;

    window.onload = function () {
      request = new XMLHttpRequest();
      request.open("GET", "sound2.mp3", true);
      request.responseType = "arraybuffer";
      request.onload = completeOnLoad;
      request.send();
    };

    function completeOnLoad() {
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      context = new AudioContext();
      
      // オーディオをデコード
      context.decodeAudioData(request.response, function (buf) {
        source.buffer = buf;
        source.loop = false;

      });

      source = context.createBufferSource();

      var elem = document.getElementById("Play");
      elem.addEventListener("click", playStart, false);
    }

    function playStart() {
      source.connect(context.destination);
      source.start(0);
    }
  </script>

</head>
<body>
  <a id="Play" href="javascript:void(0);">再生</a><br />
</body>
</html>

解説


  window.onload = function () {
    request = new XMLHttpRequest();
    request.open("GET", "sound2.mp3", true);
    request.responseType = "arraybuffer";
    request.onload = completeOnLoad;
    request.send();
  };
ページ表示時に上記の関数が実行され、HttpRequestが初期化されます。再生したいサウンドファイルへのアクセスを設定します。またonloadイベントにはcompleteOnLoad()関数を設定し、サウンドファイルの読み込み完了後、completeOnLoad()を実行します。


  function completeOnLoad() {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();
      
    // オーディオをデコード
    context.decodeAudioData(request.response, function (buf) {
      source.buffer = buf;
      source.loop = false;
    });

    source = context.createBufferSource();

    var elem = document.getElementById("Play");
    elem.addEventListener("click", playStart, false);
  }
サウンドファイル読み込み後に上記の関数を実行します。AudioContextオブジェクトを作成し、デコード処理を実装します。また、再生用のバッファソースを作成します。また、addEventListener()メソッドを用いて[再生]リンクにクリックイベントを設定します。


  function playStart() {
    source.connect(context.destination);
    source.start(0);
  }
リンクがクリックされたときの処理です。バッファソースに接続し、再生を開始します。

方法2: リンクのクリックなどのアクション時にHttpRequestを初期化する方法

ページの読み込み時ではなく、リンクなどがクリックされたタイミングでHttpRequestを初期化するコードを紹介します。
下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />

  <script type="text/javascript">

    //iOS版
    var request;
    
    function clickPlay() {
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      context = new AudioContext();
      context.createBufferSource().start(0);

      request = new XMLHttpRequest();
      request.open("GET", "sound2.mp3", true);
      request.responseType = "arraybuffer";
      request.onload = completeOnLoad;
      request.send();
    };

    function completeOnLoad() {
      var elem = document.getElementById("Play");
      elem.innerText = "再生中";
      source = context.createBufferSource();

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

  </script>

</head>
<body>
  <a id="Play" href="javascript:void(0);" onclick="clickPlay();">読み込み</a><br />
</body>
</html>

解説

こちらのコードの詳細な解説はこちらの記事を参照してください。
登録日 :2015-10-17    最終更新日 :2015-12-17
このページのタグ:[JavaScript] [サウンド] [iOS] [Web Audio API]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)