五线谱 谱面

src/assets/index.scss

@@ -10,3 +10,8 @@ body,
 body {
    font-size: 16px; // 防止rem时候body上面的字体太小，如果没有设置字体大小，可以应用16px
 }
+
+::-webkit-scrollbar {
+   width: 0;
+   height: 0;
+}

src/views/rhythm/components/firstTone/firstTone.vue

@@ -0,0 +1,11 @@
+<!--
+* @FileDescription: 固定调谱面
+* @Date:2025-01-03 13:45:37
+-->
+<template>
+   <div class="firstTone"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>

src/views/rhythm/components/firstTone/index.ts

@@ -0,0 +1,2 @@
+import firstTone from "./firstTone.vue"
+export default firstTone

src/views/rhythm/components/fixedTone/fixedTone.vue

@@ -0,0 +1,11 @@
+<!--
+* @FileDescription: 固定调谱面
+* @Date:2025-01-03 13:50:54
+-->
+<template>
+   <div class="fixedTone"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>

src/views/rhythm/components/fixedTone/index.ts

@@ -0,0 +1,2 @@
+import fixedTone from "./fixedTone.vue"
+export default fixedTone

src/views/rhythm/components/staff/index.ts

@@ -0,0 +1,2 @@
+import staff from "./staff.vue"
+export default staff

src/views/rhythm/components/staff/staff.vue

@@ -0,0 +1,167 @@
+<!--
+* @FileDescription: 五线谱 谱面
+* @Date:2025-01-03 13:35:35
+-->
+<template>
+   <div class="staff">
+      <template v-for="(measure, index) in measuresData" :key="index">
+         <!-- <div
+            :style="{
+               color: 'red'
+            }"
+         >
+            {{ index + 1 }}
+         </div> -->
+         <div class="notes" v-for="(notes, i) in measure" :key="i">
+            <div :class="['note', `note${note.beams.length ? 4 : note.type}${note.rest ? 'rest' : ''}`]" v-for="(note, k) in notes" :key="k">
+               <template v-for="(line, b) in note.beams">
+                  <div :class="['noteLine', `line${b}`]" :key="b" v-if="!['end', 'backward hook'].includes(line)"></div>
+                  <div :class="['noteLine', `line${b}`, 'noteBackWardLine', b > 0 ? 'left' : 'right']" :key="b" v-if="line === 'backward hook'"></div>
+               </template>
+               <component :is="beatSvgObj[note.beams.length ? 4 : `${note.rest ? 'rest' : ''}${note.type}`]" />
+               <div :class="['dot', note.rest && `dotRest${note.type}`]" v-if="note.dot"></div>
+               <img class="rhythmImg" src="../imgs/paishou.png" />
+            </div>
+         </div>
+      </template>
+   </div>
+</template>
+
+<script setup lang="ts">
+import svg_1Tem from "./svgs/1.vue"
+import svg_2Tem from "./svgs/2.vue"
+import svg_4Tem from "./svgs/4.vue"
+import svg_8Tem from "./svgs/8.vue"
+import svg_16Tem from "./svgs/16.vue"
+import svg_32Tem from "./svgs/32.vue"
+import svg_rest1Tem from "./svgs/1rest.vue"
+import svg_rest2Tem from "./svgs/2rest.vue"
+import svg_rest4Tem from "./svgs/4rest.vue"
+import svg_rest8Tem from "./svgs/8rest.vue"
+import svg_rest16Tem from "./svgs/16rest.vue"
+import svg_rest32Tem from "./svgs/32rest.vue"
+import { type measuresType } from "../../tools/formatXml"
+
+defineProps<{
+   measuresData: measuresType[]
+}>()
+
+const beatSvgObj: Record<string, any> = {
+   1: svg_1Tem,
+   2: svg_2Tem,
+   4: svg_4Tem,
+   8: svg_8Tem,
+   16: svg_16Tem,
+   32: svg_32Tem,
+   rest1: svg_rest1Tem,
+   rest2: svg_rest2Tem,
+   rest4: svg_rest4Tem,
+   rest8: svg_rest8Tem,
+   rest16: svg_rest16Tem,
+   rest32: svg_rest32Tem
+}
+</script>
+
+<style lang="scss" scoped>
+.staff {
+   width: calc(100% + 206px);
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: space-between;
+   .notes {
+      display: flex;
+      margin-right: 206px;
+      margin-bottom: 272px;
+      .note {
+         position: relative;
+         height: 125px;
+         margin-right: 86px;
+         &:last-child {
+            margin-right: 0;
+         }
+         .noteLine {
+            position: absolute;
+            width: 134px;
+            height: 14px;
+            background: #000000;
+            &.line0 {
+               left: 40px;
+               top: 0;
+            }
+            &.line1 {
+               left: 40px;
+               top: 24px;
+            }
+            &.line2 {
+               left: 40px;
+               top: 48px;
+            }
+            &.line3 {
+               left: 40px;
+               top: 72px;
+            }
+            &.line4 {
+               left: 40px;
+               top: 96px;
+            }
+         }
+         .noteBackWardLine {
+            width: 67px;
+            &.left {
+               transform-origin: left;
+               transform: rotateY(-180deg);
+            }
+         }
+         .rhythmImg {
+            position: absolute;
+            top: 157px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 110px;
+            height: 110px;
+         }
+         .dot {
+            position: absolute;
+            left: 57px;
+            bottom: 19px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #000000;
+            &.dotRest2 {
+               left: 57px;
+               bottom: 73px;
+            }
+         }
+      }
+      .note1 {
+         width: 56px;
+      }
+      .note2,
+      .note4 {
+         width: 44px;
+      }
+      .note8 {
+         width: 74px;
+      }
+      .note16,
+      .note32 {
+         width: 79px;
+      }
+      .note1rest,
+      .note2rest {
+         width: 54px;
+      }
+      .note4rest,
+      .note8rest {
+         width: 32px;
+      }
+      .note16rest {
+         width: 44px;
+      }
+      .note32rest {
+         width: 55px;
+      }
+   }
+}
+</style>

