metronome.ts 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
  1. /**
  2. * 曲谱节拍器
  3. * auth: lsq
  4. * time: 2022.11.14
  5. */
  6. import { reactive, watch } from "vue";
  7. import { tickUrl as tick, tockUrl as tock } from "/src/constant/audios";
  8. import { browser } from "/src/utils/index";
  9. import state from "/src/state";
  10. import { Howl } from "howler";
  11. import tockAndTick from "/src/constant/tockAndTick.json";
  12. import tickWav from "/src/assets/tick.mp3";
  13. import tockWav from "/src/assets/tock.mp3";
  14. import { audioData as audioDataState } from "../view/audio-list"
  15. type IOptions = {
  16. speed: number;
  17. };
  18. const browserInfo = browser();
  19. let tipsTimer: any = null; // 光标提示定时器
  20. // HTMLAudioElement 音频
  21. const audioData = reactive({
  22. tick: null as unknown as HTMLAudioElement,
  23. tock: null as unknown as HTMLAudioElement,
  24. });
  25. let tickTockPlayTime = 0;
  26. export const metronomeData = reactive({
  27. disable: true,
  28. initPlayerState: false,
  29. lineShow: false,
  30. isClick: false,
  31. metro: null as unknown as Metronome,
  32. metroList: [] as number[],
  33. activeList: [] as number[],
  34. metroMeasure: [] as any[],
  35. activeIndex: null as unknown as number,
  36. activeMetro: {} as any,
  37. cursorMode: 2 as number, // 光标模式:1:音符指针;2:节拍指针;3:关闭指针
  38. cursorTips: '' as string, // 光标模式提示文字
  39. followAudioIndex: 1, // 当前的拍数
  40. totalNumerator: 2, // 总拍数
  41. firstBeatTypeArr:[] as number[] // 第一小节的节拍
  42. });
  43. watch(
  44. () => metronomeData.cursorMode,
  45. () => {
  46. const img: HTMLElement = document.querySelector("#cursorImg-0")!;
  47. if (img) {
  48. switch (metronomeData.cursorMode) {
  49. case 1:
  50. img.classList.remove("lineHide");
  51. img.style.opacity = 'inherit'
  52. metronomeData.cursorTips = '您已切换到指针跟随音符播放';
  53. img.style.opacity = 'inherit'
  54. break;
  55. case 2:
  56. img.classList.add("lineHide");
  57. img.style.opacity = 'inherit'
  58. metronomeData.cursorTips = '您已切换到指针跟随节拍播放';
  59. // console.log('光标',img)
  60. break;
  61. case 3:
  62. img.style.opacity = '0'
  63. metronomeData.cursorTips = '您已关闭指针显示';
  64. // console.log('隐藏光标')
  65. break;
  66. default:
  67. break;
  68. }
  69. hideCursorTip()
  70. }
  71. }
  72. );
  73. // 切换隐藏光标
  74. const toggleLine = () => {
  75. if (!metronomeData.lineShow) return;
  76. const img: HTMLElement = document.querySelector("#cursorImg-0")!;
  77. if (img) {
  78. if (state.times[state.activeNoteIndex].multipleRestMeasures) {
  79. img.classList.remove("lineHide");
  80. } else {
  81. img.classList.add("lineHide");
  82. }
  83. }
  84. };
  85. watch(
  86. () => metronomeData.lineShow,
  87. () => {
  88. const img: HTMLElement = document.querySelector("#cursorImg-0")!;
  89. if (img) {
  90. if (metronomeData.lineShow) {
  91. img.classList.add("lineHide");
  92. } else {
  93. img.classList.remove("lineHide");
  94. }
  95. }
  96. }
  97. );
  98. class Metronome {
  99. playType = "tick";
  100. source = null as any; // 创建音频源头
  101. source1 = null as any;
  102. source2 = null as any;
  103. constructor(option?: IOptions) {}
  104. init(times: any[]) {
  105. this.calculation(times);
  106. metronomeData.activeList = [];
  107. this.initPlayer()
  108. }
  109. initPlayer() {
  110. // if (!this.source1) {
  111. // this.source1 = this.loadAudio1();
  112. // }
  113. // if (!this.source2) {
  114. // this.source2 = this.loadAudio2();
  115. // }
  116. // metronomeData.initPlayerState = true;
  117. if(metronomeData.initPlayerState) return
  118. Promise.all([this.createAudio(tickWav), this.createAudio(tockWav)]).then(
  119. ([tick, tock]) => {
  120. if (tick) {
  121. audioData.tick = tick;
  122. }
  123. if (tock) {
  124. audioData.tock = tock;
  125. }
  126. metronomeData.initPlayerState = true;
  127. }
  128. );
  129. }
  130. createAudio = (src: string): Promise<HTMLAudioElement | null> => {
  131. return new Promise((resolve) => {
  132. // const a = new Audio(src + '?v=' + Date.now());
  133. const a = new Audio(src);
  134. a.load();
  135. a.onloadedmetadata = () => {
  136. resolve(a);
  137. };
  138. a.onerror = () => {
  139. resolve(null);
  140. };
  141. });
  142. };
  143. // 播放
  144. sound = (currentTime: number) => {
  145. let index = -1;
  146. let activeMetro = -1;
  147. for (let i = 0; i < metronomeData.metroList.length; i++) {
  148. const item = metronomeData.metroList[i];
  149. if (currentTime >= item) {
  150. // console.log(currentTime , item)
  151. index = i;
  152. activeMetro = item;
  153. } else {
  154. break;
  155. }
  156. }
  157. if (index > -1 && metronomeData.activeIndex !== index) {
  158. metronomeData.activeIndex = index;
  159. // console.log("播放", metronomeData.activeIndex);
  160. metronomeData.activeMetro = this.getStep(activeMetro);
  161. // console.log("🚀 ~ metronomeData.activeMetro",metronomeData.activeMetro.measureNumberIndex, metronomeData.activeMetro.index)
  162. tickTockPlayTime = currentTime
  163. this.playAudio();
  164. metronomeData.isClick = false;
  165. return;
  166. }
  167. // toggleLine()
  168. metronomeData.isClick = false;
  169. };
  170. // 暂停的时候,点击音符,需要找到对应的节拍器的位置
  171. findMetronomePosition = (currentTime: number) => {
  172. // console.log('取消选段',currentTime)
  173. const originTime = currentTime;
  174. // if (!state.sectionStatus){
  175. // currentTime = setCurrentTime(currentTime);
  176. // }
  177. let index = -1;
  178. let activeMetro = -1;
  179. for (let i = 0; i < metronomeData.metroList.length; i++) {
  180. const item = metronomeData.metroList[i];
  181. if (currentTime >= item) {
  182. // console.log(currentTime , item)
  183. index = i;
  184. activeMetro = item;
  185. } else {
  186. break;
  187. }
  188. }
  189. if (index > -1 && metronomeData.activeIndex !== index) {
  190. metronomeData.activeIndex = index;
  191. // console.log("节拍器播放", '节拍器索引:',metronomeData.activeIndex, '节拍器时间:',currentTime, '实际时间:',originTime,'xml计算的时间:',metronomeData.metroList[metronomeData.activeIndex]);
  192. metronomeData.activeMetro = this.getStep(activeMetro);
  193. console.log("🚀 ~ metronomeData.activeMetro",metronomeData.activeMetro.measureNumberIndex, metronomeData.activeMetro.index)
  194. tickTockPlayTime = currentTime
  195. // this.playAudio();
  196. metronomeData.isClick = false;
  197. return;
  198. }
  199. metronomeData.isClick = false;
  200. // 非选段状态,没播放时,不显示节拍指针
  201. if (currentTime === 0 && !state.sectionStatus) {
  202. metronomeData.activeMetro = {}
  203. }
  204. };
  205. // 播放
  206. playAudio = () => {
  207. // 关闭定时器节拍器
  208. return
  209. /* 如果是 评测模式且不为MIDI并且节拍器资源加载成功的时候 不运行节拍器播放*/
  210. if (state.modeType === "practise" && state.playMode !== "MIDI") {
  211. if(state.playType === "play" && state.playSource === "music" && audioDataState.songCollection.beatSongEle){
  212. return
  213. }
  214. if(state.playType === "play" && state.playSource === "background" && audioDataState.songCollection.beatBackgroundEle){
  215. return
  216. }
  217. if(state.playType === "sing" && state.playSource === "music" && audioDataState.songCollection.beatFanSongEle){
  218. return
  219. }
  220. if(state.playType === "sing" && state.playSource === "background" && audioDataState.songCollection.beatBanSongEle){
  221. return
  222. }
  223. if(state.playType === "sing" && state.playSource === "mingSong" && audioDataState.songCollection.beatMingSongEle){
  224. return
  225. }
  226. }
  227. // console.log("播放自带的节拍器 233333")
  228. if (!metronomeData.initPlayerState || state.playState === 'paused') return;
  229. const beatVolume = state.setting.beatVolume / 100
  230. // this.source = metronomeData.activeMetro?.index === 0 ? this.source1 : this.source2;
  231. // this.source.volume(metronomeData.disable || state.playState === 'paused' ? 0 : beatVolume);
  232. // Audio 播放音频
  233. this.source = metronomeData.activeMetro?.index === 0 ? audioData.tick : audioData.tock;
  234. this.source.volume = metronomeData.disable ? 0 : beatVolume;
  235. if (this.source.volume <= 0) {
  236. this.source.muted = true
  237. } else {
  238. this.source.muted = false
  239. }
  240. // console.log('节拍器播放的时间',tickTockPlayTime)
  241. this.source.play();
  242. };
  243. /**
  244. * 跟练模式播放,跟练模式没有曲子音频播放器
  245. */
  246. simulatePlayAudio = () => {
  247. // console.log(333, metronomeData.followAudioIndex)
  248. if (!metronomeData.initPlayerState) return;
  249. const beatVolume = state.setting.beatVolume / 100
  250. // this.source = metronomeData.followAudioIndex === 1 ? this.source1 : this.source2;
  251. // Audio 播放音频
  252. this.source = metronomeData.followAudioIndex === 1 ? audioData.tick : audioData.tock;
  253. // this.source.volume(metronomeData.disable ? 0 : beatVolume);
  254. this.source.volume = metronomeData.disable ? 0 : beatVolume
  255. /**
  256. * https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/volume
  257. * volume属性在部分ios手机的Safari浏览器不被支持
  258. */
  259. if (this.source.volume <= 0) {
  260. this.source.muted = true
  261. } else {
  262. this.source.muted = false
  263. }
  264. // console.log('音量',this.source,this.source.volume)
  265. this.source.play();
  266. metronomeData.followAudioIndex += 1;
  267. metronomeData.followAudioIndex = metronomeData.followAudioIndex > metronomeData.totalNumerator ? 1 : metronomeData.followAudioIndex;
  268. };
  269. // 切换
  270. selectPlay() {}
  271. loadAudio1 = () => {
  272. return new Howl({
  273. src: tockAndTick.tick,
  274. // 如果是ios手机,需要强制使用audio,不然部分系统版本第一次播放没有声音
  275. // html5: browserInfo.ios,
  276. });
  277. };
  278. loadAudio2 = () => {
  279. return new Howl({
  280. src: tockAndTick.tock,
  281. // html5: browserInfo.ios,
  282. });
  283. };
  284. getStep(time: number) {
  285. for (let i = 0; i < metronomeData.metroMeasure.length; i++) {
  286. const list = metronomeData.metroMeasure[i];
  287. const item = list.find((n: any) => n.time === time);
  288. if (item) {
  289. // console.log('index',item)
  290. return item;
  291. }
  292. }
  293. return {};
  294. }
  295. // 计算 所有的拍子的时间
  296. calculation(times: any[]) {
  297. // console.log("🚀 ~ times", times);
  298. // 1.统计有多少小节
  299. const measures: any[] = [];
  300. let xmlNumber = -1;
  301. let isDiff = false //弱起时间不够补的时候
  302. for (let i = 0; i < times.length; i++) {
  303. const note = times[i];
  304. const measureNumberXML = note.MeasureNumberXML;
  305. // console.log("🚀 ~ note?.noteElement?.sourceMeasure", note?.noteElement?.sourceMeasure)
  306. // console.log("🚀 ~ measureNumberXML", measureNumberXML, note)
  307. // console.log("🚀 ~ measureNumberXML", note)
  308. const measureListIndex = state.firstMeasureNumber == 0 ? measureNumberXML : measureNumberXML - 1;
  309. // 当渐快渐慢的时候 不播节拍器
  310. if(isWithinRange(state.gradual, measureListIndex)){
  311. xmlNumber = measureNumberXML;
  312. continue
  313. }
  314. if (measureNumberXML > -1) {
  315. if (measureNumberXML != xmlNumber) {
  316. // 弱起的时候 根据音符结尾时间减去音符开头时间,得到的不是正常小节的时间,然后平均分配节拍之后,当前节拍间隔会非常短 这里弱起取整个小节的时间
  317. // 当小节时间 减去音符时间,前奏没有预留时间时候,从歌词开始唱的那里开始响节拍器
  318. let startTime = note.measures[0].time
  319. if(i === 0 && note.measures[0].difftime>0){
  320. startTime = note.measures[note.measures.length - 1].endtime - note.measures[0].measureLength
  321. if(startTime < 0){
  322. isDiff = true
  323. }
  324. }
  325. if(isDiff) {
  326. // 当前小节有歌词,开放弱起节拍器
  327. let isLyric = false
  328. let noteIndex = 0
  329. while(!isLyric && noteIndex<note.measures.length){
  330. isLyric = !!note.measures[noteIndex]?.formatLyricsEntries?.length
  331. noteIndex ++
  332. }
  333. isDiff = !isLyric
  334. }
  335. if(isDiff){
  336. xmlNumber = measureNumberXML;
  337. continue
  338. }
  339. // 最后一小节的时间 有可能和下一小节开始时间接不上
  340. const { time, endtime, noteLengthTime } = note.measures[note.measures.length - 1]
  341. let nextNoteStartTime = times[note.measures[note.measures.length - 1].i + 1]?.time
  342. let noteEndTime = 0
  343. if(!nextNoteStartTime){
  344. // 当不够的时候补上时值
  345. noteEndTime = time + noteLengthTime > endtime ? time + noteLengthTime : endtime
  346. }else{
  347. if(Math.abs(nextNoteStartTime - endtime)*1000< 10){
  348. // 当首位本来就是相连的
  349. noteEndTime = endtime
  350. }else{
  351. // 当首位不相连,差值大于这个音符的持续时间的时候取这个音符的时间(防止有间奏的连起来时间太长),否则直接取后一个音符的开始时间
  352. noteEndTime = nextNoteStartTime - time > noteLengthTime ? time + noteLengthTime : nextNoteStartTime
  353. }
  354. }
  355. const m = {
  356. measureNumberXML: measureNumberXML,
  357. measureNumberIndex: measureListIndex,
  358. CompoundTempo: note?.noteElement?.sourceMeasure?.CompoundTempo || "",
  359. numerator: note?.noteElement?.sourceMeasure?.ActiveTimeSignature?.numerator || 0,
  360. denominator: note?.noteElement?.sourceMeasure?.ActiveTimeSignature?.denominator || 0,
  361. start: startTime,
  362. end: noteEndTime,
  363. time: noteEndTime - startTime,
  364. stave_x: note?.noteElement?.sourceMeasure?.verticalMeasureList?.[0]?.stave?.x || 0,
  365. end_x: note?.stave?.end_x || 0 || 0,
  366. stepList: [] as number[],
  367. svgs: [] as any[],
  368. isRestFlag: note.isRestFlag,
  369. };
  370. /**
  371. * bug:#9877
  372. * 多分轨合并显示,不同分轨的音符数量可能不同
  373. */
  374. let measureArr = note.measures;
  375. if (state.isCombineRender) {
  376. measureArr = measureArr.filter((item: any) => item.MeasureNumberXML === m.measureNumberXML)
  377. }
  378. m.stepList = calculateMetroStep(measureArr, m);
  379. measures.push(m);
  380. xmlNumber = measureNumberXML;
  381. }
  382. }
  383. }
  384. //console.log(measures, measures.length,'小节汇总');
  385. let metroList: number[] = [];
  386. const metroMeasure: any[] = [];
  387. console.log("节拍器 每一小节时间:", measures)
  388. console.log("节拍器 间隔:", measures.map(item => {
  389. return {
  390. time: item.time,
  391. measureNumberXML: item.measureNumberXML
  392. }
  393. }))
  394. try {
  395. for (let i = 0; i < measures.length; i++) {
  396. const measure = measures[i];
  397. // 87拍和45拍要根据小节返回的CompoundTempo特殊处理
  398. const beatTypeArr = getBeatTypeArr(measure.numerator, measure.denominator, measure.CompoundTempo)
  399. const CompoundTempoArr = beatTypeArr.map((beatType:number) => {
  400. return Math.abs(beatType*measure.numerator)
  401. })
  402. if(i===0){
  403. metronomeData.firstBeatTypeArr = beatTypeArr
  404. }
  405. metroMeasure[i] = [] as number[];
  406. // 根据有几个拍子,划分成几份
  407. const widthStep = 100 / (beatTypeArr.length+1);
  408. // 当前拍子的组合数(2+3+2,3+2)中的数字
  409. let beatNum = 0;
  410. // if (measure.measureNumberXML == 98) {
  411. // debugger
  412. // }
  413. for (let j = 0; j < beatTypeArr.length; j++) {
  414. // 累加
  415. const beatMuit = Array(j).fill("").reduce((num:number,v:any,i:number) => {
  416. return num += Math.abs(beatTypeArr[i])
  417. }, 0) || 0
  418. const time = measure.time * beatMuit + measure.start;
  419. metroList.push(time);
  420. let left = "";
  421. // 当前拍子数对应的节拍位置索引
  422. let currentIdx = 0;
  423. if (j == 0) {
  424. currentIdx = 0
  425. } else {
  426. beatNum += CompoundTempoArr[j-1];
  427. currentIdx = beatNum
  428. }
  429. // 如果是87拍,并且是3+2+2的组合,第二拍的节拍指针需要定位到第四个音符的位置
  430. // if (measure.numerator === 7 && measure.denominator === 8 && measure.CompoundTempo === '3+2+2' && j === 1) {
  431. // currentIdx += 1;
  432. // }
  433. if (measure.stepList[currentIdx]) {
  434. left = measure.stepList[currentIdx] + "px";
  435. } else {
  436. const preLeft = measure.stepList[j - 1];
  437. left = !preLeft || preLeft.toString().indexOf("%") > -1 ? `${widthStep*(j+1)}%` : `${preLeft}px + ${widthStep}%`;
  438. measure.stepList[j] = left;
  439. }
  440. metroMeasure[i].push({
  441. isTick: beatTypeArr[j] < 0,
  442. index: j,
  443. time,
  444. left: left?.indexOf("%") > -1 ? `calc(${left})` : left,
  445. measureNumberXML: measure.measureNumberXML,
  446. isRestFlag: measure.isRestFlag,
  447. stepList: measure.stepList,
  448. isPercent: left?.indexOf("%") > -1, // 是否是根据小节宽度等分
  449. });
  450. }
  451. }
  452. } catch (error) {
  453. console.log(error);
  454. }
  455. console.log('节拍器',metroList, metroMeasure);
  456. // 5.得到所有的节拍时间
  457. metronomeData.metroList = metroList;
  458. metronomeData.metroMeasure = metroMeasure;
  459. // console.log(9999,metroList,7777,metroMeasure)
  460. metronomeData.activeMetro = metroMeasure[0]?.[0] || {};
  461. }
  462. }
  463. /** 获取节拍类型数组 */
  464. export function getBeatTypeArr(numerator?:number, denominator?:number, CompoundTempo?:string){
  465. const speedBeatUnit = state.speedBeatUnit
  466. const Numerator = numerator || state.osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4
  467. const Denominator = denominator || state.osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Denominator || 4
  468. let loopArr = []
  469. // 规则 负数代表重声,正数代表轻声
  470. switch (`${Numerator}/${Denominator}`) {
  471. case "2/2":
  472. loopArr = [-1/2, 1/2]
  473. break;
  474. case "3/2":
  475. loopArr = [-1/3, 1/3, 1/3]
  476. break;
  477. case "5/4":
  478. //5/4拍根据谱面的CompoundTempo来特殊处理
  479. if(CompoundTempo==="2+3"){
  480. loopArr = [-1/5, 1/5, -1/5, 1/5, 1/5]
  481. }else{
  482. loopArr = [-1/5, 1/5, 1/5, -1/5, 1/5]
  483. }
  484. break;
  485. case "3/8":
  486. // 3/8拍 速度为浮点4分音符时候特殊处理
  487. if(speedBeatUnit==="1/4."){
  488. loopArr = [-1/1]
  489. }else{
  490. loopArr = [-1/3, 1/3, 1/3]
  491. }
  492. break;
  493. case "6/8":
  494. loopArr = [-1/2, 1/2]
  495. break;
  496. case "7/8":
  497. //7/8拍根据谱面的CompoundTempo来特殊处理
  498. if(CompoundTempo==="2+2+3"){
  499. loopArr = [-2/7, 2/7, 3/7]
  500. }else if(CompoundTempo==="2+3+2"){
  501. loopArr = [-2/7, 3/7, 2/7]
  502. }else{
  503. loopArr = [-3/7, 2/7, 2/7]
  504. }
  505. break;
  506. case "9/8":
  507. loopArr = [-3/9, 3/9, 3/9]
  508. break;
  509. default:
  510. loopArr.push(-1/Numerator);
  511. for (let i = 1; i < Numerator; i++) {
  512. loopArr.push(1/Numerator);
  513. }
  514. break;
  515. }
  516. // console.log(loopArr, "loopArr")
  517. return loopArr
  518. }
  519. // 计算拍子的时值
  520. function calculateMetroStep(arr: any[], m: any): number[] {
  521. const measureLength = arr.reduce((total: number, item: any) => {
  522. total += item._noteLength;
  523. return total;
  524. }, 0);
  525. const clap = measureLength / m.numerator;
  526. if (arr.length === 1) {
  527. const wholeNote = arr[0].svgElement;
  528. if (wholeNote && !wholeNote.isRest()) {
  529. const measure_bbox = wholeNote?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0, right: 0 };
  530. let bbox = wholeNote?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
  531. let stepWidth = Math.abs(measure_bbox.right - bbox.x) / m.numerator;
  532. let stepList: number[] = [];
  533. for (let i = 0; i < m.numerator; i++) {
  534. stepList.push(bbox.x - measure_bbox.x + i * stepWidth);
  535. }
  536. // console.log("🚀 ~ stepList:", stepList, m.measureNumberXML)
  537. return stepList;
  538. }
  539. try {
  540. // 开头是休止符
  541. if (m.measureNumberXML === 1 && wholeNote && wholeNote.isRest()) {
  542. const measure_bbox = wholeNote?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0, right: 0 };
  543. let bbox = wholeNote?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
  544. let stepWidth = Math.abs(measure_bbox.right - bbox.x) / m.numerator;
  545. let stepList: any[] = [];
  546. // 第一小节是休止符,节拍指针应该等分宽度
  547. const widthStep = 100 / (m.numerator + 1);
  548. // for (let i = -1; i < m.numerator - 1; i++) {
  549. // stepList.push(bbox.x - measure_bbox.x + i * stepWidth);
  550. // }
  551. // for (let i = 1; i <= m.numerator; i++) {
  552. // stepList.push(widthStep * i + '%');
  553. // }
  554. // console.log(wholeNote?.attrs?.el, m.measureNumberXML)
  555. // console.log("🚀 ~ stepList:", stepList, m.measureNumberXML)
  556. return stepList;
  557. }
  558. } catch (error) {
  559. console.log("🚀 ~ error:", error);
  560. }
  561. return [];
  562. }
  563. // console.log("🚀 ~ arr", [...arr],`小节总时值: ${measureLength}`, clap, m.measureNumberXML);
  564. let totalLength = 0;
  565. let notes: any[] = [];
  566. let stepList: number[] = [];
  567. for (let i = 0; i < arr.length; i++) {
  568. const item = arr[i];
  569. item.index = i;
  570. const noteLength = item._noteLength;
  571. totalLength += noteLength;
  572. // 大于一拍
  573. const exceedStep = Math.floor(totalLength / clap);
  574. // console.log(`note`, item?.svgElement?.attrs?.el,notes.length,{noteLength, exceedStep,clap}, m.measureNumberXML)
  575. if (exceedStep >= 1) {
  576. totalLength -= clap;
  577. // 一拍
  578. let measure_bbox = item?.svgElement?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0 };
  579. /**
  580. * bug: #9875
  581. * 简谱,渲染有点问题,先使用vf-stave的位置
  582. */
  583. if (state.musicRenderType !== "staff") {
  584. measure_bbox = item?.svgElement?.attrs?.el?.parentElement?.parentElement?.querySelector('.vf-stave')?.getBoundingClientRect?.() || { x: 0 };
  585. }
  586. /**
  587. * 如果measure_bbox不存在(多分轨合并显示可能会出现),则用note再获取一次
  588. */
  589. if (!measure_bbox.width && notes.length > 0) {
  590. measure_bbox = state.musicRenderType !== "staff" ? notes[0]?.svgElement?.attrs?.el?.parentElement?.parentElement?.querySelector('.vf-stave')?.getBoundingClientRect?.() || { x: 0 } :
  591. notes[0]?.svgElement?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0 }
  592. }
  593. if (notes.length > 0) {
  594. let bbox = notes[0]?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
  595. let x: any = bbox.x - measure_bbox.x;
  596. if (notes[0]._noteLength / clap >= 1) {
  597. const nextNote = arr[notes[0].index + 1]?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: measure_bbox.right } || { x: 0 };
  598. const stepWidth = Math.abs(bbox.x - nextNote.x) / 2;
  599. x = bbox.x - measure_bbox.x + stepWidth;
  600. // console.log(`音符超一拍`, notes[0]?.svgElement?.attrs?.el, arr[notes[0].index + 1]?.svgElement?.attrs?.el, bbox.x - nextNote.x, stepWidth, m.measureNumberXML);
  601. }
  602. // console.log(`一拍`, notes[0]?.svgElement?.attrs?.el, m.measureNumberXML, notes[0]._noteLength , clap, 'aa')
  603. stepList.push(x);
  604. } else {
  605. let bbox = item?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
  606. let x: any = bbox.x - measure_bbox.x;
  607. // console.log(`一拍`, item?.svgElement?.attrs?.el, m.measureNumberXML)
  608. stepList.push(x);
  609. }
  610. notes = [];
  611. let bbox = item?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
  612. let x: any = bbox.x - measure_bbox.x;
  613. let stepWidth = 0;
  614. if (exceedStep > 1) {
  615. // 二拍以上
  616. const nextNote = arr[i + 1]?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: measure_bbox.right } || { x: 0 };
  617. stepWidth = Math.abs(bbox.x - nextNote.x) / exceedStep;
  618. // console.log("二拍以上 ~ nextNote:",bbox.x , nextNote.x,stepWidth, item?.svgElement?.attrs?.el,arr[i + 1]?.svgElement?.attrs?.el, exceedStep);
  619. }
  620. for (let j = 1; j < exceedStep; j++) {
  621. totalLength -= clap;
  622. // console.log(`超一拍`,item?.svgElement?.attrs?.el, m.measureNumberXML)
  623. stepList.push(x + stepWidth * j);
  624. }
  625. }
  626. //有时值就将音符加入
  627. if (totalLength > Number.EPSILON && totalLength > 0) {
  628. notes.push(item);
  629. }
  630. }
  631. stepList = stepList.reduce((list: any[], n: number) => {
  632. if (list.includes(n)) {
  633. list.push(undefined as any);
  634. } else {
  635. list.push(n);
  636. }
  637. return list;
  638. }, []);
  639. // console.log("stepList", [...stepList], m.measureNumberXML);
  640. return stepList;
  641. }
  642. // 延迟兼容处理
  643. function setCurrentTime(time: number) {
  644. if (browserInfo.huawei || browserInfo.xiaomi) {
  645. time += 0.125;
  646. } else if (browserInfo.android) {
  647. time += 0.11;
  648. } else if (browserInfo.ios) {
  649. time += 0.01;
  650. }
  651. return time;
  652. }
  653. // 自动隐藏光标提示
  654. function hideCursorTip() {
  655. if (!tipsTimer) {
  656. tipsTimer = setTimeout(() => {
  657. metronomeData.cursorTips = ''
  658. clearTimeout(tipsTimer)
  659. tipsTimer = null
  660. }, 2000);
  661. } else {
  662. clearTimeout(tipsTimer)
  663. tipsTimer = setTimeout(() => {
  664. metronomeData.cursorTips = ''
  665. clearTimeout(tipsTimer)
  666. tipsTimer = null
  667. }, 2000);
  668. }
  669. }
  670. function isWithinRange(ranges:any[], index:number) {
  671. for (const range of ranges) {
  672. const start = range[0].measureIndex;
  673. const end = range[1].measureIndex;
  674. if (index >= start && index < end) {
  675. return true;
  676. }
  677. }
  678. return false;
  679. }
  680. export default Metronome;