index.html

<script src="https://minipop.github.io/sionicjs/demo/pico.min.js"></script>
<script src="https://cat2151.github.io/sionicjs/dist/sionic.js"></script>
<textarea id="textarea2" rows="5" cols="40">#FM2OP@0,300,997,600,1000 @0 l8 o6 c
d
e
</textarea>
<br>
<textarea id="textarea4" rows="1" cols="40">#FM2OP@1,200,998,500,1000 #WAVB1{031E394C5E6971787B7A756B5A482C0EF7DDC7AF9F948B8A8C929BA7B8C8DDEE} @1 l2 o5</textarea>
<br>
<textarea id="textarea3" rows="5" cols="20">o3c;e;g;<c>;
o3f;f;a;<c>
o3g;d;f;b;
o3c;e;g;<c>;</textarea>
<input type="button" value="play" onclick="playAll()" />
<br>
<textarea id="textarea5" rows="6" cols="50" readonly></textarea>
<div>
play selection : SHIFT + ENTER / CTRL + S<br>
</div>
<div>
FM : #FM2OP@n,fb,dr,tl,mul<br>
波形メモリ : #WAVBn{16進数64文字}
</div>
<div>
  <a href="https://github.com/cat2151/mml-repl-like/blob/main/index.html/">ソースファイル GitHubリポジトリ</a><br>
  <a href="https://github.com/cat2151/sionicjs/">開発中のため、Sionic.js Fork版のほうを使っています</a>
</div>
<div>
  Powered by <a href="https://github.com/keim/SiON/">SiON</a> <a href="https://github.com/minipop/sionicjs/">Sionic.js</a> <a href="https://github.com/mohayonao/pico.js/">pico.js</a>
</div>

