Retour

Cod’hymne

Même note, même valeur

Ce travail explore la transformation des extraits d’hymnes nationaux en séquences codées, révélant l’alignement entre les notions musicales et la syntaxe de la programmation. En me servant de Tone.js, je fais le pont entre les gammes et les variables, montrant que la musique peut couler tout aussi naturellement à travers les circuits d’un programme que dans les airs d’une salle de concert.

Code JS – La Marseillaise

const playBTN1fr = document.getElementById("play-btn-fr-1");
const playBTN2fr = document.getElementById("play-btn-fr-2");
const playBTN3fr = document.getElementById("play-btn-fr-3");
const playBTNallfr = document.getElementById("play-btn-fr-all");
const stopBTNfr = document.getElementById("stop-btn-fr");
const synth1fr = new Tone.Synth().toDestination();
const synth2fr = new Tone.Synth().toDestination();
const synth3fr = new Tone.Synth().toDestination();

Tone.Transport.bpm.value = 110;

const voice1fr = [
  { note: "D6", duration: "16n" },
  { note: "D6", duration: "2n" },
  { duration: "8n." },
  { note: "D6", duration: "16n" },
  { note: "B5", duration: "8n." },
  { note: "G5", duration: "16n" },
  { note: "A5", duration: "2n." },
  { duration: "8n." },
  { note: "D6", duration: "16n" },
  { note: "D6", duration: "2n" },
  { duration: "8n." },
  { note: "D6", duration: "16n" },
  { note: "B5", duration: "8n." },
  { note: "G5", duration: "16n" },
  { note: "A5", duration: "2n." },
  { note: "D5", duration: "4n" },
  { note: "G5", duration: "2n." },
  { note: "A5", duration: "4n" },
  { note: "B5", duration: "1n" },
  { note: "C6", duration: "2n" },
  { note: "D6", duration: "4n" },
  { note: "E6", duration: "4n" },
  { note: "A5", duration: "2n." },
  { note: "E6", duration: "4n" },
  { note: "D6", duration: "2n" },
  { duration: "8n." },
  { note: "B5", duration: "16n" },
  { note: "C6", duration: "8n." },
  { note: "A5", duration: "16n" },
  { note: "G5", duration: "8n" },
  { duration: "8n" },
  { note: "G5", duration: "8n" },
  { duration: "16n" },
  { note: "G5", duration: "16n" },
  { note: "G5", duration: "16n" },
];
const voice2fr = [
  { note: "B4", duration: "16n" },
  { note: "B4", duration: "2n" },
  { duration: "4n" },
  { note: "D4", duration: "8n." },
  { note: "D4", duration: "16n" },
  { note: "D4", duration: "2n." },
  { duration: "8n." },
  { note: "B4", duration: "16n" },
  { note: "B4", duration: "2n" },
  { duration: "4n" },
  { note: "D4", duration: "8n." },
  { note: "D4", duration: "16n" },
  { note: "D4", duration: "2n." },
  { note: "D4", duration: "4n" },
  { note: "B4", duration: "2n." },
  { note: "A4", duration: "4n" },
  { note: "G4", duration: "1n" },
  { note: "E4", duration: "1n" },
  { note: "F#4", duration: "2n." },
  { note: "F#4", duration: "4n" },
  { note: "G4", duration: "2n." },
  { note: "F#4", duration: "4n" },
  { note: "G4", duration: "8n" },
  { duration: "8n" },
  { note: "G4", duration: "8n" },
  { duration: "16n" },
  { note: "G4", duration: "16n" },
  { note: "G4", duration: "16n" },
];

const voice3fr = [
  { note: "G3", duration: "16n" },
  { note: "G3", duration: "2n" },
  { duration: "4n" },
  { note: "G3", duration: "8n." },
  { note: "G3", duration: "16n" },
  { note: "F#3", duration: "2n." },
  { duration: "8n." },
  { note: "G3", duration: "16n" },
  { note: "G3", duration: "2n" },
  { duration: "4n" },
  { note: "G3", duration: "8n." },
  { note: "G3", duration: "16n" },
  { note: "F#3", duration: "2n." },
  { note: "D3", duration: "4n" },
  { note: "G3", duration: "1n" },
  { note: "F3", duration: "1n" },
  { note: "E3", duration: "1n" },
  { note: "D3", duration: "2n." },
  { note: "D3", duration: "4n" },
  { note: "B3", duration: "2n." },
  { note: "D3", duration: "4n" },
  { note: "G3", duration: "8n" },
  { duration: "8n" },
  { note: "G3", duration: "8n" },
  { duration: "16n" },
  { note: "G3", duration: "16n" },
  { note: "G3", duration: "16n" },
];

playBTN1ca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime1 = 0;

  voice1ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth1ca.triggerAttackRelease(note, duration, time);
    }, currentTime1);

    currentTime1 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

playBTN2ca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime2 = 0;

  voice2ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth2ca.triggerAttackRelease(note, duration, time);
    }, currentTime2);

    currentTime2 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

playBTN3ca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime3 = 0;

  voice3ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth3ca.triggerAttackRelease(note, duration, time);
    }, currentTime3);

    currentTime3 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

