|<- [[3.3 Interesting drum machine tracks]]|[[3.6 Playing samples with a clock]] ->|

[load and play a sample code](https://live.codecircle.com/d/HfvHJWxKLPJBxYpTW)
[une collection de samples de batterie gratuits par Alex McLean](https://github.com/tidalcycles/Dirt-Samples)

https://live.codecircle.com/d/KXB8oApK6uN4Syxpc

javascript
<code>
var contexte_audio = window.AudioContext || window.webkitAudioContext;

var contexte = new contexte_audio();

var instruments = {};

function charger_un_sample ( url, nom ) {
  /* charge un sample dont l'URL est donnée en paramètre 1 et le place dans l'objet instrument à l'emplacement de la clé donnée
  String, Function -> Void */

  // on créé l'objet requête
  var requete = new XMLHttpRequest();

  // que l'on paramètre :

  // 1 : requête GET, url de la requête, requête asynchrone : true
  requete.open('GET', url, true);

  // 2 : type de réponse
  requete.responseType = 'arraybuffer';

  // 3 : écouteur onload et fonction a exécuter alors
  requete.onload = function () {

    // les données audio
    var donnees_audio = requete.response;

    // sont passées pour décodage au contexte audio
    contexte.decodeAudioData( donnees_audio, function( buffer ) {

      // on ajoute le buffer à notre objet instruments
      instruments[nom] = buffer;
    });
  };

  // on envoie la requête
  requete.send();
}


charger_un_sample( 'cl_hat_3001.wav', 'charleston');

function charleston(){
  var player = contexte.createBufferSource();
  player.buffer = instruments.charleston;
  player.start();
  player.loop = false;
  player.connect(contexte.destination);
}

document.addEventListener( 'keyup', function ( evenement ) {
  charleston();
}, false);

</code>

==== samples_set.js ====


<code>
function Samples_set ( contexte ) {
  /* Set de samples permettant de charger simplement des samples et de les jouer */
  this.contexte = contexte;
  this.samples_set = {};
}

Samples_set.prototype.charger = function ( nom, url ) {
  /* Charge le sample et l'ajoute au set
  String, String -> Void */

  // on créé une référence à this (notre occurence de Sample_set)
  var self = this;

  // on créé l'objet requête
  var requete = new XMLHttpRequest();

  // que l'on paramètre :

  // 1 : requête GET, url de la requête, requête asynchrone : true
  requete.open('GET', url, true);

  // 2 : type de réponse
  requete.responseType = 'arraybuffer';

  // 3 : écouteur onload et fonction à exécuter alors
  requete.onload = function () {

    // les données audio
    var donnees_audio = requete.response;

    // sont passées pour décodage au contexte audio
    contexte.decodeAudioData( donnees_audio, function( buffer ) {

      // on ajoute le buffer à notre objet instruments
      self.samples_set[nom] = buffer;
    });
  };

  // on envoie la requête
  requete.send();
};

Samples_set.prototype.jouer = function ( nom ) {
  /* Joue le sample s'il est trouvé
    String -> Void */

  // si le sample existe, a été chargé
  if ( this.samples_set[nom] ) {
    try {

      //on créé un BufferSource
      var player = contexte.createBufferSource();

      // on y charge notre sample
      player.buffer = this.samples_set[nom];

      // on spécifie qu'on ne le joue pas en boucle
      player.loop = false;

      // on le connecte au contexte
      player.connect(this.contexte.destination);

      // on le lance
      player.start();

    // en cas d'erreur
    } catch (e) {
      console.error('erreur : Samples_set.jouer :', e);
    }
  }
};

var contexte_audio = window.AudioContext || window.webkitAudioContext;

var contexte = new contexte_audio();

var batterie = new Samples_set( contexte );

batterie.charger( 'charleston', 'cl_hat_3001.wav');

document.addEventListener( 'keyup', function ( evenement ) {
  batterie.jouer('charleston');
}, false);

</code>