src/views/rhythm/components/staff/svgs/1.vue

@@ -0,0 +1,13 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 57 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-167, -202)" fill="#000000">
+            <g transform="translate(167.19, 202)">
+               <path
+                  d="M28.3080655,0 C43.9421784,0 56.616131,7.39152297 56.616131,16.5094286 C56.616131,25.6273343 43.9421784,33.0188573 28.3080655,33.0188573 C12.6739526,33.0188573 0,25.6273343 0,16.5094286 C0,7.39152297 12.6739526,0 28.3080655,0 Z M16.2861159,4.49010686 C10.9641099,8.45071548 12.5261814,19.0757398 19.2052362,25.7533346 C25.884291,32.4309294 34.9036833,32.5744499 40.4731128,28.6718168 C46.0425423,24.7691837 44.2330473,14.0861839 37.5539925,7.40858909 C30.8749377,0.730994279 21.6081218,0.529498238 16.2861159,4.49010686 Z"
+               />
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/16.vue

@@ -0,0 +1,21 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 79 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-916, -156)" fill="#000000">
+            <g transform="translate(916.35, 156)">
+               <g transform="translate(0, 0)">
+                  <path
+                     d="M43.9918373,0 L43.9917202,102.825738 C44.2663141,109.418809 37.6933962,117.352446 27.6389254,121.843009 C15.8976463,127.08688 3.85484118,125.649762 0.740551222,118.633093 C-2.37372833,111.616419 4.61982356,101.677265 16.3610808,96.4333444 C25.4943782,92.3542453 34.8101278,92.3177873 39.9638257,95.8055323 L39.9635823,0 L43.9918373,0 Z"
+                  />
+                  <path
+                     d="M44.0057669,0.504935287 C44.0057669,4.54640826 46.7678086,8.25477453 52.2918919,11.6300341 C60.578017,16.6929234 91.2414614,38.3717572 72.1476769,81.8707034 C73.7910474,73.2679636 74.485182,65.2613847 74.2300806,57.8509666 C73.8474285,46.7353394 71.0177441,42.5330986 65.4783006,34.886989 C59.9388571,27.2408794 50.1126011,21.4664376 44.0057669,19.9114126 C42.131074,16.7998979 42.131074,10.3310721 44.0057669,0.504935287 Z"
+                  />
+                  <path
+                     d="M44.0057669,21.5049353 C44.0057669,25.5464083 46.7678086,29.2547745 52.2918919,32.6300341 C60.578017,37.6929234 85.9955645,59.3520881 67.1037713,98.5049353 C68.9299816,91.2493861 70.0616536,84.5465795 70.4987873,78.3965154 C71.1544879,69.1714192 69.1701569,63.6737738 65.023294,56.4758359 C60.8764311,49.277898 51.2648167,42.0148028 44.0057669,40.9114126 C42.131074,37.7998979 42.131074,31.3310721 44.0057669,21.5049353 Z"
+                  />
+               </g>
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/16rest.vue

