logo

한국어

기타 코드 트레이너

관리자 2013.12.12 11:25 조회 수 : 33

guitar_chord_trainer.htm


<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=3.0, user-scalable=no, width=device-width" />
<title>Guitar Chord Trainer</title>
<style type="text/css">
.style_chord {
 border: thin dotted #0000FF;
 margin: 5px;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 42px;
 color: #FF0000;
 font-weight: bold;
 font-style: normal;
 font-variant: normal;
 z-index: inherit;
}
.style_finger {
 font-family: "Courier New", Courier, monospace;
 font-weight: bold;
 font-size: 30px;
 color: #0066FF;
}
.style_remaining {
 font-family: "Courier New", Courier, monospace;
 font-size:18pt;
 font-weight: bold;
 color: #6600FF;
 text-align: left;
}
.style1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-align: left;
}
.style2 {
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 12px;
 text-align: left;
}
.style3 {
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 20px;
 text-align: left;
}
a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
}
.auto-style1 {
 border-style: solid;
 border-width: 1px;
}
.auto-style2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-align: center;
 width: 50px;
}
.auto-style3 {
 text-align: left;
}
</style>
</head>
<script language="javascript">
<!--
var sec_view_finger = 0;  // 운지가 보여지는 시간(초), 0이면 무조건 보임
var sec_next_chord =  5;  // 전체 하나의 코드가 보여지는 시간(초)

var json_chords =
{
  "chords": [
    {"chord":"C",  "check":"0", "finger":"12 24 35"},
    {"chord":"Cm", "check":"0", "finger":"15 22 (33 34)"},
    {"chord":"C7", "check":"0", "finger":"12 24 (35 33)"},
    {"chord":"D",  "check":"0", "finger":"- (23 21) 32"},
    {"chord":"Dm", "check":"0", "finger":"11 23 32"},
    {"chord":"D7", "check":"0", "finger":"12 (21 23)"},
    {"chord":"E",  "check":"0", "finger":"13 (25 24)"},
    {"chord":"Em", "check":"0", "finger":"- (25 24)"},
    {"chord":"E7", "check":"0", "finger":"13 25"},
    {"chord":"F",  "check":"0", "finger":"16 23 (35 34)"},
    {"chord":"Fm", "check":"0", "finger":"16 (35 34)"},
    {"chord":"F7", "check":"0", "finger":"16 23 35"},
    {"chord":"G",  "check":"0", "finger":"- 25 (36 31)"},
    {"chord":"Gm", "check":"0", "finger":"- - 36 - (54 55)"},
    {"chord":"G7", "check":"0", "finger":"11 25 36"},
    {"chord":"A",  "check":"0", "finger":"(24 23 22)"},
    {"chord":"Am", "check":"0", "finger":"12 (24 23)"},
    {"chord":"A7", "check":"0", "finger":"- 24 22"},
    {"chord":"B",  "check":"0", "finger":"- 25 - (44 43 42)"},
    {"chord":"Bm", "check":"0", "finger":"- 25 35 (44 43)"},
    {"chord":"B7", "check":"0", "finger":"14 (25 23 21)"},
  ]
};

var array_chord = new Array(100);
var array_finger = new Array(100);
var array_count = 0;
var timer = sec_next_chord;
var wait_next = false;;
var chord_no = Math.floor(Math.random() * json_chords.chords.length);

function set_array()
{
  var count = 0;

  for (ii=0; ii<json_chords.chords.length; ii++)
  {
    if (document.form_chord.elements[ii+1].checked)
    {
      array_chord[count] = json_chords.chords[ii].chord;
      array_finger[count] = json_chords.chords[ii].finger;
      count++;
    }
  }

  array_count = count;

  sec_view_finger = document.form_time.sec_view_finger.value;
  sec_next_chord = document.form_time.sec_next_chord.value;
}

function set_chord_no()
{
  var nn;

  set_array();
  do
  {
    if (array_count <= 2)
    {
      nn = Math.floor(Math.random() * (array_count));
      break;
    }
    nn = Math.floor(Math.random() * (array_count));
    wait_next = true;
  } while(nn == chord_no);

  wait_next = false;
  chord_no = nn;

}

function reset()
{
  var div_chord = document.getElementById('chord');
  var div_finger = document.getElementById('finger');
  var div_remaining_time = document.getElementById('remaining_time');

  div_chord.style.innerHTML = "";
  div_finger.style.innerHTML = "";
  div_remaining_time.style.innerHTML = "";
  sec_view_finger = document.form_time.sec_view_finger.value;
  sec_next_chord = document.form_time.sec_next_chord.value;
  set_chord_no();
  timer = sec_next_chord;
}

