master

分支 (1)

管理

管理

master

demo
/
piano
/
index.html

<!DOCTYPE HTML>
<html>

<head>
  <title>李夫人</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <meta name="keywords" content="李夫人" />
  <meta name="description" content="李夫人" />

  <link rel="stylesheet" href="./style.css" />

  <script type="text/javascript" src="./lib/jspdf.umd.min.js"></script>
  <script type="text/javascript" src="./lib/svg2pdf.umd.min.js"></script>
  <script type="text/javascript" src="./lib/opensheetmusicdisplay.min.js"></script>
</head>

<body>
  <!-- 操作区 -->
  <div class="action">
    <a class="action_bt" id="action"     title="操作"><span class="icon-list"       ></span></a>
    <a class="action_bt" id="open_score" title="打开"><span class="icon-folder-open"></span></a>
    <a class="action_bt" id="play_score" title="演奏"><span class="icon-play3"      ></span></a>
    <a class="action_bt" id="keys_score" title="键盘"><span class="icon-music"      ></span></a>
    <a class="action_bt" id="save_pdf"   title="文档"><span class="icon-files-empty"></span></a>
    <a class="action_bt" id="save_img"   title="图片"><span class="icon-images"     ></span></a>
  </div>
  <div id="score_container" class="container"></div><!-- 谱面 -->
  <div id="piano_padding"   class="padding"  ></div><!-- 填充 -->
  <div id="piano_player"    class="piano"    >      <!-- 钢琴 -->
    <!-- 白键 -->
    <div class="wkeys">
      <!-- 低音区 -->
      <!-- 大字二组 -->
      <div class="key wkey" key-code="1"><a>6</a><a>A2</a><a>A0</a></div>
      <div class="key wkey" key-code="3"><a>7</a><a>B2</a><a>B0</a></div>
      <!-- 大字一组 -->
      <div class="key wkey" key-code="4" ><a>1</a><a>C1</a><a>C1</a></div>
      <div class="key wkey" key-code="6" ><a>2</a><a>D1</a><a>D1</a></div>
      <div class="key wkey" key-code="8" ><a>3</a><a>E1</a><a>E1</a></div>
      <div class="key wkey" key-code="9" ><a>4</a><a>F1</a><a>F1</a></div>
      <div class="key wkey" key-code="11"><a>5</a><a>G1</a><a>G1</a></div>
      <div class="key wkey" key-code="13"><a>6</a><a>A1</a><a>A1</a></div>
      <div class="key wkey" key-code="15"><a>7</a><a>B1</a><a>B1</a></div>
      <!-- 大字组 -->
      <div class="key wkey" key-code="16"><a>1</a><a>C</a><a>C2</a></div>
      <div class="key wkey" key-code="18"><a>2</a><a>D</a><a>D2</a></div>
      <div class="key wkey" key-code="20"><a>3</a><a>E</a><a>E2</a></div>
      <div class="key wkey" key-code="21"><a>4</a><a>F</a><a>F2</a></div>
      <div class="key wkey" key-code="23"><a>5</a><a>G</a><a>G2</a></div>
      <div class="key wkey" key-code="25"><a>6</a><a>A</a><a>A2</a></div>
      <div class="key wkey" key-code="27"><a>7</a><a>B</a><a>B2</a></div>
      <!-- 中音区 -->
      <!-- 小字组 -->
      <div class="key wkey" key-code="28"><a>1</a><a>c</a><a>C3</a></div>
      <div class="key wkey" key-code="30"><a>2</a><a>d</a><a>D3</a></div>
      <div class="key wkey" key-code="32"><a>3</a><a>e</a><a>E3</a></div>
      <div class="key wkey" key-code="33"><a>4</a><a>f</a><a>F3</a></div>
      <div class="key wkey" key-code="35"><a>5</a><a>g</a><a>G3</a></div>
      <div class="key wkey" key-code="37"><a>6</a><a>a</a><a>A3</a></div>
      <div class="key wkey" key-code="39"><a>7</a><a>b</a><a>B3</a></div>
      <!-- 小字一组 -->
      <div class="key wkey" key-code="40"><a>1</a><a>c1</a><a>C4</a></div>
      <div class="key wkey" key-code="42"><a>2</a><a>d1</a><a>D4</a></div>
      <div class="key wkey" key-code="44"><a>3</a><a>e1</a><a>E4</a></div>
      <div class="key wkey" key-code="45"><a>4</a><a>f1</a><a>F4</a></div>
      <div class="key wkey" key-code="47"><a>5</a><a>g1</a><a>G4</a></div>
      <div class="key wkey" key-code="49"><a>6</a><a>a1</a><a>A4</a></div>
      <div class="key wkey" key-code="51"><a>7</a><a>b1</a><a>B4</a></div>
      <!-- 小字二组 -->
      <div class="key wkey" key-code="52"><a>1</a><a>c2</a><a>C5</a></div>
      <div class="key wkey" key-code="54"><a>2</a><a>d2</a><a>D5</a></div>
      <div class="key wkey" key-code="56"><a>3</a><a>e2</a><a>E5</a></div>
      <div class="key wkey" key-code="57"><a>4</a><a>f2</a><a>F5</a></div>
      <div class="key wkey" key-code="59"><a>5</a><a>g2</a><a>G5</a></div>
      <div class="key wkey" key-code="61"><a>6</a><a>a2</a><a>A5</a></div>
      <div class="key wkey" key-code="63"><a>7</a><a>b2</a><a>B5</a></div>
      <!-- 高音区 -->
      <!-- 小字三组 -->
      <div class="key wkey" key-code="64"><a>1</a><a>c3</a><a>C6</a></div>
      <div class="key wkey" key-code="66"><a>2</a><a>d3</a><a>D6</a></div>
      <div class="key wkey" key-code="68"><a>3</a><a>e3</a><a>E6</a></div>
      <div class="key wkey" key-code="69"><a>4</a><a>f3</a><a>F6</a></div>
      <div class="key wkey" key-code="71"><a>5</a><a>g3</a><a>G6</a></div>
      <div class="key wkey" key-code="73"><a>6</a><a>a3</a><a>A6</a></div>
      <div class="key wkey" key-code="75"><a>7</a><a>b3</a><a>B6</a></div>
      <!-- 小字四组 -->
      <div class="key wkey" key-code="76"><a>1</a><a>c4</a><a>C7</a></div>
      <div class="key wkey" key-code="78"><a>2</a><a>d4</a><a>D7</a></div>
      <div class="key wkey" key-code="80"><a>3</a><a>e4</a><a>E7</a></div>
      <div class="key wkey" key-code="81"><a>4</a><a>f4</a><a>F7</a></div>
      <div class="key wkey" key-code="83"><a>5</a><a>g4</a><a>G7</a></div>
      <div class="key wkey" key-code="85"><a>6</a><a>a4</a><a>A7</a></div>
      <div class="key wkey" key-code="87"><a>7</a><a>b4</a><a>B7</a></div>
      <!-- 小字五组 -->
      <div class="key wkey" key-code="88"><a>1</a><a>c5</a><a>B8</a></div>
    </div>
    <!-- 黑键盘 -->
    <div class="bkeys">
      <!-- 低音区 -->
      <!-- 大字二组 -->
      <div class="keys">
        <div class="key bkey" key-code="2"><a>#6</a><a>#A2</a><a>#A0</a></div>
      </div>
      <!-- 大字一组 -->
      <div class="keys">
        <div class="key bkey" key-code="5" ><a>#1</a><a>#C1</a><a>#C1</a></div>
        <div class="key bkey" key-code="7" ><a>#2</a><a>#D1</a><a>#D1</a></div>
        <div class="key bkey" key-code="10"><a>#4</a><a>#F1</a><a>#F1</a></div>
        <div class="key bkey" key-code="12"><a>#5</a><a>#G1</a><a>#G1</a></div>
        <div class="key bkey" key-code="14"><a>#6</a><a>#A1</a><a>#A1</a></div>
      </div>
      <!-- 大字组 -->
      <div class="keys">
        <div class="key bkey" key-code="17"><a>#1</a><a>#C</a><a>#C2</a></div>
        <div class="key bkey" key-code="19"><a>#2</a><a>#D</a><a>#D2</a></div>
        <div class="key bkey" key-code="22"><a>#4</a><a>#F</a><a>#F2</a></div>
        <div class="key bkey" key-code="24"><a>#5</a><a>#G</a><a>#G2</a></div>
        <div class="key bkey" key-code="26"><a>#6</a><a>#A</a><a>#A2</a></div>
      </div>
      <!-- 中音区 -->
      <!-- 小字组 -->
      <div class="keys">
        <div class="key bkey" key-code="29"><a>#1</a><a>#c</a><a>#C3</a></div>
        <div class="key bkey" key-code="31"><a>#2</a><a>#d</a><a>#D3</a></div>
        <div class="key bkey" key-code="34"><a>#4</a><a>#f</a><a>#F3</a></div>
        <div class="key bkey" key-code="36"><a>#5</a><a>#g</a><a>#G3</a></div>
        <div class="key bkey" key-code="38"><a>#6</a><a>#a</a><a>#A3</a></div>
      </div>
      <!-- 小字一组 -->
      <div class="keys">
        <div class="key bkey" key-code="41"><a>#1</a><a>#c1</a><a>#C4</a></div>
        <div class="key bkey" key-code="43"><a>#2</a><a>#d1</a><a>#D4</a></div>
        <div class="key bkey" key-code="46"><a>#4</a><a>#f1</a><a>#F4</a></div>
        <div class="key bkey" key-code="48"><a>#5</a><a>#g1</a><a>#G4</a></div>
        <div class="key bkey" key-code="50"><a>#6</a><a>#a1</a><a>#A4</a></div>
      </div>
      <!-- 小字二组 -->
      <div class="keys">
        <div class="key bkey" key-code="53"><a>#1</a><a>#c2</a><a>#C5</a></div>
        <div class="key bkey" key-code="55"><a>#2</a><a>#d2</a><a>#D5</a></div>
        <div class="key bkey" key-code="58"><a>#4</a><a>#f2</a><a>#F5</a></div>
        <div class="key bkey" key-code="60"><a>#5</a><a>#g2</a><a>#G5</a></div>
        <div class="key bkey" key-code="62"><a>#6</a><a>#a2</a><a>#A5</a></div>
      </div>
      <!-- 高音区 -->
      <!-- 小字三组 -->
      <div class="keys">
        <div class="key bkey" key-code="65"><a>#1</a><a>#c3</a><a>#C6</a></div>
        <div class="key bkey" key-code="67"><a>#2</a><a>#d3</a><a>#D6</a></div>
        <div class="key bkey" key-code="70"><a>#4</a><a>#f3</a><a>#F6</a></div>
        <div class="key bkey" key-code="72"><a>#5</a><a>#g3</a><a>#G6</a></div>
        <div class="key bkey" key-code="74"><a>#6</a><a>#a3</a><a>#A6</a></div>
      </div>
      <!-- 小字四组 -->
      <div class="keys">
        <div class="key bkey" key-code="77"><a>#1</a><a>#c4</a><a>#C7</a></div>
        <div class="key bkey" key-code="79"><a>#2</a><a>#d4</a><a>#D7</a></div>
        <div class="key bkey" key-code="82"><a>#4</a><a>#f4</a><a>#F7</a></div>
        <div class="key bkey" key-code="84"><a>#5</a><a>#g4</a><a>#G7</a></div>
        <div class="key bkey" key-code="86"><a>#6</a><a>#a4</a><a>#A7</a></div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="./player.js"></script>
  <script type="text/javascript" src="./lifuren.js"></script>
  <script type="text/javascript">
    console.info(`
北方有佳人，绝世而独立。
一顾倾人城，再顾倾人国。
宁不知倾城与倾国，佳人难再得。
    `);
    // 乐谱
    const music_xml = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <score-partwise version="4.0">
        <part-list>
          <score-part id="P1"><part-name>Music</part-name></score-part>
        </part-list>
        <part id="P1">
          <measure number="1">
            <attributes>
              <divisions>1</divisions>
              <key><fifths>0</fifths></key>
              <time><beats>4</beats><beat-type>4</beat-type></time>
              <clef><sign>G</sign><line>2</line></clef>
            </attributes>
            <note>
              <pitch><step>C</step><octave>4</octave></pitch>
              <duration>4</duration>
              <type>whole</type>
            </note>
          </measure>
        </part>
      </score-partwise>`;
    // 加载
    const lifuren = new Lifuren();
    lifuren.load_music_xml(music_xml);
    // 打开
    document.querySelector("#open_score").onclick = async () => {
      await lifuren.open_score();
    };
    // 播放
    document.querySelector("#play_score").onclick = async () => {
      const button = document.querySelector("#play_score");
      if(button.style.color) {
        button.style = "";
        button.firstElementChild.classList = 'icon-play3';
        await lifuren.stop_score();
      } else {
        button.style = "color:red";
        button.firstElementChild.classList = 'icon-stop2';
        await lifuren.play_score(() => {
          button.style = "";
          button.firstElementChild.classList = 'icon-play3';
        });
      }
    };
    // 键盘
    document.querySelector("#keys_score").onclick = async () => {
      const button      = document.querySelector("#keys_score");
      const pianoPlayer = document.querySelector("#piano_player");
      if(button.style.color) {
        button.style      = "";
        pianoPlayer.style = "display:none;";
      } else {
        button.style      = "color:green";
        pianoPlayer.style = "display:block;";
        await lifuren.register_audio_source_file();
      }
    };
    // 保存文档
    document.querySelector("#save_pdf").onclick = async () => {
      await lifuren.save_pdf();
    };
    // 保存图片
    document.querySelector("#save_img").onclick = async () => {
      await lifuren.save_img();
    };
  </script>
</body>

</html>