@@ -0,0 +1,19 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 44 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-423, -580)" fill="#000000">
+            <g transform="translate(423.2, 580.2)">
+               <path
+                  d="M7.86022962,82.4596643 L13.9041831,82.4596643 L43.4830629,6.29151294 C43.5984163,5.99446795 43.4511262,5.66015298 43.1540812,5.54479955 C43.0874824,5.51893681 43.0166596,5.50566795 42.9452153,5.50566795 C42.4325343,5.50566795 41.9679005,5.80747686 41.7594768,6.27587989 L7.86022962,82.4596643 L7.86022962,82.4596643 Z"
+               />
+               <path
+                  d="M42.0075476,6.31800093 C40.1221295,8.64444041 37.5033104,10.323191 34.1510901,11.3542527 C30.7988699,12.3853144 27.8088389,12.6378895 25.1809973,12.1119778 C26.1877571,11.1034825 26.7977403,9.49687862 27.0109469,7.29216608 C27.3307567,3.98509728 24.5702104,-0.0480202266 20.3026604,0.000432399214 C18.5494427,0.0203379661 17.6739221,0.246775889 16.0740383,1.11715967 C14.4741545,1.98754344 13.5365236,2.93143398 12.6754059,4.41485368 C11.2138398,6.9326465 11.4614135,10.8258718 14.2572088,13.360006 C17.0530041,15.8941402 21.5432254,16.3940471 25.498738,15.810504 C29.4542506,15.2269609 37.0449526,13.7391109 40.077375,11.2359119 L41.609483,8.08387846 L42.0075476,6.31800093 Z"
+               />
+               <path
+                  d="M30.2125203,36.9783684 C28.3271022,39.3048079 25.7082831,40.9835585 22.3560628,42.0146202 C19.0038426,43.0456819 16.0138116,43.2982569 13.38597,42.7723453 C14.3927298,41.76385 15.002713,40.1572461 15.2159196,37.9525335 C15.5357294,34.6454647 12.7751831,30.6123472 8.50763312,30.6607999 C6.75441541,30.6807054 5.87889484,30.9071434 4.279011,31.7775271 C2.67912716,32.6479109 1.74149631,33.5918014 0.880378609,35.0752211 C-0.581187502,37.593014 -0.333613814,41.4862393 2.46218148,44.0203735 C5.25797678,46.5545076 9.74819809,47.0544146 13.7037107,46.4708715 C17.6592233,45.8873284 25.2499253,44.3994784 28.2823477,41.8962793 L29.8144557,38.7442459 L30.2125203,36.9783684 Z"
+               />
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/1rest.vue

@@ -0,0 +1,12 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 54 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-1308, -209)" fill="#000000">
+            <g transform="translate(1308, 209)">
+               <rect x="0" y="0" width="54" height="5" />
+               <rect x="9.49599757" y="5" width="35" height="13" />
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/2.vue

@@ -0,0 +1,11 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 44 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-423, -156)" fill="#000000">
+            <path
+               d="M466.991837,156 L466.99172,258.825738 C467.266314,265.418809 460.693396,273.352446 450.638925,277.843009 C438.897646,283.08688 426.854841,281.649762 423.740551,274.633093 C420.626272,267.616419 427.619824,257.677265 439.361081,252.433344 C448.494378,248.354245 457.810128,248.317787 462.963826,251.805532 L462.963582,156 L466.991837,156 Z M441.727654,257.838101 C431.384641,262.443107 424.45679,269.448268 426.253866,273.484566 C428.050941,277.520864 437.892427,277.059835 448.235441,272.454829 C458.578454,267.849822 465.506305,260.844661 463.709229,256.808364 C461.912154,252.772066 452.070667,253.233095 441.727654,257.838101 Z"
+            />
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/2rest.vue

