Parallax Image

Cutls Code Archives


SNZ 2016

とりあえず鳴らしてみた。

カテゴリ:Code Archives 投稿日:2016年7月29日

2周間ぶりですが…

JS超初心者がとりあえず鳴らしてみました。Web Audio APIで。といってもWeb Audio API で音を再生しよう | phiaryの丸写し感がありますが。
とりあえず参照先のサイトでは1つにまとめてましたが、長いのでこの下のやつをaudio.jsとして保存しましょう。

window.AudioContext = window.AudioContext || window.webkitAudioContext;  
var context = new AudioContext();

// Audio 用の buffer を読み込む
var getAudioBuffer = function(url, fn) {  
  var req = new XMLHttpRequest();
  // array buffer を指定
  req.responseType = 'arraybuffer';

  req.onreadystatechange = function() {
    if (req.readyState === 4) {
      if (req.status === 0 || req.status === 200) {
        // array buffer を audio buffer に変換
        context.decodeAudioData(req.response, function(buffer) {
          // コールバックを実行
          fn(buffer);
        });
      }
    }
  };

  req.open('GET', url, true);
  req.send('');
};

// サウンドを再生
var playSound = function(buffer) {  
  // source を作成
  var source = context.createBufferSource();
  // buffer をセット
  source.buffer = buffer;
  // context に connect
  source.connect(context.destination);
  // 再生
  source.start(0);
};

これを読み込むscriptタグをHTMLに書いといて

var df='ファイル名';
  getAudioBuffer(df, function(buffer) {
      // サウンドを再生
      playSound(buffer);
  });

を適当なところに書いたりfunctionの中に入れたりしてやれば鳴ります。mp3しか試した事はないのですが…

以上です。次回は
押入れに眠るPCを有効活用!!さくらのレンタルサーバをSSL化(仮)です。多分こんな長いタイトルにはならないと思いますが