|
@@ -153,21 +153,29 @@ export const onLoadedmetadata = (evt: Event) => {
|
|
|
};
|
|
|
/** 在渲染前后计算光标应该走到的音符 */
|
|
|
const setStep = () => {
|
|
|
+ if (state.playState !== "play") {
|
|
|
+ console.log("结束播放");
|
|
|
+ return;
|
|
|
+ }
|
|
|
let startTime = Date.now();
|
|
|
requestAnimationFrame(() => {
|
|
|
const endTime = Date.now();
|
|
|
// 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
|
|
|
- if (endTime - startTime < 16.6) {
|
|
|
- if (state.playState !== "play") {
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (endTime - startTime < 16.7) {
|
|
|
handlePlaying();
|
|
|
+ setStep();
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ handlePlaying();
|
|
|
+ setStep();
|
|
|
+ }, 16.7)
|
|
|
}
|
|
|
- setStep();
|
|
|
+
|
|
|
});
|
|
|
};
|
|
|
/** 开始播放 */
|
|
|
export const onPlay = () => {
|
|
|
+ console.log("开始播放");
|
|
|
state.playEnd = false;
|
|
|
setStep();
|
|
|
if (state.modeType === "evaluating") {
|
|
@@ -209,11 +217,11 @@ export const onEnded = () => {
|
|
|
/**
|
|
|
* 播放一直触发的事件
|
|
|
*/
|
|
|
-const handlePlaying = (_item?: any) => {
|
|
|
+const handlePlaying = () => {
|
|
|
const currentTime = getAudioCurrentTime();
|
|
|
const duration = getAudioDuration();
|
|
|
state.playProgress = (currentTime / duration) * 100;
|
|
|
- let item = _item ? _item : getNote(currentTime);
|
|
|
+ let item = getNote(currentTime);
|
|
|
|
|
|
if (item) {
|
|
|
// 选段状态下
|
|
@@ -222,16 +230,15 @@ const handlePlaying = (_item?: any) => {
|
|
|
const selectStartItem = state.sectionFirst ? state.sectionFirst : state.section[0];
|
|
|
const selectEndItem = state.section[1];
|
|
|
|
|
|
- if (currentTime < selectStartItem.time || currentTime > selectEndItem.endtime) {
|
|
|
+ if (item.MeasureNumberXML < selectStartItem.MeasureNumberXML || item.MeasureNumberXML > selectEndItem.MeasureNumberXML) {
|
|
|
console.log("选段播放结束");
|
|
|
// 如果为选段评测模式
|
|
|
- if (state.modeType === 'evaluating' && state.isSelectMeasureMode) {
|
|
|
+ if (state.modeType === "evaluating" && state.isSelectMeasureMode) {
|
|
|
onEnded();
|
|
|
return;
|
|
|
}
|
|
|
item = selectStartItem;
|
|
|
setAudioCurrentTime(selectStartItem.time);
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
gotoNext(item);
|
|
@@ -249,7 +256,7 @@ export const skipNotePlay = (itemIndex: number, isStart = false) => {
|
|
|
// console.log("🚀 ~ itemTime:", itemTime);
|
|
|
if (item) {
|
|
|
setAudioCurrentTime(itemTime);
|
|
|
- handlePlaying(item);
|
|
|
+ gotoNext(item);
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -289,10 +296,10 @@ export const resetPlaybackToStart = () => {
|
|
|
// 如果为选段状态
|
|
|
if (state.sectionStatus && state.section.length === 2) {
|
|
|
state.section = formateSelectMearure(state.section);
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
skipNotePlay(0, true);
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
/** 跳转到指定音符 */
|
|
|
export const gotoCustomNote = (index: number) => {
|
|
@@ -353,7 +360,7 @@ export const getNote = (currentTime: number) => {
|
|
|
|
|
|
/** 重播 */
|
|
|
export const handleResetPlay = () => {
|
|
|
- resetPlaybackToStart()
|
|
|
+ resetPlaybackToStart();
|
|
|
};
|
|
|
/** 设置速度 */
|
|
|
export const handleSetSpeed = (speed: number) => {
|
|
@@ -414,7 +421,7 @@ const formateSelectMearure = (_list: any[]): any[] => {
|
|
|
state.sectionFirst = state.times.find((n: any) => startXmlIndex - n.MeasureNumberXML === 1);
|
|
|
startItemINdex = state.sectionFirst ? state.sectionFirst.i : startItemINdex;
|
|
|
}
|
|
|
- skipNotePlay(startItemINdex);
|
|
|
+ skipNotePlay(startItemINdex, startItemINdex === 0);
|
|
|
return list;
|
|
|
};
|
|
|
|