@@ -0,0 +1,12 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 54 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-1438, -209)" fill="#000000">
+            <g transform="translate(1465, 218) scale(1, -1) translate(-1465, -218)translate(1438, 209)">
+               <rect x="0" y="0" width="54" height="5" />
+               <rect x="9.49599757" y="5" width="35" height="13" />
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/32.vue

@@ -0,0 +1,24 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 79 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-1046, -156)" fill="#000000">
+            <g transform="translate(1046.35, 156)">
+               <g transform="translate(0, 0)">
+                  <path
+                     d="M43.9918373,0 L43.9917202,102.825738 C44.2663141,109.418809 37.6933962,117.352446 27.6389254,121.843009 C15.8976463,127.08688 3.85484118,125.649762 0.740551222,118.633093 C-2.37372833,111.616419 4.61982356,101.677265 16.3610808,96.4333444 C25.4943782,92.3542453 34.8101278,92.3177873 39.9638257,95.8055323 L39.9635823,0 L43.9918373,0 Z"
+                  />
+                  <path
+                     d="M44.0057669,0.504935287 C44.0057669,4.54640826 46.7678086,8.25477453 52.2918919,11.6300341 C60.578017,16.6929234 91.2414614,38.3717572 72.1476769,81.8707034 C73.7910474,73.2679636 74.485182,65.2613847 74.2300806,57.8509666 C73.8474285,46.7353394 71.0177441,42.5330986 65.4783006,34.886989 C59.9388571,27.2408794 50.1126011,21.4664376 44.0057669,19.9114126 C42.131074,16.7998979 42.131074,10.3310721 44.0057669,0.504935287 Z"
+                  />
+                  <path
+                     d="M44.0057669,21.5049353 C44.0057669,25.5464083 46.7678086,29.2547745 52.2918919,32.6300341 C60.578017,37.6929234 85.6110938,57.7316064 70.232496,98.4478528 C71.3048306,92.719128 72.0776717,86.5379334 72.5510193,79.9042689 C73.2610407,69.9537723 70.1134401,62.9249359 65.527013,55.9867977 C60.9405859,49.0486595 51.2648167,42.0148028 44.0057669,40.9114126 C42.131074,37.7998979 42.131074,31.3310721 44.0057669,21.5049353 Z"
+                  />
+                  <path
+                     d="M44.0057669,43.5049353 C44.0057669,47.5464083 46.7678086,51.2547745 52.2918919,54.6300341 C60.578017,59.6929234 84.2647885,73.6817755 68.1847079,110.736009 C69.6736342,104.552366 70.3962524,98.8562741 70.3525625,93.6477334 C70.2870277,85.8349224 69.7286535,82.0294759 64.8259419,74.8458875 C59.9232302,67.6622991 51.2648167,64.0148028 44.0057669,62.9114126 C42.131074,59.7998979 42.131074,53.3310721 44.0057669,43.5049353 Z"
+                  />
+               </g>
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/32rest.vue