function display_timer()
{
  var div_chord = document.getElementById('chord');
  var div_finger = document.getElementById('finger');
  var div_remaining_time = document.getElementById('remaining_time');

  if (wait_next)
    return false;

  wait_next = false;

  sec_view_finger = document.form_time.sec_view_finger.value;
  sec_next_chord = document.form_time.sec_next_chord.value;

  if (timer == 0)
  {
    timer = sec_next_chord;
    if (sec_view_finger != 0)
      div_finger.style.display = "none";
    set_chord_no();
  }

  if (sec_view_finger == 0)
  {
    div_finger.innerHTML = array_finger[chord_no];
    div_finger.style.display = "";
  }
  else
  {
    if (timer == sec_view_finger)
    {
      div_finger.innerHTML = array_finger[chord_no];
      div_finger.style.display = "";
    }
  }

  div_chord.innerHTML = array_chord[chord_no];
  div_remaining_time.innerHTML = timer;

  timer--;
}

function write_chord_list()
{
  for (ii=0; ii<json_chords.chords.length; ii++)
  {
    document.write("<input type=\"checkbox\" name=\""+json_chords.chords[ii].chord+"\" id=\""+json_chords.chords[ii].chord+"\" onclick=\"set_array()\"");
    if (json_chords.chords[ii].check == 1)
      document.write("checked>");
    else
      document.write(">");
    document.write("<label for=\""+json_chords.chords[ii].chord+"\">"+json_chords.chords[ii].chord+"</label>&nbsp;");
    if (!((ii+1)%3))
      document.write("<br>\n");
  }
}

function check_all()
{
  if (document.form_chord.chord_check_all.checked == true)
  {
    for (ii=1; ii<json_chords.chords.length+1; ii++)
      document.form_chord.elements[ii].checked = true;
  }
  else
  {
    for (ii=1; ii<json_chords.chords.length+1; ii++)
      document.form_chord.elements[ii].checked = false;
  }
  set_array();
}

function main()
{
  set_array();

  document.getElementById('sec_view_finger').value = sec_view_finger;
  document.getElementById('sec_next_chord').value = sec_next_chord;

  window.setInterval("display_timer()", 1000);
}

//-->
</script>
<body>
<table class="auto-style1" style="width: 100%">
  <tr>
    <td colspan="3"><div id="chord" class="style_chord"> Ready !! </div></td>
  </tr>
  <tr>
    <td colspan="3"><div id="finger" class="style_finger"> </div></td>
  </tr>
  <tr>
    <td colspan="3"><hr></td>
  </tr>
  <tr>
    <form name="form_time" method="post" action="">
      <td class="style1" style="width: 50%; "><label for="label_sec_view_finger">View finger (sec.)</label>
        <script language="javascript">
        <!--//
          html_str = "<input name=\"sec_view_finger\" type=\"text\" id=\"sec_view_finger\" size=\"3\" value=\""+sec_view_finger+"\">";
          document.write(html_str);
        //-->
        </script></td>
       <td class="style1" style="width: 50%;"><label for="label_sec_next_chord">Next chord (sec.)</label>
        <script language="javascript">
        <!--//
          html_str = "<input name=\"sec_next_chord\" type=\"text\" id=\"sec_next_chord\" size=\"3\" value=\""+sec_next_chord+"\">";
          document.write(html_str);
        //-->
        </script></td>
    </form>
  </tr>

  <tr>
      <td colspan="3" class="style1"><hr></td>
  </tr>

  <tr>
      <td colspan="3" class="style1" style="height: 92px">
      <form name="form_chord" method="post" action="">
        <p class="style3">
          <input type="checkbox" name="chord_check_all" onclick="check_all()">
          <label for="ALL"><strong>ALL</strong></label>
          <br>
          <script language="javascript">
          <!--//
            write_chord_list();
          //-->
          </script>
        </p>
        <hr>
      </form>
      </td>
  </tr>

  <tr>
    <td class="auto-style2" style="width: 10%">sec.</td>
    <td class="auto-style3" style="width: 10%"><div id="remaining_time" class="style_remaining"></div></td>
    <td class="style1" onclick="reset();"><a href="#">[APPLY]</a></td>
  </tr>
</table>
</body>

<script language="javascript">
<!--//
main();
//-->
</script>
</html>