|
|
@@ -25,7 +25,6 @@ import TheIcon from "/src/components/The-icon";
|
|
|
import { cloneDeep } from "lodash";
|
|
|
import TheSpeed from "./component/the-speed";
|
|
|
import { getImage } from "./images";
|
|
|
-import { Dropdown, Dsubmenu, Doption, Trigger, Input, Select, Option } from "@arco-design/web-vue";
|
|
|
import {
|
|
|
NButton,
|
|
|
NDropdown,
|
|
|
@@ -50,6 +49,9 @@ import TheSetting from "./component/the-setting";
|
|
|
import { useRoute } from "vue-router";
|
|
|
import { api_musicSheetCreationDetail, api_musicSheetCreationUpdate } from "../api";
|
|
|
import instrumentsNames from "/src/constant/instrmentsNames.json";
|
|
|
+import { ALL_NOTES, NOTE_DOT } from "./noteData";
|
|
|
+import { Close } from "@vicons/ionicons5";
|
|
|
+import { UseDraggable } from "@vueuse/components";
|
|
|
|
|
|
const allPitches = [
|
|
|
"C,,,,",
|
|
|
@@ -185,6 +187,7 @@ export default defineComponent({
|
|
|
mearseDeleteShow: false,
|
|
|
staffShow: false, // 五线谱弹窗
|
|
|
settingShow: false, // 设置弹窗
|
|
|
+ selectMearesShow: false, // 选择小节弹窗
|
|
|
});
|
|
|
const data = reactive({
|
|
|
drawCount: 0,
|
|
|
@@ -220,6 +223,11 @@ export default defineComponent({
|
|
|
loadingAudioSrouce: false, // 加载音频资源
|
|
|
/** 移调类型 */
|
|
|
moveKeyType: "inset" as "inset" | "up" | "down", // 移调类型
|
|
|
+ selectMearesDrag: {
|
|
|
+ state: false,
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ }, // 选择小节拖拽状态
|
|
|
});
|
|
|
const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
|
|
|
const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
|
|
|
@@ -282,7 +290,7 @@ export default defineComponent({
|
|
|
// abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
|
|
|
// }
|
|
|
if (drag && drag.step) {
|
|
|
- handleMoveNote("drag", drag.step);
|
|
|
+ handleChange({ type: "move", value: { action: "drag", step: drag.step } });
|
|
|
return;
|
|
|
}
|
|
|
if (!abcElem?.midiPitches) return;
|
|
|
@@ -295,6 +303,7 @@ export default defineComponent({
|
|
|
midiBuffer: null as unknown as ABCJS.MidiBuffer,
|
|
|
abcOptions: {
|
|
|
selectionColor: "#0f81ff",
|
|
|
+ jazzchords: true,
|
|
|
add_classes: true,
|
|
|
clickListener: clickListener,
|
|
|
responsive: "resize",
|
|
|
@@ -411,14 +420,24 @@ export default defineComponent({
|
|
|
},
|
|
|
};
|
|
|
|
|
|
- const resetMidi = (useActive = false) => {
|
|
|
+ const staffNotes = ALL_NOTES();
|
|
|
+ const loadMiniMp3 = async () => {
|
|
|
data.loadingAudioSrouce = true;
|
|
|
const midiBuffer = new ABCJS.synth.CreateSynth();
|
|
|
- // console.log(midiBuffer);
|
|
|
+ const str = `X: 1\nM:4/4\nL:1/4\n${staffNotes}`;
|
|
|
+ const visualObj = ABCJS.parseOnly(str);
|
|
|
+ await midiBuffer.init({
|
|
|
+ visualObj: visualObj[0],
|
|
|
+ options: { ...abcData.synthOptions },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const resetMidi = (useActive = false) => {
|
|
|
+ const midiBuffer = new ABCJS.synth.CreateSynth();
|
|
|
midiBuffer
|
|
|
.init({
|
|
|
visualObj: abcData.visualObj,
|
|
|
- options: { ...abcData.synthOptions, midiTranspose: abcData.abc.visualTranspose },
|
|
|
+ options: { ...abcData.synthOptions },
|
|
|
})
|
|
|
.then(() => {
|
|
|
abcData.synthControl
|
|
|
@@ -456,7 +475,9 @@ export default defineComponent({
|
|
|
...abcData.abcOptions,
|
|
|
visualTranspose: abcData.abc.visualTranspose,
|
|
|
})[0];
|
|
|
- console.log("🚀 ~ visualObj:", abcData.visualObj);
|
|
|
+ if (data.drawCount < 3) {
|
|
|
+ console.log("🚀 ~ visualObj:", abcData.visualObj);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const renderBoxRect = () => {
|
|
|
@@ -464,6 +485,7 @@ export default defineComponent({
|
|
|
const padding = 4;
|
|
|
for (let i = 0; i < abcData.visualObj.lines.length; i++) {
|
|
|
const line = abcData.visualObj.lines[i];
|
|
|
+ console.log("🚀 ~ line:", line);
|
|
|
for (let j = 0; j < line.staff.length; j++) {
|
|
|
const staff = line.staff[j];
|
|
|
const voices = [...staff.voices].flat();
|
|
|
@@ -489,10 +511,6 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // const annotation = document.querySelectorAll("#paper .abcjs-annotation");
|
|
|
- // annotation.forEach((n) => {
|
|
|
- // n.setAttribute("color", "rgba(0,0,0,0)");
|
|
|
- // })
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
@@ -546,11 +564,15 @@ export default defineComponent({
|
|
|
* @returns
|
|
|
*/
|
|
|
const handleChange = async (params: { type: string; value: any }) => {
|
|
|
+ abcData.synthControl.disable(true);
|
|
|
+ if (data.playState) {
|
|
|
+ data.playState = false;
|
|
|
+ }
|
|
|
const type = params.type;
|
|
|
const value = params.value;
|
|
|
const activeNote =
|
|
|
abcData.abc.measures[data.active?.measureIndex]?.notes[data.active?.noteIndex] || null;
|
|
|
- console.log(params, activeNote);
|
|
|
+ // console.log(params, activeNote);
|
|
|
if (type === "type") {
|
|
|
// 设置音符类型
|
|
|
data.noteType = value;
|
|
|
@@ -595,59 +617,78 @@ export default defineComponent({
|
|
|
if (_values[1]) {
|
|
|
activeNote.accidental = _values[1] || "";
|
|
|
}
|
|
|
+ data.active.isFirstChecked = false;
|
|
|
+ }
|
|
|
+ await handleResetRender();
|
|
|
+ const oldNote = useIndexGetNote(`${data.active.measureIndex}.${data.active.noteIndex}`);
|
|
|
+ if (oldNote?.abselem?.beam?.elems?.length) {
|
|
|
+ // 判断是否需要分割beam
|
|
|
+ const elems: AbcElem[] = oldNote.abselem.beam.elems;
|
|
|
+ const beatDuration = abcData.visualObj.getBeatLength();
|
|
|
+ const beamLength = elems.map((n) => n.duration).reduce((a, b) => a + b);
|
|
|
+ if (beamLength >= beatDuration) {
|
|
|
+ abcData.abc.measures[data.active.measureIndex].notes[data.active.noteIndex].segno = " ";
|
|
|
+ await handleResetRender();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (oldNote?.midiPitches) {
|
|
|
+ ABCJS.synth.playEvent(oldNote.midiPitches, oldNote.midiGraceNotePitches, 1000);
|
|
|
+ }
|
|
|
+ const nextNote =
|
|
|
+ abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex + 1];
|
|
|
+ if (nextNote) {
|
|
|
+ const abcNextElem: AbcElem = useIndexGetNote(
|
|
|
+ `${data.active.measureIndex}.${data.active.noteIndex + 1}`
|
|
|
+ );
|
|
|
+ rangeHighlight(abcNextElem.startChar);
|
|
|
+ data.active = {
|
|
|
+ ...abcNextElem,
|
|
|
+ measureIndex: data.active.measureIndex,
|
|
|
+ noteIndex: data.active.noteIndex + 1,
|
|
|
+ isFirstChecked: true,
|
|
|
+ };
|
|
|
} else {
|
|
|
const notes = getMeasureNotes(data.active.measureIndex);
|
|
|
const duration = notes.map((n) => n.duration).reduce((a, b) => a + b);
|
|
|
if (duration >= 1) {
|
|
|
- message.warning("小节内音符总时值过长");
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- handleCreateNote(
|
|
|
- data.active.measureIndex,
|
|
|
- data.active.noteIndex,
|
|
|
- createNote({
|
|
|
- content: _values[0],
|
|
|
- noteType: data.noteType,
|
|
|
- accidental: _values[1] || "",
|
|
|
- })
|
|
|
- );
|
|
|
- }
|
|
|
- await handleResetRender();
|
|
|
- let _abcElem: AbcElem;
|
|
|
- if (data.active.isFirstChecked) {
|
|
|
- data.active.isFirstChecked = false;
|
|
|
- _abcElem = rangeHighlight(data.active.startChar);
|
|
|
- } else {
|
|
|
- const oldElem: AbcElem = abcData.visualObj.getElementFromChar(data.active.startChar);
|
|
|
- const abcElem: AbcElem = abcData.visualObj.getElementFromChar(oldElem.endChar);
|
|
|
- if (abcElem) {
|
|
|
- let indexStr: any = abcElem.chord?.find((n) => n.position === "left")?.name || "";
|
|
|
- indexStr = indexStr.split(".").map((n: string) => Number(n));
|
|
|
+ // 小节内音符总时值过长,自动跳转到下一小节
|
|
|
+ const nextMeasureNote = abcData.abc.measures[data.active.measureIndex + 1]?.notes[0];
|
|
|
+ if (nextMeasureNote) {
|
|
|
+ const abcNextElem: AbcElem = useIndexGetNote(`${data.active.measureIndex + 1}.${0}`);
|
|
|
+ rangeHighlight(abcNextElem.startChar);
|
|
|
+ data.active = {
|
|
|
+ ...abcNextElem,
|
|
|
+ measureIndex: data.active.measureIndex + 1,
|
|
|
+ noteIndex: 0,
|
|
|
+ isFirstChecked: true,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 到最后一个小节的最后一个音符了
|
|
|
+ rangeHighlight(data.active.startChar);
|
|
|
+ data.active.isFirstChecked = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ handleCreateNote(
|
|
|
+ data.active.measureIndex,
|
|
|
+ data.active.noteIndex,
|
|
|
+ createNote({
|
|
|
+ content: "z",
|
|
|
+ noteType: data.noteType,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ await handleResetRender();
|
|
|
+ const newNote = useIndexGetNote(
|
|
|
+ `${data.active.measureIndex}.${data.active.noteIndex + 1}`
|
|
|
+ );
|
|
|
+ rangeHighlight(newNote.startChar);
|
|
|
data.active = {
|
|
|
- ...abcElem,
|
|
|
- measureIndex: indexStr[0],
|
|
|
- noteIndex: indexStr[1],
|
|
|
- isFirstChecked: false,
|
|
|
+ ...newNote,
|
|
|
+ measureIndex: data.active.measureIndex,
|
|
|
+ noteIndex: data.active.noteIndex + 1,
|
|
|
+ isFirstChecked: true,
|
|
|
};
|
|
|
- const beam = (abcElem.abselem as any).beam;
|
|
|
- if (beam) {
|
|
|
- const elems: AbcElem[] = beam.elems;
|
|
|
- if (elems.length) {
|
|
|
- const beatDuration = abcData.visualObj.getBeatLength();
|
|
|
- const beamLength = elems.map((n) => n.duration).reduce((a, b) => a + b);
|
|
|
- if (beamLength >= beatDuration) {
|
|
|
- abcData.abc.measures[data.active.measureIndex].notes[data.active.noteIndex].segno =
|
|
|
- " ";
|
|
|
- await handleResetRender();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- _abcElem = rangeHighlight(abcElem.startChar);
|
|
|
}
|
|
|
- if (!_abcElem?.midiPitches) return;
|
|
|
- ABCJS.synth.playEvent(_abcElem.midiPitches, _abcElem.midiGraceNotePitches, 1000);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -705,6 +746,8 @@ export default defineComponent({
|
|
|
if (!activeNote) return;
|
|
|
activeNote.meter = `[${value}]`;
|
|
|
await handleResetRender();
|
|
|
+ const oldNote = useIndexGetNote(`${data.active.measureIndex}.${data.active.noteIndex}`);
|
|
|
+ rangeHighlight(oldNote.startChar);
|
|
|
} else {
|
|
|
abcData.abc.meter = value;
|
|
|
await handleResetRender();
|
|
|
@@ -870,10 +913,9 @@ export default defineComponent({
|
|
|
showToast("请先选择音符");
|
|
|
return;
|
|
|
}
|
|
|
- const activeNote =
|
|
|
- abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
|
|
|
if (!activeNote) return;
|
|
|
activeNote.dot = activeNote.dot ? "" : value;
|
|
|
+ // activeNote.dot = activeNote.dot ? "" : NOTE_DOT[activeNote.noteType];
|
|
|
await handleResetRender();
|
|
|
rangeHighlight(data.active.startChar);
|
|
|
}
|
|
|
@@ -887,6 +929,19 @@ export default defineComponent({
|
|
|
await handleResetRender();
|
|
|
rangeHighlight(data.active.startChar);
|
|
|
}
|
|
|
+
|
|
|
+ // 移动音符
|
|
|
+ if (type === "move") {
|
|
|
+ const step = value._step ? value._step : value.action === "up" ? -1 : 1;
|
|
|
+ if (!activeNote) return;
|
|
|
+ activeNote.content = moveNote(activeNote.content, step);
|
|
|
+ // arr now contains elements that are either a chord, a decoration, a note name, or anything else. It can be put back to its original string with .join("").
|
|
|
+
|
|
|
+ await handleResetRender();
|
|
|
+ const _abcElem = rangeHighlight(data.active.startChar);
|
|
|
+ if (!_abcElem?.midiPitches) return;
|
|
|
+ ABCJS.synth.playEvent(_abcElem.midiPitches, _abcElem.midiGraceNotePitches, 1000);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const getNextNote = (index: number): AbcElem => {
|
|
|
@@ -1007,27 +1062,6 @@ export default defineComponent({
|
|
|
await handleResetRender();
|
|
|
};
|
|
|
|
|
|
- /**
|
|
|
- * 移动音符
|
|
|
- * @param note 音符
|
|
|
- * @param step 移动步数
|
|
|
- */
|
|
|
- const handleMoveNote = async (type: "up" | "donw" | "drag", _step?: number) => {
|
|
|
- if (!data.active) return;
|
|
|
- const step = _step ? _step : type === "up" ? -1 : 1;
|
|
|
- const activeNote =
|
|
|
- abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
|
|
|
- if (!activeNote) return;
|
|
|
- activeNote.content = moveNote(activeNote.content, step);
|
|
|
- // arr now contains elements that are either a chord, a decoration, a note name, or anything else. It can be put back to its original string with .join("").
|
|
|
-
|
|
|
- await handleResetRender();
|
|
|
- const _abcElem = rangeHighlight(data.active.startChar);
|
|
|
- if (!_abcElem?.midiPitches) return;
|
|
|
- console.log(_abcElem, abcData.visualObj.millisecondsPerMeasure());
|
|
|
- ABCJS.synth.playEvent(_abcElem.midiPitches, _abcElem.midiGraceNotePitches, 1000);
|
|
|
- };
|
|
|
-
|
|
|
const handleKeyUp = (e: KeyboardEvent) => {
|
|
|
if (!data.active) return false;
|
|
|
console.log(e.key);
|
|
|
@@ -1038,7 +1072,7 @@ export default defineComponent({
|
|
|
if (["ArrowUp", "ArrowDown"].includes(e.key)) {
|
|
|
e.preventDefault();
|
|
|
e.stopPropagation();
|
|
|
- handleMoveNote(e.key === "ArrowUp" ? "up" : "donw");
|
|
|
+ handleChange({ type: "move", value: { action: e.key === "ArrowUp" ? "up" : "donw" } });
|
|
|
return false;
|
|
|
}
|
|
|
};
|
|
|
@@ -1079,7 +1113,7 @@ export default defineComponent({
|
|
|
const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any);
|
|
|
abcData.synthOptions.program = _instruments > -1 ? _instruments : 0;
|
|
|
abcData.abc.measures = abc.measures || initMusic(30);
|
|
|
- console.log("🚀 ~ abcData.abc:", abcData.abc);
|
|
|
+ // console.log("🚀 ~ abcData.abc:", abcData.abc);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -1097,8 +1131,10 @@ export default defineComponent({
|
|
|
};
|
|
|
onMounted(async () => {
|
|
|
await getDetailData();
|
|
|
+ loadMiniMp3();
|
|
|
if (ABCJS.synth.supportsAudio()) {
|
|
|
abcData.synthControl = new ABCJS.synth.SynthController();
|
|
|
+ // console.log("🚀 ~ abcData.synthControl:", abcData.synthControl)
|
|
|
abcData.synthControl.load("#audio", cursorControl, {
|
|
|
displayLoop: true,
|
|
|
displayRestart: true,
|
|
|
@@ -1116,8 +1152,8 @@ export default defineComponent({
|
|
|
e.returnValue = "还有没保存的";
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
- formateAbc(abcData.visualObj);
|
|
|
+ abcData.synthControl.restart();
|
|
|
+ // formateAbc(abcData.visualObj);
|
|
|
});
|
|
|
onUnmounted(() => {
|
|
|
document.removeEventListener("keyup", handleKeyUp);
|
|
|
@@ -1474,9 +1510,10 @@ export default defineComponent({
|
|
|
filterable
|
|
|
options={instruments.value}
|
|
|
v-model:value={abcData.synthOptions.program}
|
|
|
- onUpdate:value={() => {
|
|
|
+ onUpdate:value={async () => {
|
|
|
abcData.synthControl.disable(true);
|
|
|
data.playState = false;
|
|
|
+ await loadMiniMp3();
|
|
|
resetMidi(true);
|
|
|
popup.selectSubjectShow = false;
|
|
|
}}
|
|
|
@@ -1826,12 +1863,16 @@ export default defineComponent({
|
|
|
</NSpin>
|
|
|
<div>{data.playState ? "暂停" : "播放"}</div>
|
|
|
</div>
|
|
|
- <div class={[styles.topBtn, styles.btnDisabled]}>
|
|
|
- <div class={styles.btnImg}>
|
|
|
+ <div
|
|
|
+ class={[styles.topBtn]}
|
|
|
+ onClick={() => (popup.selectMearesShow = !popup.selectMearesShow)}
|
|
|
+ >
|
|
|
+ <div class={[styles.btnImg, popup.selectMearesShow && styles.btnImgActive]}>
|
|
|
<img class={styles.topBtnIcon} src={getImage("icon_22.png")} />
|
|
|
</div>
|
|
|
<div>选段</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class={[styles.topBtn, styles.btnDisabled]}>
|
|
|
<div class={styles.btnImg}>
|
|
|
<img class={styles.topBtnIcon} src={getImage("icon_23.png")} />
|
|
|
@@ -2044,18 +2085,7 @@ export default defineComponent({
|
|
|
<div id="paper"></div>
|
|
|
<Keys show={data.active ? true : false} onClick={(val) => handleChange(val)} />
|
|
|
|
|
|
- {/* <div>
|
|
|
- <textarea
|
|
|
- ref={textAreaRef}
|
|
|
- class={styles.value}
|
|
|
- id="abc"
|
|
|
- onChange={() => {
|
|
|
- console.log(textAreaRef.value.value);
|
|
|
- data.music = textAreaRef.value.value;
|
|
|
- handleResetRender();
|
|
|
- }}
|
|
|
- ></textarea>
|
|
|
- </div> */}
|
|
|
+ {/* <textarea ref={textAreaRef} class={styles.value} id="abc"></textarea> */}
|
|
|
<div id="audio" style={{ opacity: 0 }}></div>
|
|
|
<div id="warnings"></div>
|
|
|
|
|
|
@@ -2068,6 +2098,39 @@ export default defineComponent({
|
|
|
<div ref={downRef}></div>
|
|
|
|
|
|
<TheSetting v-model:show={popup.settingShow} />
|
|
|
+
|
|
|
+ {/* <UseDraggable
|
|
|
+ initialValue={{ x: 320, y: 60 }}
|
|
|
+ class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
|
|
|
+ >
|
|
|
+ <NSpace justify="space-between">
|
|
|
+ <div class={styles.btnLineTitle}>输入小节范围</div>
|
|
|
+ <NButton circle quaternary size="small" onClick={() => (popup.selectMearesShow = false)}>
|
|
|
+ <NIcon size={16} component={<Close />} />
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ <NSpace align="center">
|
|
|
+ <div style={{ width: "200px" }}>
|
|
|
+ <NInput pair placeholder={["开始小节", "结束小节"]}></NInput>
|
|
|
+ </div>
|
|
|
+ <div class={styles.topBtn}>
|
|
|
+ <NSpin show={data.loadingAudioSrouce} size="small">
|
|
|
+ <div class={styles.btnImg} onClick={() => togglePlay(data.playState ? "pause" : "play")}>
|
|
|
+ <img
|
|
|
+ style={{ display: data.playState ? "" : "none" }}
|
|
|
+ class={styles.topBtnIcon}
|
|
|
+ src={getImage("icon_21_1.png")}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: data.playState ? "none" : "" }}
|
|
|
+ class={styles.topBtnIcon}
|
|
|
+ src={getImage("icon_21.png")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </NSpin>
|
|
|
+ </div>
|
|
|
+ </NSpace>
|
|
|
+ </UseDraggable> */}
|
|
|
</div>
|
|
|
);
|
|
|
},
|