@@ -0,0 +1,24 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 55 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-548, -564)" fill="#000000">
+            <g transform="translate(548, 564.2)">
+               <g transform="translate(0, -0)">
+                  <path
+                     d="M12.0198917,113.407183 L18.0638452,113.407183 L54.9193356,6.30281273 C55.0274176,5.98871965 54.8604127,5.64647912 54.5463196,5.53839712 C54.4833482,5.51672815 54.4172152,5.50566795 54.3506198,5.50566795 C53.8427406,5.50566795 53.3873239,5.81848252 53.2050552,6.2925283 L12.0198917,113.407183 L12.0198917,113.407183 Z"
+                  />
+                  <path
+                     d="M53.412952,6.31800093 C51.527534,8.64444041 48.9087148,10.323191 45.5564946,11.3542527 C42.2042743,12.3853144 39.2142434,12.6378895 36.5864017,12.1119778 C37.5931615,11.1034825 38.2031447,9.49687862 38.4163513,7.29216608 C38.7361612,3.98509728 35.9756148,-0.0480202266 31.7080649,0.000432399214 C29.9548471,0.0203379661 29.0793266,0.246775889 27.4794427,1.11715967 C25.8795589,1.98754344 24.941928,2.93143398 24.0808103,4.41485368 C22.6192442,6.9326465 22.8668179,10.8258718 25.6626132,13.360006 C28.4584085,15.8941402 32.9486298,16.3940471 36.9041424,15.810504 C40.859655,15.2269609 48.450357,13.7391109 51.4827795,11.2359119 L53.0148875,8.08387846 L53.412952,6.31800093 Z"
+                  />
+                  <path
+                     d="M41.6179247,36.9783684 C39.7325067,39.3048079 37.1136875,40.9835585 33.7614673,42.0146202 C30.409247,43.0456819 27.4192161,43.2982569 24.7913744,42.7723453 C25.7981342,41.76385 26.4081174,40.1572461 26.621324,37.9525335 C26.9411339,34.6454647 24.1805876,30.6123472 19.9130376,30.6607999 C18.1598199,30.6807054 17.2842993,30.9071434 15.6844154,31.7775271 C14.0845316,32.6479109 13.1469008,33.5918014 12.2857831,35.0752211 C10.8242169,37.593014 11.0717906,41.4862393 13.8675859,44.0203735 C16.6633812,46.5545076 21.1536025,47.0544146 25.1091151,46.4708715 C29.0646277,45.8873284 36.6553297,44.3994784 39.6877522,41.8962793 L41.2198602,38.7442459 L41.6179247,36.9783684 Z"
+                  />
+                  <path
+                     d="M30.2125203,66.459491 C28.3271022,68.7859304 25.7082831,70.464681 22.3560628,71.4957427 C19.0038426,72.5268045 16.0138116,72.7793795 13.38597,72.2534679 C14.3927298,71.2449726 15.002713,69.6383686 15.2159196,67.4336561 C15.5357294,64.1265873 12.7751831,60.0934698 8.50763312,60.1419224 C6.75441541,60.161828 5.87889484,60.3882659 4.279011,61.2586497 C2.67912716,62.1290335 1.74149631,63.072924 0.880378609,64.5563437 C-0.581187502,67.0741365 -0.333613814,70.9673619 2.46218148,73.501496 C5.25797678,76.0356302 9.74819809,76.5355371 13.7037107,75.951994 C17.6592233,75.368451 25.2499253,73.8806009 28.2823477,71.3774019 L29.8144557,68.2253685 L30.2125203,66.459491 Z"
+                  />
+               </g>
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/4.vue

@@ -0,0 +1,11 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 44 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-553, -156)" fill="#000000">
+            <path
+               d="M596.991837,156 L596.99172,258.825738 C597.266314,265.418809 590.693396,273.352446 580.638925,277.843009 C568.897646,283.08688 556.854841,281.649762 553.740551,274.633093 C550.626272,267.616419 557.619824,257.677265 569.361081,252.433344 C578.494378,248.354245 587.810128,248.317787 592.963826,251.805532 L592.963582,156 L596.991837,156 Z"
+            />
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/4rest.vue

@@ -0,0 +1,13 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 32 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-1579, -171)" fill="#000000" fill-rule="nonzero">
+            <g transform="translate(1579, 171)">
+               <path
+                  d="M10.6370135,79.6991963 C10.6370135,83.9657022 13.1727056,88.6003838 18.2655787,93.6032409 C18.1366452,94.0797035 17.7928225,94.3395922 17.2985775,94.3395922 C14.5265073,94.3395922 0,83.7274709 0,74.9562279 C0,67.7659743 4.72756155,60.6840077 12.0982598,60.6840077 C14.3975738,60.6840077 16.8258213,61.4203589 19.3615134,62.7631171 C15.622442,56.9156217 10.2931908,51.3063576 0.859556643,39.6113669 C9.1972561,31.9229933 13.323128,24.9926284 13.323128,18.6470131 C13.323128,14.548549 10.6518746,9.19241672 5.30936796,2.57861618 L5.30937481,2.57861065 C4.87300813,2.03840689 4.95718471,1.24674014 5.49738846,0.810373467 C5.5057244,0.803639847 5.51414608,0.797013066 5.52265144,0.790494746 C6.07704121,0.365622417 6.87088999,0.470617048 7.29576232,1.02500682 C7.30273111,1.03409996 7.30957602,1.04328737 7.31629515,1.05256651 L28.0860134,29.7355969 L28.0860134,29.7355969 C20.4574481,39.00496 16.7183767,45.6970936 16.7183767,49.9635994 C16.7183767,56.4175018 26.8826341,65.3186892 31.8465737,73.3752384 C28.3009025,71.7725915 24.7982092,70.9279533 21.5318939,70.9279533 C15.364575,70.9279533 10.6370135,74.0899323 10.6370135,79.6991963 Z"
+               />
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/8.vue