playBTNallca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime1 = 0;
  let currentTime2 = 0;
  let currentTime3 = 0;

  voice1ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth1ca.triggerAttackRelease(note, duration, time);
    }, currentTime1);

    currentTime1 += Tone.Time(duration).toSeconds();
  });

  voice2ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth2ca.triggerAttackRelease(note, duration, time);
    }, currentTime2);

    currentTime2 += Tone.Time(duration).toSeconds();
  });

  voice3ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth3ca.triggerAttackRelease(note, duration, time);
    }, currentTime3);

    currentTime3 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

stopBTNca.addEventListener("click", () => {
  Tone.Transport.stop();
});

Code JS – Ô Canada

const playBTN1ca = document.getElementById("play-btn-ca-1");
const playBTN2ca = document.getElementById("play-btn-ca-2");
const playBTN3ca = document.getElementById("play-btn-ca-3");
const playBTNallca = document.getElementById("play-btn-ca-all");
const stopBTNca = document.getElementById("stop-btn-ca");
const synth1ca = new Tone.Synth().toDestination();
const synth2ca = new Tone.Synth().toDestination();
const synth3ca = new Tone.Synth().toDestination();

Tone.Transport.bpm.value = 116;

const voice1ca = [
  { note: "G5", duration: "2n" },
  { note: "Bb5", duration: "4n." },
  { note: "Bb5", duration: "8n" },
  { note: "Eb5", duration: "2n." },
  { note: "F5", duration: "4n" },
  { note: "G5", duration: "4n" },
  { note: "Ab5", duration: "4n" },
  { note: "Bb5", duration: "4n" },
  { note: "C6", duration: "4n" },
  { note: "F5", duration: "1n" },
  { note: "G5", duration: "2n" },
  { note: "A5", duration: "4n." },
  { note: "A5", duration: "8n" },
  { note: "Bb5", duration: "2n." },
  { note: "C6", duration: "4n" },
  { note: "D6", duration: "4n" },
  { note: "D6", duration: "4n" },
  { note: "C6", duration: "4n" },
  { note: "C6", duration: "4n" },
  { note: "Bb5", duration: "2n." },
];
const voice2ca = [
  { note: "G4", duration: "2n" },
  { note: "Bb4", duration: "4n." },
  { note: "Bb4", duration: "8n" },
  { note: "Eb4", duration: "2n." },
  { note: "D4", duration: "4n" },
  { note: "Eb4", duration: "4n" },
  { note: "Eb4", duration: "2n" },
  { note: "Eb4", duration: "4n" },
  { note: "Eb4", duration: "2n" },
  { note: "D4", duration: "2n" },
  { note: "Eb4", duration: "2n" },
  { note: "F#4", duration: "4n." },
  { note: "F#4", duration: "8n" },
  { note: "G4", duration: "2n." },
  { note: "F#4", duration: "4n" },
  { note: "F4", duration: "4n" },
  { note: "G4", duration: "4n" },
  { note: "Eb4", duration: "4n" },
  { note: "Eb4", duration: "4n" },
  { note: "D4", duration: "2n." },
];

const voice3ca = [
  { note: "Eb3", duration: "2n" },
  { note: "D3", duration: "4n." },
  { note: "D3", duration: "8n" },
  { note: "C3", duration: "2n." },
  { note: "Bb2", duration: "4n" },
  { note: "Eb3", duration: "4n" },
  { note: "C3", duration: "4n" },
  { note: "G3", duration: "4n" },
  { note: "A3", duration: "4n" },
  { note: "Bb3", duration: "1n" },
  { note: "Eb3", duration: "2n" },
  { note: "D3", duration: "4n." },
  { note: "D3", duration: "8n" },
  { note: "G3", duration: "2n." },
  { note: "F#3", duration: "4n" },
  { note: "F3", duration: "2n" },
  { note: "F3", duration: "2n" },
  { note: "Bb3", duration: "4n" },
  { note: "F3", duration: "4n" },
  { note: "Bb2", duration: "4n" },
  { duration: "4n" },
];

playBTN1ca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime1 = 0;

  voice1ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth1ca.triggerAttackRelease(note, duration, time);
    }, currentTime1);

    currentTime1 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

playBTN2ca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime2 = 0;

  voice2ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth2ca.triggerAttackRelease(note, duration, time);
    }, currentTime2);

    currentTime2 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

playBTN3ca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime3 = 0;

  voice3ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth3ca.triggerAttackRelease(note, duration, time);
    }, currentTime3);

    currentTime3 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

playBTNallca.addEventListener("click", () => {
  Tone.Transport.stop();
  Tone.Transport.cancel();

  Tone.start();

  let currentTime1 = 0;
  let currentTime2 = 0;
  let currentTime3 = 0;

  voice1ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth1ca.triggerAttackRelease(note, duration, time);
    }, currentTime1);

    currentTime1 += Tone.Time(duration).toSeconds();
  });

  voice2ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth2ca.triggerAttackRelease(note, duration, time);
    }, currentTime2);

    currentTime2 += Tone.Time(duration).toSeconds();
  });

  voice3ca.forEach(({ note, duration }) => {
    Tone.Transport.schedule((time) => {
      synth3ca.triggerAttackRelease(note, duration, time);
    }, currentTime3);

    currentTime3 += Tone.Time(duration).toSeconds();
  });

  Tone.Transport.start();
});

stopBTNca.addEventListener("click", () => {
  Tone.Transport.stop();
});