runtime.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. import { reactive } from "vue";
  2. import { IAbc, IMeasure, INote } from "../types";
  3. import { getImage } from "./images";
  4. import { ABC_KEYS, ABC_NOTE_DATA } from "./noteData";
  5. import { TuneObject } from "abcjs";
  6. export const ABC_DATA = {
  7. /** 音符 */
  8. types: [
  9. { name: "全音符", value: "4", icon: "icon-quanyinfu" },
  10. { name: "2分音符", value: "2", icon: "icon-a-2fenyinfu" },
  11. { name: "4分音符", value: "", icon: "icon-a-4fenyinfu" },
  12. { name: "8分音符", value: "/", icon: "icon-a-8fenyinfu" },
  13. { name: "16分音符", value: "//", icon: "icon-a-16fenyinfu" },
  14. { name: "32音符", value: "///", icon: "icon-a-32fenyinfu" },
  15. ],
  16. /** 休止符 */
  17. reset: [{ name: "休止符", value: "z", icon: "icon-a-4fenxiuzhifu" }],
  18. /** 临时升降记号 */
  19. accidentals: [
  20. { name: "重降号", value: "__", icon: getImage("icon_2.png") },
  21. { name: "降号", value: "_", icon: getImage("icon_3.png") },
  22. { name: "还原号", value: "=", icon: getImage("icon_4.png") },
  23. { name: "升号", value: "^", icon: getImage("icon_5.png") },
  24. { name: "重升号", value: "^^", icon: getImage("icon_6.png") },
  25. ],
  26. /** 谱号 */
  27. clef: [
  28. { name: "低音谱号", value: "K:bass", icon: "icon-puhao-diyinpuhao" },
  29. { name: "高音谱号", value: "K:treble", icon: "icon-puhao-gaoyinpuhao" },
  30. { name: "次中音谱号", value: "K:tenor", icon: "icon-puhao-cizhongyinpuhao" },
  31. { name: "中音谱号", value: "K:alto", icon: "icon-puhao-zhongyinpuhao" },
  32. { name: "打击乐谱号", value: "K:perc", icon: "icon-puhao-gupu" },
  33. ],
  34. /** 调号 */
  35. key: [
  36. { name: "C大调", value: "K:C", step: 0, icon: "icon-a-diaohao-cdadiaoaxiaodiao1" },
  37. { name: "F#大调", value: "K:F#", step: 6, icon: "icon-a-diaohao-fdadiaodxiaodiao" },
  38. { name: "F大调", value: "K:F", step: 5, icon: "icon-a-diaohao-fdadiaodxiaodiao1" },
  39. { name: "E大调", value: "K:E", step: 4, icon: "icon-a-diaohao-edadiaocxiaodiao" },
  40. { name: "Eb大调", value: "K:Eb", step: 3, icon: "icon-a-diaohao-ebdadiaocxiaodiao" },
  41. { name: "D大调", value: "K:D", step: 2, icon: "icon-a-diaohao-Ddaxiaoexiaodiao" },
  42. { name: "C#大调", value: "K:C#", step: 1, icon: "icon-a-diaohao-cdadiaoaxiaodiao" },
  43. { name: "B大调", value: "K:B", step: -1, icon: "icon-a-diaohao-bdadiaogxiaodiao" },
  44. { name: "Cb大调", value: "K:Cb", step: -1, icon: "icon-a-diaohao-cbdadiaoabxiaodiao" },
  45. { name: "Db大调", value: "K:Db", step: -1, icon: "icon-a-diaohao-dbdadiaobbxiaodiao" },
  46. { name: "Bb大调", value: "K:Bb", step: -2, icon: "icon-a-diaohao-bbdadiaogxiaodiao" },
  47. { name: "A大调", value: "K:A", step: -3, icon: "icon-a-diaohao-Adadiaofxiaodiao" },
  48. { name: "Ab大调", value: "K:Ab", step: -4, icon: "icon-a-diaohao-abdadiaofxiaodiao" },
  49. { name: "G大调", value: "K:G", step: -5, icon: "icon-a-diaohao-Gdadiaoexiaodiao" },
  50. { name: "Gb大调", value: "K:Gb", step: -6, icon: "icon-a-diaohao-gbdadiaoebxiaodiao" },
  51. ],
  52. /** 拍号 */
  53. meter: [
  54. { name: "4/4", value: "M:4/4", icon: "icon-paihao-44" },
  55. { name: "2/2", value: "M:2/2", icon: "icon-paihao-22" },
  56. { name: "2/4", value: "M:2/4", icon: "icon-paihao-24" },
  57. { name: "3/4", value: "M:3/4", icon: "icon-paihao-34" },
  58. { name: "3/8", value: "M:3/8", icon: "icon-paihao-38" },
  59. { name: "6/8", value: "M:6/8", icon: "icon-paihao-68" },
  60. { name: "9/8", value: "M:9/8", icon: "icon-paihao-98" },
  61. { name: "12/8", value: "M:12/8", icon: "icon-a-paihao-128" },
  62. ],
  63. /** 演奏技法 */
  64. play: [
  65. { name: "加强音", value: "!marcato!", icon: getImage("icon_9.png") },
  66. { name: "重音", value: "!>!", icon: getImage("icon_10.png") },
  67. { name: "保持音", value: "!tenuto!", icon: getImage("icon_11.png") },
  68. { name: "断音", value: "!wedge!", icon: getImage("icon_12.png") },
  69. { name: "花型重复记号", value: "S", icon: "icon-fanfuyutiaoyue-sbiao" },
  70. { name: "Coda", value: "O", icon: "icon-fanfuyutiaoyue-weisheng" },
  71. { name: "波音", value: "P", icon: "icon-e1" },
  72. { name: "逆波音", value: "M", icon: "icon-d1" },
  73. { name: "换气符号(逗号)", value: "!breath!", icon: "icon-c1" },
  74. { name: "回音", value: "!turn!", icon: "icon-b" },
  75. // { name: "逆回音", value: "!turnx!", icon: "icon-b" },
  76. { name: "颤音", value: "T", icon: "icon-a1" },
  77. { name: "跳音", value: ".", icon: "icon-a-zoufajihao-duanzouhaoshang" },
  78. { name: "延迟音记号", value: "!fermata!", icon: "icon-f1" },
  79. ],
  80. /** 小节线 */
  81. bar: [
  82. { name: "单小节线", value: "|", icon: "icon-xiaojiexian-danxiaojiexian" },
  83. { name: "双小节线", value: "||", icon: "icon-xiaojiexian-shuangxiaojiexian" },
  84. { name: "结束线", value: "|]", icon: "icon-xiaojiexian-zhongzhixiaojiexian" },
  85. { name: "重复线开始", value: "|:", icon: "icon-a-xiaojiexian-zuoqishifanfuhao" },
  86. { name: "重复线结束", value: ":|", icon: "icon-a-xiaojiexian-youzhongzhifanfuhao" },
  87. { name: "双重复", value: "::", icon: "icon-xiaojiexian-jieshuyuqishifanfubiaozhi" },
  88. ],
  89. /** 连线 */
  90. tie: [
  91. { name: "延音线", value: "-", icon: getImage("icon_7.png") }, // 延音必须同音高
  92. { name: "连音线", value: ["(", ")"], icon: getImage("icon_8.png") }, // 需要是音符和结束音符,最低两个音符
  93. ],
  94. /** 8度线 */
  95. octave: [
  96. // 暂不支持
  97. { name: "高8度开始", value: ["!8va(!", "!8va)!"] },
  98. { name: "低8度", value: ["!8vb(!", "!8vb)!"] },
  99. ],
  100. /** 力度记号 */
  101. dynamics: [
  102. { name: "极弱", value: "!ppp!", icon: "icon-lidujihao-ppp" },
  103. { name: "很弱", value: "!pp!", icon: "icon-lidujihao-pp" },
  104. { name: "弱", value: "!p!", icon: "icon-lidujihao-p" },
  105. { name: "中弱", value: "!mp!", icon: "icon-lidujihao-mp" },
  106. { name: "中强", value: "!mf!", icon: "icon-lidujihao-mf" },
  107. { name: "强", value: "!f!", icon: "icon-lidujihao-f" },
  108. { name: "很强", value: "!ff!", icon: "icon-lidujihao-ff" },
  109. { name: "极强", value: "!fff!", icon: "icon-lidujihao-fff" },
  110. { name: "渐强", value: ["!<(!", "!<)!"], icon: "icon-lidujihao-jianqianghao" }, // 需要是音符范围,最低两个音
  111. { name: "渐弱", value: ["!>(!", "!>)!"], icon: "icon-lidujihao-jianruohao" }, //需要是音符范围,最低两个音
  112. ],
  113. repeat: [
  114. { name: "第一跳跃", value: "1", icon: "icon-fanfuyutiaoyue-diyitiaoyuehao" },
  115. { name: "第二跳跃", value: "2", icon: "icon-fanfuyutiaoyue-di2kaifangtiaoyuehao" },
  116. // { name: "重复3房", value: "3", icon: "" },
  117. // { name: "重复4房", value: "4", icon: "" },
  118. ],
  119. speeds: [
  120. { name: "60", value: "Q:1/4=60", icon: "" },
  121. { name: "70", value: "Q:1/4=70", icon: "" },
  122. { name: "80", value: "Q:1/4=80", icon: "" },
  123. { name: "90", value: "Q:1/4=90", icon: "" },
  124. { name: "100", value: "Q:1/4=100", icon: "" },
  125. { name: "120", value: "Q:1/4=120", icon: "" },
  126. ],
  127. slus: [
  128. { name: "3连音", value: "(3", icon: "" },
  129. { name: "4连音", value: "(4", icon: "" },
  130. { name: "5连音", value: "(5", icon: "" },
  131. { name: "6连音", value: "(6", icon: "" },
  132. { name: "7连音", value: "(7", icon: "" },
  133. ],
  134. /** 3连音等多连音
  135. * 1. 将连音的音符小括号起来,并在括号前加上数字表示连音的音符数
  136. */
  137. };
  138. export const settings = reactive({
  139. /** 光标跟随 音符, 节拍 */
  140. cursorType: "note" as "note" | "beat",
  141. });
  142. export const createNote = (options: Partial<INote>): INote => {
  143. return {
  144. accidental: options.accidental || "",
  145. content: options.content || "",
  146. noteType: options.noteType || "",
  147. clef: options.clef || "",
  148. play: options.play || [],
  149. key: options.key || "",
  150. speed: options.speed || "",
  151. dynamics: options.dynamics || "",
  152. dCode: options.dCode || "",
  153. tie: options.tie || "",
  154. tCode: options.tCode || "",
  155. dot: options.dot || "",
  156. slus: options.slus || "",
  157. tieline: options.tieline || "",
  158. segno: options.segno || "",
  159. };
  160. };
  161. export const createMeasure = (): IMeasure => {
  162. return {
  163. notes: [
  164. createNote({
  165. content: "z",
  166. noteType: "4",
  167. }),
  168. ],
  169. barline: "|",
  170. repeat: "",
  171. measureNumber: 0,
  172. celf: "",
  173. key: "",
  174. meter: "",
  175. };
  176. };
  177. interface IRenderMeasuresOption {
  178. /** 是否生成index */
  179. hiddenIndex?: boolean;
  180. showTitle?: boolean;
  181. showCreator?: boolean;
  182. }
  183. /**
  184. * 生成小节
  185. * @param abc
  186. *
  187. * @returns
  188. */
  189. export const renderMeasures = (abc: IAbc, option?: IRenderMeasuresOption) => {
  190. // console.log("🚀 ~ abc:", abc)
  191. let wrap = 1;
  192. let text = `X:1\n`;
  193. if (option?.showTitle) {
  194. abc.title && (text += abc.title + "\n");
  195. }
  196. if (option?.showCreator) {
  197. abc.creator && (text += abc.creator + "\n");
  198. }
  199. abc.celf && (text += abc.celf + "\n");
  200. abc.meter && (text += abc.meter + "\n");
  201. abc.minUnit && (text += abc.minUnit + "\n");
  202. abc.speed && (text += abc.speed + "\n");
  203. abc.key && (text += abc.key + "\n");
  204. const measures = abc.measures;
  205. for (let i = 0; i < measures.length; i++) {
  206. const measure = measures[i];
  207. text += measure.repeat ?? ""; // 重复
  208. text += measure.meter ?? ""; // 拍号
  209. for (let j = 0; j < measure.notes.length; j++) {
  210. const note = measure.notes[j];
  211. const playStr = note.play?.join("") ?? "";
  212. text += note.clef ?? ""; // 谱号
  213. text += note.key ?? ""; // 调号
  214. text += note.speed ?? ""; // 速度
  215. text += note.slus ?? ""; // 3连音
  216. if (note.tie?.includes("(")) {
  217. // 连音线 前
  218. text += note.tie ?? "";
  219. }
  220. if (!option?.hiddenIndex) {
  221. text += `"<${i + "." + j}"`; // 音符 id
  222. }
  223. text += playStr ?? ""; // 演奏技法
  224. text += note.dynamics ?? ""; // 力度符号
  225. text += note.accidental ?? ""; // 临时升降记号
  226. text += note.content ?? ""; // 音符
  227. // 音符时值
  228. text += note.noteType ?? "";
  229. text += note.dot ?? ""; // 点
  230. text += note.tieline ?? ""; // 延音
  231. if (note.tie?.includes(")")) {
  232. // 连音线 后
  233. text += note.tie ?? "";
  234. }
  235. text += note.segno ?? ""; // 分割
  236. }
  237. let _i = i + 1;
  238. if (!option?.hiddenIndex) {
  239. text += `"<${_i}"`;
  240. }
  241. text += measure.barline ?? "";
  242. if (wrap % 4 === 0) {
  243. text += "\n";
  244. }
  245. wrap++;
  246. }
  247. // console.log(text)
  248. return text;
  249. };
  250. export const getKeyStep = (key: string, oldKey: string, keyType: "inset" | "up" | "down") => {
  251. let step = 0;
  252. const _key = ABC_KEYS[oldKey][key];
  253. if (keyType === "down") {
  254. step = _key.down;
  255. } else if (keyType === "up") {
  256. step = _key.up;
  257. } else {
  258. step = Math.abs(_key.up) > Math.abs(_key.down) ? _key.down : _key.up;
  259. }
  260. return { step, move: _key.move };
  261. };
  262. export const moveNoteKey = (note: string, moveData: { step: number; move: number }) => {
  263. let x = -1;
  264. for (let i = 0; i < ABC_NOTE_DATA.length; i++) {
  265. const notes = ABC_NOTE_DATA[i];
  266. if (Array.isArray(notes) && notes.includes(note)) {
  267. x = i;
  268. break;
  269. }
  270. if (note === notes) {
  271. x = i;
  272. break;
  273. }
  274. }
  275. console.log(note, moveData.step, x);
  276. if (x >= 0) {
  277. const _note = ABC_NOTE_DATA[x + moveData.step];
  278. if (Array.isArray(_note)) {
  279. return _note[moveData.move];
  280. } else {
  281. return _note ? _note : note;
  282. }
  283. }
  284. return note;
  285. };
  286. const formateGetData = {
  287. getNoteType: (duration: number) => {
  288. const type = 0.25 / duration;
  289. console.log(type);
  290. const noteType = [
  291. { name: 0.25, value: "4" },
  292. { name: 0.5, value: "2" },
  293. { name: 1, value: "" },
  294. { name: 2, value: "/" },
  295. { name: 4, value: "//" },
  296. { name: 8, value: "///" },
  297. ];
  298. return noteType.find((n) => n.name === type)?.value || "";
  299. },
  300. };
  301. export const formateAbc = (visualObj: TuneObject, option: any) => {
  302. const abc = {
  303. celf: "K:treble",
  304. minUnit: "L:1/4",
  305. meter: "M:4/4",
  306. speed: "Q:1/4=60",
  307. key: "K:C",
  308. visualTranspose: 0,
  309. subjectCode: option.subjectCode ?? "acoustic_grand_piano",
  310. };
  311. const list = [];
  312. let notes = [];
  313. let measureIndex = 0;
  314. const get_accidental = (noteItem: INote) => {
  315. let accidental = "";
  316. if (noteItem.content.includes("_")) {
  317. accidental = "_";
  318. }
  319. if (noteItem.content.includes("__")) {
  320. accidental = "__";
  321. }
  322. if (noteItem.content.includes("=")) {
  323. accidental = "=";
  324. }
  325. if (noteItem.content.includes("^")) {
  326. accidental = "^";
  327. }
  328. if (noteItem.content.includes("^^")) {
  329. accidental = "^^";
  330. }
  331. return accidental;
  332. };
  333. for (let i = 0; i < visualObj.lines.length; i++) {
  334. const line = visualObj.lines[i];
  335. if (line.staff) {
  336. for (let j = 0; j < line.staff.length; j++) {
  337. const staff = line.staff[j];
  338. if (i === 0) {
  339. if (staff.clef) {
  340. abc.celf = `K:${staff.clef.type}`;
  341. }
  342. if (staff.key) {
  343. abc.key = `K:${staff.key.root}${staff.key.acc}`;
  344. }
  345. if (staff.meter?.value?.[0]) {
  346. abc.meter = `M:${staff.meter.value[0].num}/${staff.meter.value[0].den}`;
  347. }
  348. }
  349. if (staff.voices) {
  350. let measure = {
  351. notes: [] as INote[],
  352. barline: "|",
  353. repeat: "",
  354. measureNumber: measureIndex,
  355. celf: "",
  356. key: "",
  357. meter: "",
  358. };
  359. for (let k = 0; k < staff.voices.length; k++) {
  360. const voice = staff.voices[k];
  361. for (let l = 0; l < voice.length; l++) {
  362. const element = voice[l];
  363. if (element.el_type === "bar") {
  364. measureIndex++;
  365. list.push(measure);
  366. notes = [];
  367. measure = {
  368. notes: [] as INote[],
  369. barline: "|",
  370. repeat: "",
  371. measureNumber: measureIndex,
  372. celf: "",
  373. key: "",
  374. meter: "",
  375. };
  376. }
  377. if (element.el_type === "note") {
  378. // const abcEle = visualObj.getElementFromChar(element.startChar);
  379. // console.log("🚀 ~ abcEle:", element);
  380. let noteItem = {
  381. clef: "", //// 谱号
  382. key: "", // 调号
  383. speed: "", // 速度
  384. slus: "", // 3连音
  385. tie: "", // 连音线 前,连音线 后
  386. content: "", // 音符
  387. noteType: formateGetData.getNoteType(element.duration), // 音符时值
  388. play: [],
  389. dynamics: "", // 力度符号
  390. accidental: "", // 临时升降记号
  391. dot: "", //附点
  392. tieline: "", // 延音线
  393. segno: "", // 分割
  394. };
  395. if (element.rest) {
  396. noteItem.content = "z";
  397. } else {
  398. noteItem.content = element.pitches?.[0]?.name ?? "";
  399. }
  400. noteItem.accidental = get_accidental(noteItem as any);
  401. if (noteItem.accidental) {
  402. noteItem.content = noteItem.content.replace(noteItem.accidental, "");
  403. }
  404. const note = createNote(noteItem);
  405. measure.notes.push(note);
  406. }
  407. }
  408. }
  409. }
  410. }
  411. }
  412. }
  413. console.log(measureIndex, list);
  414. return {
  415. ...abc,
  416. measures: list,
  417. };
  418. };