@@ -0,0 +1,20 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 74 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-788, -156)" fill="#000000">
+            <g transform="translate(788, 156)">
+               <g transform="translate(-0, -0)">
+                  <g transform="translate(0, 0)">
+                     <path
+                        d="M43.9918373,0 L43.9917202,102.825738 C44.2663141,109.418809 37.6933962,117.352446 27.6389254,121.843009 C15.8976463,127.08688 3.85484118,125.649762 0.740551222,118.633093 C-2.37372833,111.616419 4.61982356,101.677265 16.3610808,96.4333444 C25.4943782,92.3542453 34.8101278,92.3177873 39.9638257,95.8055323 L39.9635823,0 L43.9918373,0 Z"
+                     />
+                     <path
+                        d="M44.0057669,0.504935287 C44.0057669,4.54640826 46.7678086,8.25477453 52.2918919,11.6300341 C60.578017,16.6929234 85.9955645,38.3520881 67.1037713,77.5049353 C68.9299816,70.2493861 70.0616536,63.5465795 70.4987873,57.3965154 C71.1544879,48.1714192 69.1701569,42.6737738 65.023294,35.4758359 C60.8764311,28.277898 51.2648167,21.0148028 44.0057669,19.9114126 C42.131074,16.7998979 42.131074,10.3310721 44.0057669,0.504935287 Z"
+                     />
+                  </g>
+               </g>
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/components/staff/svgs/8rest.vue

@@ -0,0 +1,16 @@
+<template>
+   <svg width="100%" height="100%" viewBox="0 0 32 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+         <g transform="translate(-179, -593)" fill="#000000">
+            <g transform="translate(179.2, 593.2)">
+               <path
+                  d="M7.03634162,55.4365734 L13.0802951,55.4365734 L31.6945918,6.29402757 C31.8084785,5.99336171 31.6570641,5.65730045 31.3563982,5.54341372 C31.2905119,5.51845719 31.2206425,5.50566795 31.1501881,5.50566795 C30.6359397,5.50566795 30.1682838,5.8036643 29.9510477,6.26977573 L7.03634162,55.4365734 L7.03634162,55.4365734 Z"
+               />
+               <path
+                  d="M30.2125203,6.31800093 C28.3271022,8.64444041 25.7082831,10.323191 22.3560628,11.3542527 C19.0038426,12.3853144 16.0138116,12.6378895 13.38597,12.1119778 C14.3927298,11.1034825 15.002713,9.49687862 15.2159196,7.29216608 C15.5357294,3.98509728 12.7751831,-0.0480202266 8.50763312,0.000432399214 C6.75441541,0.0203379661 5.87889484,0.246775889 4.279011,1.11715967 C2.67912716,1.98754344 1.74149631,2.93143398 0.880378609,4.41485368 C-0.581187502,6.9326465 -0.333613814,10.8258718 2.46218148,13.360006 C5.25797678,15.8941402 9.74819809,16.3940471 13.7037107,15.810504 C17.6592233,15.2269609 25.2499253,13.7391109 28.2823477,11.2359119 L29.8144557,8.08387846 L30.2125203,6.31800093 Z"
+               />
+            </g>
+         </g>
+      </g>
+   </svg>
+</template>

src/views/rhythm/index.ts

@@ -0,0 +1,2 @@
+import rhythm from "./rhythm.vue"
+export default rhythm

src/views/rhythm/rhythm.vue

@@ -1,7 +1,48 @@
 <template>
-   <div class="">22111</div>
+   <div class="rhythm">
+      <div class="musicScoreCon">
+         <div class="musicScoreBox">
+            <staff :measuresData="measuresData" />
+         </div>
+      </div>
+   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import staff from "./components/staff"
+import axios from "axios"
+import { parseMusicXML, type measuresType } from "./tools/formatXml"
+import { ref } from "vue"
 
