;(function (window, undefined) {
  var isTouchDevice = 'ontouchend' in document;
  var eventNames = {
      start: isTouchDevice ? 'touchstart' : 'mousedown',
      move:  isTouchDevice ? 'touchmove'  : 'mousemove',
      end:   isTouchDevice ? 'touchend'   : 'mouseup',
      click: 'click'
  };
  function AudioBufferLoader(ele, url) {
      // WebKitのブラウザではプリフィックスをつける
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      try {
          // AudioContextはすべての音声の再生を管理しています
          // インスタンス化してメソッドを使用します
          this.context = new AudioContext;
      }
      catch(e) {
          // Web Audio API 非対応のブラウザではalertを出します
          alert('Web Audio API is not supported in this browser');
      }
      this.ele = document.getElementById(ele);
      // 引数からオーディオファイルのurlを受け取ります
      this.url = url;
      this.buffer = null;
  }
  AudioBufferLoader.prototype = {
      loadBuffer: function(url) {
          var _this = this;
          var request = new XMLHttpRequest();
          request.open('get', url, true);
          // arraybuffer は  XMLHttpRequest Level 2 の仕様です｡音声などのバイナリデータを処理します
          request.responseType = 'arraybuffer';
          request.onload = function() {
              _this.context.decodeAudioData(
                  request.response,
                  function(buffer) {
                      if (! buffer) {
                          alert('error decodeing file data: ' + url);
                          return;
                      }
                      _this.buffer = buffer;
                      _this.events();
                  },
                  function(error) {
                      console.error('decodeAudioData error', error);
                  }
              );
          };
          request.onerror = function() {
              alert('AudioBufferLoader: XHR error');
          };
          request.send();
      },
      events: function() {
          var _this = this;
          var context = _this.context;
          _this.ele.addEventListener(eventNames.start, function() {
              this.className = '';
              // source は再生の度に生成する必要があります
              var source = context.createBufferSource();
              source.buffer = _this.buffer;
              source.connect(context.destination);
              // noteOn は古い書き方なので､start を使う
              // ここで音が鳴ります
              source.start(0);
              this.className = 'tap';
          });
          _this.ele.addEventListener(eventNames.end, function() {
              this.className = '';
          });
      },
      load: function() {
          var _this = this;
          _this.loadBuffer(_this.url);
      }
  };

  // 音声ファイルをロード
  var kick = new AudioBufferLoader('kick', 'sound/kick.m4a');
  kick.load();

  var cymbal = new AudioBufferLoader('cymbal', 'sound/cymbal.m4a');
  cymbal.load();

  var hat = new AudioBufferLoader('hat', 'sound/hat.m4a');
  hat.load();

  var snare = new AudioBufferLoader('snare', 'sound/snare.m4a');
  snare.load();
}(this));