tunes.html

---
layout: page
title: Tunes
permalink: /tunes/
---

<div>
  <div id="paper"></div>
  <div id="audio"></div>
</div>

<pre id="abc-notes" class="d-none">
X: 1
T: Nigun Atik
C:Trad.
O: Israel
M: 4/4
L: 1/8
Q: "moderato"
K: Dm
[| "A"^cdBc decd | e8 | efga gfed | e8
w: Od na-shu-va el ni-gun a-tik v'-ha-ze-mer yif v'-ye-e-rav
| eaag gffe | "Bb7"d2e2 "A"^c4 | "Bb7"^cdBc decB | "A"A8
w: Od ga-vi-a m'-shu-mar na-shik na-shik a-li-ze e-na-yim v'-le-vav
| "F"a4 a4 | "C"gagf "A"g2e2  | "Dm"f6 ed | "A"e2a2 e2A2
w: to-vu to-vu o-ha-le-nu ki ha-ma-chol hif-tsi-a
| "F"a4 a4 | "C"gagf "A"g2e2  | "Dm"defd "A"efe^c | "Dm"d8 |]
w: to-vu to-vu o-ha-le-nu od na-shu-va el ni-gun a-tik
</pre>

<div class="alert alert-info mt-5">
  Soon more répertoire songs will be added.
</div>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/assets/js/abcjs_midi_6.0.0-beta.2-min.js"></script>
<script>
  function colorRange(range, color) {
    if (range && range.elements) {
      range.elements.forEach(function (set) {
        set.forEach(function (item) {
          item.setAttribute("fill", color);
        });
      });
    }
  }

  const abcString = document.querySelector("#abc-notes").innerText;
  const tunes = ABCJS.renderAbc(
    "paper",
    abcString,
    {
      responsive: "resize",
    }
  );
  ABCJS.renderMidi(
    "audio",
    abcString,
    {
      animate: {
        listener: function (lastRange, currentRange) {
          colorRange(lastRange, "#000000");
          colorRange(currentRange, "#3D9AFC");
        },
        target: tunes[0]
      },
      generateDownload: true
    }
  );
</script>