Início / coding / Perguntas / 79589671
Accepted
Anastasia
Asked: 2025-04-24 08:47:34 +0800 CST

Carregue ou digite notas musicais na área de texto e aumente-as ao clicar

  • 772

var notes = ['do', 'do#', 're', 're#', 'mi', 'fa', 'fa#',
  'sol', 'sol#', 'la', 'la#', 'si'
];

function stepUp() {
  var text = document.getElementById('textarea');
  if (typeof text.count == 'undefined') {
    text.count = 0;
  } else {
    text.count++;
  }

  if (text.count == notes.length) {
    text.count = 0;
  }
  text.innerHTML = notes[text.count];
}

function stepDown() {
  var text = document.getElementById('textarea');
  text.count--;

  if (text.count == notes.length) {
    text.count = 0;
  }

  if (text.count < 0) {
    text.count = 11;
  }
  text.innerHTML = notes[text.count];
}

/* Load file*/
function load_song() {
  var fileToLoad = document.getElementById("load_button").files[0];
  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent) {
    var textFromFileLoaded = fileLoadedEvent.target.result;
    document.getElementById("textarea").value = textFromFileLoaded;
  };
  fileReader.readAsText(fileToLoad, "UTF-8");
}
body {
  font-family: Arial, sans-serif;
  background-color: #333;
  color: #ddd;
  text-align: center;
}

container {
  display: flex;
  margin: 2vmin;
  position: relative;
  top: 3vmin;
}
<div class="container">
  <textarea id="textarea" rows="5" cols="50">---</textarea>
</div>

<button onclick="stepUp()" class="stepUp_Button">Up</button>
<button onclick="stepDown()" class="stepDown_Button">Down</button>

<!-- Load button -->
<span>Load File:&nbsp;</span>
<input type="file" id="load_button">
<button class="load_button" onclick="load_song()">Load</button>

Gostaria de escrever na textarea em ordem aleatória as notas

"do do# re re# mi fa fa# sol sol# la la# si"

(ou carregue um arquivo .txt com essas notas escritas em ordem aleatória sol mi do# fa sietc.)

e pressionando o botão para cima para aumentá-los todos +1, ou seja do => do# , e pressionando o botão para baixo para diminuí-los todos -1.do => si

Embora pareça funcionar para uma nota, se eu escrever na área de texto e pressionar o botão para cima, não funciona de jeito nenhum, assim como não funciona se eu carregar um arquivo .txt simples. Qualquer ideia seria extremamente útil. Obrigado!

javascript

1 respostas

  1. Best Answer

    para começar...

    const
  txtElm = document.querySelector('#my-textarea')
, notes  = ['do','do#','ré','ré#','mi','fa','fa#','sol','sol#','la','la#','si']
, nExchg = {re:'ré', reb:'do#', 'réb':'do#', mib:'ré#', solb:'fa#', lab:'sol#', sib:'la#' }
, zExchg = val => nExchg[val.toLowerCase()] || val
  ;
function stepOn( stepV = +1 ) 
  {
  let txtArr = txtElm.value.split(/([A-Za-zÉé]+\#?)/) // cut to isolate strings of notes
    ;
  txtElm.value = txtArr.reduce( (acc, Nx) =>  // Nx -> Note x string
    {
    if (!Boolean(Nx))                       // empty string or undefined value
      return acc
      ;
    let
      NxDz   = zExchg(Nx)                                 // may change Bémols to dièses + Re->ré
    , isUpC  = Nx[0].toUpperCase() === Nx[0]              // first letter upperCase testing
    , noteXi = notes.findIndex(x=>NxDz.toLowerCase()===x) // search in notes array
      ;
    if (noteXi===-1) // not found in notes array
      acc += Nx      // so, this is just a text to add.
      ;
    else 
      {
      let Nx2 = notes[ (noteXi + stepV + notes.length) % notes.length ] // next or prev step note.
        ;
      acc += isUpC ? Nx2.toUpperCase() : Nx2;  // keep upper or lower case status on conversion.
      }
    return acc;  
    }, '')
  }
    button
  {
  min-width : 5em;
  padding   : .2em .7em;
  }
    <div class="container">
<div class="container">
  <textarea id="my-textarea" 
    rows="5"             cols="50"
    autocomplete="off"   autocorrect="off" 
    autocapitalize="off" spellcheck="false" >
sol mi do# fa si etc...
reb -> do#,  mib -> re#,  solb -> fa#  
lab -> sol#,  sib -> la#
Do  RE
  </textarea>
</div>

<button onclick="stepOn( +1 )" > Up    </button>
<button onclick="stepOn( -1 )" > Down  </button>

    • 0

relate perguntas