runtime.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  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. }
  181. /**
  182. * 生成小节
  183. * @param abc
  184. *
  185. * @returns
  186. */
  187. export const renderMeasures = (abc: IAbc, option?: IRenderMeasuresOption) => {
  188. // console.log("🚀 ~ abc:", abc)
  189. let wrap = 1;
  190. let text = `X:1\n`;
  191. abc.title && (text += abc.title + "\n");
  192. abc.celf && (text += abc.celf + "\n");
  193. abc.meter && (text += abc.meter + "\n");
  194. abc.minUnit && (text += abc.minUnit + "\n");
  195. abc.speed && (text += abc.speed + "\n");
  196. abc.key && (text += abc.key + "\n");
  197. const measures = abc.measures;
  198. for (let i = 0; i < measures.length; i++) {
  199. const measure = measures[i];
  200. text += measure.repeat ?? '';// 重复
  201. text += measure.meter ?? '';// 拍号
  202. for (let j = 0; j < measure.notes.length; j++) {
  203. const note = measure.notes[j];
  204. const playStr = note.play?.join("") ?? "";
  205. text += note.clef ?? ''; // 谱号
  206. text += note.key ?? ''; // 调号
  207. text += note.speed ?? ''; // 速度
  208. text += note.slus ?? ''; // 3连音
  209. if (note.tie?.includes("(")) {
  210. // 连音线 前
  211. text += note.tie ?? '';
  212. }
  213. if (!option?.hiddenIndex){
  214. text += `"<${i + "." + j}"`; // 音符 id
  215. }
  216. text += playStr ?? ''; // 演奏技法
  217. text += note.dynamics ?? ''; // 力度符号
  218. text += note.accidental ?? ''; // 临时升降记号
  219. text += note.content ?? ''; // 音符
  220. // 音符时值
  221. text += note.noteType ?? '';
  222. text += note.dot ?? ''; // 点
  223. text += note.tieline ?? ''; // 延音
  224. if (note.tie?.includes(")")) {
  225. // 连音线 后
  226. text += note.tie ?? '';
  227. }
  228. text += note.segno ?? ''; // 分割
  229. }
  230. let _i = i + 1;
  231. if (!option?.hiddenIndex) {
  232. text += `"<${_i}"`
  233. }
  234. text += measure.barline ?? '';
  235. if (wrap % 4 === 0) {
  236. text += "\n";
  237. }
  238. wrap++;
  239. }
  240. // console.log(text)
  241. return text;
  242. };
  243. export const getKeyStep = (key: string, oldKey: string, keyType: "inset" | "up" | "down") => {
  244. let step = 0;
  245. const _key = ABC_KEYS[oldKey][key];
  246. if (keyType === "down") {
  247. step = _key.down;
  248. } else if (keyType === "up") {
  249. step = _key.up;
  250. } else {
  251. step = Math.abs(_key.up) > Math.abs(_key.down) ? _key.down : _key.up;
  252. }
  253. return { step, move: _key.move };
  254. };
  255. export const moveNoteKey = (note: string, moveData: { step: number; move: number }) => {
  256. let x = -1;
  257. for (let i = 0; i < ABC_NOTE_DATA.length; i++) {
  258. const notes = ABC_NOTE_DATA[i];
  259. if (Array.isArray(notes) && notes.includes(note)) {
  260. x = i;
  261. break;
  262. }
  263. if (note === notes) {
  264. x = i;
  265. break;
  266. }
  267. }
  268. console.log(note, moveData.step, x);
  269. if (x >= 0) {
  270. const _note = ABC_NOTE_DATA[x + moveData.step];
  271. if (Array.isArray(_note)) {
  272. return _note[moveData.move];
  273. } else {
  274. return _note ? _note : note;
  275. }
  276. }
  277. return note;
  278. };
  279. export const formateAbc = (visualObj: TuneObject) => {
  280. const abc = {
  281. celf: "K:treble",
  282. minUnit: "L:1/4",
  283. meter: "M:4/4",
  284. speed: "Q:1/4=60",
  285. key: "K:C",
  286. visualTranspose: 0,
  287. subjectCode: "acoustic_grand_piano",
  288. };
  289. const list = [];
  290. let measureIndex = 0;
  291. for (let i = 0; i < visualObj.lines.length; i++) {
  292. const line = visualObj.lines[i];
  293. if (line.staff) {
  294. for (let j = 0; j < line.staff.length; j++) {
  295. const staff = line.staff[j];
  296. if (i === 0) {
  297. if (staff.clef) {
  298. abc.celf = `K:${staff.clef.type}`;
  299. }
  300. if (staff.key) {
  301. abc.key = `K:${staff.key.root}${staff.key.acc}`;
  302. }
  303. if (staff.meter?.value?.[0]) {
  304. abc.meter = `M:${staff.meter.value[0].num}/${staff.meter.value[0].den}`;
  305. }
  306. }
  307. if (staff.voices) {
  308. for (let k = 0; k < staff.voices.length; k++) {
  309. const voice = staff.voices[k];
  310. for (let l = 0; l < voice.length; l++) {
  311. const element = voice[l];
  312. if (element.el_type === "bar") {
  313. measureIndex++;
  314. }
  315. if (element.el_type === "note") {
  316. list.push(element);
  317. }
  318. }
  319. }
  320. }
  321. }
  322. }
  323. }
  324. console.log(measureIndex);
  325. };