-<style lang="scss" scoped></style>
+const measuresData = ref<measuresType[]>([])
+
+async function init() {
+   const xmlStringRes = await axios.get("https://oss.dayaedu.com/gyt/example/%E5%8D%A2%E6%B2%9F%E6%A1%A5-%E6%80%BB%E8%B0%B1-%E7%AC%AC5%E7%A8%BF.xml")
+   //const xmlStringRes = await axios.get("https://oss.dayaedu.com/MECMP/1734938660261.xml")
+   measuresData.value = parseMusicXML(xmlStringRes.data)
+}
+init()
+</script>
+
+<style lang="scss" scoped>
+.rhythm {
+   width: 100%;
+   height: 100%;
+   background: url("./imgs/bg.png") no-repeat;
+   background-size: cover;
+   position: relative;
+   .musicScoreCon {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 160px 160px;
+      overflow: auto;
+      .musicScoreBox {
+         width: 100%;
+         height: 100%;
+      }
+   }
+}
+</style>

src/views/rhythm/tools/formatXml.ts

@@ -0,0 +1,119 @@
+export function parseMusicXML(xmlStr: string) {
+   console.time("解析xml")
+   const xmlParse = new DOMParser().parseFromString(xmlStr, "text/xml")
+   const parts = xmlParse.getElementsByTagName("part")
+   let firstPart
+   for (const part of parts) {
+      if (part.children[0]?.tagName === "measure") {
+         firstPart = part
+         break
+      }
+   }
+   console.log(firstPart)
+   const measuresData = firstPart ? parsePart(firstPart) : []
+   console.timeEnd("解析xml")
+   return measuresData
+}
+
+export type measuresType = {
+   stem: "down" | "up"
+   type: 4
+   dot: boolean
+   rest: boolean
+   beams: ("begin" | "continue" | "end" | "backward hook")[]
+}[][]
+
+function parsePart(firstPart: Element): measuresType[] {
+   const measuresData = []
+   for (const measure of firstPart.children) {
+      const notesData = []
+      const notes = measure.getElementsByTagName("note")
+      let cacheNote = []
+      for (const note of notes) {
+         // 符杆朝向
+         const stem = note.querySelector("stem")?.textContent === "down" ? "down" : "up"
+         // 音符值
+         const type = note.querySelector("type")?.textContent || "quarter"
+         const dot = !!note.querySelector("dot") || false
+         // 是否是休止符
+         const rest = !!note.querySelector("rest") || false
+         // 音符连接线
+         const beams = Array.from(note.querySelectorAll("beam")).map(item => {
+            return item?.textContent
+         })
+         const noteData = {
+            stem,
+            type: formatBeatUnit(type),
+            dot,
+            rest,
+            beams
+         }
+         // 根据beams信息把多个音符组成一个大类
+         if (noteData.beams.length) {
+            if (noteData.beams[0] === "begin") {
+               cacheNote = []
+            }
+            cacheNote.push(noteData)
+            if (noteData.beams[0] !== "end") {
+               continue
+            }
+            notesData.push(cacheNote)
+         } else {
+            notesData.push([noteData])
+         }
+      }
+      measuresData.push(notesData)
+   }
+   console.log(measuresData)
+   return measuresData as any
+}
+
+export function formatBeatUnit(beatUnit: string) {
+   let multiple = 4
+   switch (beatUnit) {
+      case "1024th":
+         multiple = 1024
+         break
+      case "512th":
+         multiple = 512
+         break
+      case "256th":
+         multiple = 256
+         break
+      case "128th":
+         multiple = 128
+         break
+      case "64th":
+         multiple = 64
+         break
+      case "32nd":
+         multiple = 32
+         break
+      case "16th":
+         multiple = 16
+         break
+      case "eighth":
+         multiple = 8
+         break
+      case "quarter":
+         multiple = 4
+         break
+      case "half":
+         multiple = 2
+         break
+      case "whole":
+         multiple = 1
+         break
+      case "breve":
+         multiple = 0.5
+         break
+      case "long":
+         multiple = 0.25
+         break
+      case "maxima":
+         multiple = 0.125
+         break
+   }
+
+   return multiple
+}

vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
       proxy: {
          // 正则表达式写法
          "^/rhythmApi/.*": {
-            target: "https://dev.kt.colexiu.com",
+            target: "https://test.kt.colexiu.com",
             changeOrigin: true,
             rewrite: path => path.replace(/^\/rhythmApi/, "")
          }