<script>
  let textarea2 = document.getElementById("textarea2");
  let textarea3 = document.getElementById("textarea3");
  let textarea4 = document.getElementById("textarea4");
  let textarea5 = document.getElementById("textarea5");

  textarea2.addEventListener("input", playInputtedMelody);
  textarea3.addEventListener("input", playInputtedChord);
  textarea4.addEventListener("input", playInputtedChord);

  textarea2.addEventListener('keypress', function(e) {
    // SHIFT+ENTER
    if (e.keyCode === 13 && e.shiftKey) {
      // 改行しない
      e.preventDefault();
      // 選択した範囲のMMLを鳴らす
      playSelectedMml(textarea2);
    }
  });
  textarea3.addEventListener('keypress', function(e) {
    if (e.keyCode === 13 && e.shiftKey) {
      e.preventDefault();
      playCurrentChord(textarea3, textarea4.value);
    }
  });

  textarea2.addEventListener('keydown', function(e) {
    // CTRL+S
    if (e.keyCode === 83 && e.ctrlKey) {
      // ページ保存ダイアログを開かない
      e.preventDefault();
      // 選択した範囲のMMLを鳴らす
      playSelectedMml(textarea2);
    }
  });
  textarea3.addEventListener('keydown', function(e) {
    if (e.keyCode === 83 && e.ctrlKey) {
      e.preventDefault();
      playCurrentChord(textarea3, textarea4.value);
    }
  });

  textarea2.addEventListener('keyup', function(e) {
    // cursor
    if (37 <= e.keyCode && e.keyCode <= 40) {
      // 現在位置のMMLを鳴らす
      playNowToneMml(textarea2);
    }
  });
  textarea3.addEventListener('keyup', function(e) {
    if (e.keyCode == 38 || e.keyCode == 40) {
      playCurrentChord(textarea3, textarea4.value);
    }
    if (e.keyCode == 37 || e.keyCode == 39) {
      playNowToneMml(textarea3, textarea4.value);
    }
  });

  let oldMml2 = "";
  let oldMml3 = "";

  // textareaで選択した範囲または現在行のMMLを鳴らす
  function playSelectedMml(textarea, mmlHead = "") {
    let playMml = "";
    if (isSelect(textarea)) {
      // 選択範囲からmmlを得る
      playMml = createSelectedMml(textarea.value, textarea.selectionStart, textarea.selectionEnd);
    } else {
      // 現在行からmmlを得る
      const currentLineNumber = calcCurrentLineNumber(textarea.value, textarea.selectionStart);
      playMml = createCurrentLineMml(textarea.value, currentLineNumber);
    }
    playMml = createHeadAddedMml(playMml, mmlHead);
    playAndDisp(playMml);
  }

  function playAll() {
    const mml2 = textarea2.value;
    const mmlChord = textarea3.value;
    const mmlHead = textarea4.value;
    const mml = mml2.replace(/\n/g, '') + ";\n" + createChordMml(mmlChord, mmlHead);
    oldMml2 = mml2;
    oldMml3 = mmlChord;
    playAndDisp(mml);
  }

  // 現在位置のMMLを鳴らす
  function playNowToneMml(textarea, mmlHead = "") {
    let newMml;
    if (isNote(textarea.value, textarea.selectionStart)) {
      newMml = createNowToneMml(textarea.value, textarea.selectionStart);
      newMml = createChordMml(newMml, mmlHead); // kt用
    } else {
      newMml = "";
    }
    playAndDisp(newMml);
  }

  // 入力した音のみを鳴らす
  function playInputtedMelody() {
    const mml2 = textarea2.value;
    let newMml;
    const isInserted = (oldMml2.length < mml2.length);
    if (isInserted) {
      newMml = createNowToneMml(textarea2.value, textarea2.selectionStart - 1);
    } else {
      if (isNote(textarea2.value, textarea2.selectionStart)) {
        newMml = createNowToneMml(textarea2.value, textarea2.selectionStart);
      } else {
        newMml = "";
      }
    }
    oldMml2 = mml2;
    playAndDisp(newMml);
  }

  function playInputtedChord() {
    playCurrentChord(textarea3, textarea4.value);
  }

  // 現在行のchord MMLを鳴らす(selectionStart)
  function playCurrentChord(textarea, mmlHead = "") {
    const currentLineNumber = calcCurrentLineNumber(textarea.value, textarea.selectionStart);
    let playMml = createCurrentLineMml(textarea.value, currentLineNumber);
    // console.log("1 : " + playMml)
    playMml = createChordMml(playMml, mmlHead);
    // console.log("2 : " + playMml)
    playAndDisp(playMml);
  }

  function playAndDisp(mml) {
    if (!mml) return;
    Pico.pause();
    Pico.play(Sionic(mml));
    textarea5.textContent = mml;
  }

  // 選択範囲のMMLを得る。選択範囲以外はnote削除する
  function createSelectedMml(mml, iStart, iEnd) {
    const mmlBefore = mml.slice(0, iStart);
    const mmlAfter = mml.slice(iEnd);
    const mmlCurrent = mml.slice(iStart, iEnd);
    // if (!containsNotes(mmlCurrent)) return mml; // 選択範囲にnotesがない場合用（無音でなく、全体を鳴らす）
    if (!containsNotes(mmlCurrent)) return ""; // 選択範囲にnotesがない場合用（無音）
    const newMml = removeNotes(mmlBefore) +
      mmlCurrent +
      removeNotes(mmlAfter);
    return newMml;
  }

  // 現在行のMMLを得る。現在行以外はnote削除する
  function createCurrentLineMml(mml, currentLineNumber) {
    const lines = splitByLine(mml);
    // if (currentLineNumber < 0) return mml;
    if (currentLineNumber < 0) return "";
    // if (currentLineNumber >= lines.length) return mml; // 末尾に改行追加した場合用 
    if (currentLineNumber >= lines.length) return "";
    let mmlBefore = lines.slice(0, currentLineNumber).join('\n');
    let mmlAfter = lines.slice(currentLineNumber + 1).join('\n');
    let mmlCurrent = lines[currentLineNumber];
    // if (!containsNotes(mmlCurrent)) return mml; // 現在行にnotesがない場合用（無音でなく、全体を鳴らす）
    if (!containsNotes(mmlCurrent)) return ""; // 現在行にnotesがない場合用（無音）

    if (mmlBefore)  mmlBefore  = removeNotes(mmlBefore) + '\n';
    if (mmlCurrent) mmlCurrent += '\n';
    mmlAfter = removeNotes(mmlAfter);

    const newMml = mmlBefore + mmlCurrent + mmlAfter;
    // console.log(newMml);
    return newMml;
  }

  // 範囲選択中か得る
  function isSelect(textarea) {
    return textarea.selectionStart != textarea.selectionEnd;
  }
  
  // 現在行の行番号を得る
  function calcCurrentLineNumber(str, selectionStart) {
    let beforeStr = str.substr(0, selectionStart);
    let beforeLines = beforeStr.split(/\n/);
    return beforeLines.length - 1; 
  }

  function createChordMml(mmlChord, mmlHead) {
    const parallelizedMml = parallelizeMml(mmlChord);
    const headAddedMml = createHeadAddedMml(parallelizedMml, mmlHead);
    return headAddedMml;
  }

  function isNote(mml, iStart) {
    return mml.slice(iStart, iStart + 1).match(/[a-g]/);
  }

  // 現在位置のMMLを得る。そこ以外はnote削除する
  function createNowToneMml(mml, iStart) {
    // + / -
    for (; 0 <= iStart; iStart--) {
      const isPlusMinus = mml[iStart].match(/[\+\-]/);
      if (!isPlusMinus) break;
    }    
    let iEnd = iStart + 1;
    // + / -
    for (iEnd = iStart + 1; iEnd < mml.length; iEnd++) {
      const isPlusMinus = mml[iEnd].match(/[\+\-]/);
      if (!isPlusMinus) break;
    }
    return createSelectedMml(mml, iStart, iEnd);
  }

  function splitByLine(mml) {
    const arr = mml.split("\n");
    return arr;
  }

  function removeNotes(mml) {
    const re = /[a-g][\+\-]*[\d]*[\.]*/g
    return mml.replace(re, '');
  }

  function containsNotes(mml) {
    const re = /[a-g]/
    return mml.match(re);
  }

  // example : "c;e;g; \n c;f;a;" -> "cc ; ef ; ga"
  function parallelizeMml(mml) {
    const lines = splitByLine(mml);
    const lenLines = lines.length;
    const maxTrackNumber = calcMaxTrackNumber(lines);
    let tracks = new Array(maxTrackNumber);
    for (let phase = 0; phase < lenLines; phase++) {
      let containsPhaseNotes = calcContainsPhaseNotes(lines[phase]);
      updateChordTracks(lines[phase], tracks, containsPhaseNotes);
    }
    const results = tracks.join(';\n')
    // console.log(results);
    return results;

    function calcContainsPhaseNotes(line) {
      const nowTracks = line.split(';');
      const lenNowTracks = nowTracks.length;
      for (let i = 0; i < lenNowTracks; i++) {
        if (nowTracks[i].match(/[a-g]/)) return true;
      }
      return false;
    }

    function updateChordTracks(line, tracks, containsPhaseNotes) {
      const nowTracks = line.split(';');
      const lenNowTracks = nowTracks.length;
      for (let i = 0; i < lenNowTracks; i++) {
        if (tracks[i] == undefined) tracks[i] = '';
        tracks[i] += addRest(nowTracks[i], containsPhaseNotes);
      }
      return tracks;
    }
    // console.log(updateChordTracks("c;e;g",[,,])); // test
    // console.log(updateChordTracks("c;f;a",["c","e","g"])); // test
    //
    // 音符のあったphaseのみ、rを付与する。2行目chord演奏時に先頭rなしにする用
    function addRest(mml, containsPhaseNotes) {
      if (!containsPhaseNotes) return mml;
      if (!mml) return "r";
      return mml;
    }
  }
  // console.log(parallelizeMml("c;e;g; \n c;f;g;")); // test
  //    
  function calcMaxTrackNumber(arr) {
    const lenArr = arr.length;
    let maxSeparates = 0;
    for (let i = 0; i < lenArr; i++) {
      const line = arr[i];
      const numOfSeparates = (line.match(/\;/g) || []).length;
      if (numOfSeparates > maxSeparates) maxSeparates = numOfSeparates;
    }
    return maxSeparates + 1;
  }
  //console.log(calcMaxTrackNumber(["a;b;c","a"])); // test
  //
  // trackごとにmmlHeadを付与する
  function createHeadAddedMml(mml, mmlHead) {
    if (!mml) return "";
    if (!mmlHead) return mml;
    mml = mml.replace(/\n/g, '');
    let arr = mml.split(";");
    const arrLength = arr.length;
    for (let i = 0; i < arrLength; i++) {
      arr[i] = mmlHead + arr[i];
    }
    const results = arr.join(';\n');
    // console.log(results);
    return results;
  }
</script>