|
@@ -1,18 +1,24 @@
|
|
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
|
|
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
|
|
-import state, { getMusicDetail } from "/src/state";
|
|
|
|
|
|
+import state, { getMusicDetail, handleSetSpeed, addNoteBBox, getNote, gotoNext } from "/src/state";
|
|
import MusicScore from "../../view/music-score";
|
|
import MusicScore from "../../view/music-score";
|
|
import styles from "./index.module.less";
|
|
import styles from "./index.module.less";
|
|
import { getQuery } from "/src/utils/queryString";
|
|
import { getQuery } from "/src/utils/queryString";
|
|
import { closeToast, showLoadingToast } from "vant";
|
|
import { closeToast, showLoadingToast } from "vant";
|
|
-
|
|
|
|
|
|
+import store from "store";
|
|
|
|
+import { formateTimes } from "../../helpers/formateMusic";
|
|
|
|
+import { setCustomGradual, setCustomNoteRealValue } from "/src/helpers/customMusicScore"
|
|
|
|
+import { initSmoothAnimation, smoothAnimationState, destroySmoothAnimation, moveSmoothAnimationByPlayTime } from "../view-detail/smoothAnimation";
|
|
|
|
+import { api_playProgress } from "/src/helpers/communication";
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
- name: "music-list",
|
|
|
|
|
|
+ name: "simple-detail",
|
|
setup() {
|
|
setup() {
|
|
const query: any = getQuery();
|
|
const query: any = getQuery();
|
|
|
|
|
|
const detailData = reactive({
|
|
const detailData = reactive({
|
|
isLoading: true,
|
|
isLoading: true,
|
|
|
|
+ currentTime: 0, // 当前播放的时间
|
|
|
|
+ totalTime: 60000, // 音视频总时长
|
|
});
|
|
});
|
|
|
|
|
|
const communicateCb = (res: any) => {
|
|
const communicateCb = (res: any) => {
|
|
@@ -24,6 +30,15 @@ export default defineComponent({
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+ // 监听评测曲谱音频播放进度,返回
|
|
|
|
+ const progress = (res: any) => {
|
|
|
|
+ detailData.currentTime = res?.currentTime || res?.content?.currentTime;
|
|
|
|
+ detailData.totalTime = res?.totalDuration || res?.content?.totalDuration;
|
|
|
|
+ const time = detailData.currentTime / 1000;
|
|
|
|
+ if (res?.content?.totalDuration > 1000 && detailData.currentTime >= detailData.totalTime) {
|
|
|
|
+ // 播放结束
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
const id = query.id || '';
|
|
const id = query.id || '';
|
|
@@ -31,6 +46,7 @@ export default defineComponent({
|
|
detailData.isLoading = false;
|
|
detailData.isLoading = false;
|
|
state.isSingleLine = true;
|
|
state.isSingleLine = true;
|
|
state.isSimplePage = true;
|
|
state.isSimplePage = true;
|
|
|
|
+ api_playProgress(progress);
|
|
window.addEventListener("message", communicateCb);
|
|
window.addEventListener("message", communicateCb);
|
|
});
|
|
});
|
|
|
|
|
|
@@ -39,8 +55,71 @@ export default defineComponent({
|
|
window.removeEventListener("message", communicateCb);
|
|
window.removeEventListener("message", communicateCb);
|
|
});
|
|
});
|
|
/** 渲染完成 */
|
|
/** 渲染完成 */
|
|
- const handleRendered = async () => {
|
|
|
|
|
|
+ const handleRendered = async (osmd: any) => {
|
|
console.log('渲染完成')
|
|
console.log('渲染完成')
|
|
|
|
+ state.osmd = osmd;
|
|
|
|
+ // 没有设置速度使用读取的速度
|
|
|
|
+ if (state.originSpeed === 0) {
|
|
|
|
+ state.originSpeed = state.speed = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM || 100;
|
|
|
|
+ }
|
|
|
|
+ const saveSpeed = (store.get("speeds") || {})[state.examSongId] || state.speed || (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM;
|
|
|
|
+ // 加载本地缓存的速度
|
|
|
|
+ if (saveSpeed) {
|
|
|
|
+ handleSetSpeed(saveSpeed);
|
|
|
|
+ }
|
|
|
|
+ setCustomGradual();
|
|
|
|
+ setCustomNoteRealValue();
|
|
|
|
+ state.times = formateTimes(osmd);
|
|
|
|
+ console.log("🚀 ~ state.times:", state.times, state.subjectId, state);
|
|
|
|
+ // 音符添加位置信息bbox
|
|
|
|
+ addNoteBBox(state.times);
|
|
|
|
+ // 一行谱创建 动画
|
|
|
|
+ initSmoothAnimation();
|
|
|
|
+ //destroySmoothAnimation();
|
|
|
|
+ smoothAnimationState.isShow.value = false;
|
|
|
|
+ state.playState = 'play';
|
|
|
|
+ setStep();
|
|
|
|
+ };
|
|
|
|
+ /**
|
|
|
|
+ * 播放一直触发的事件
|
|
|
|
+ */
|
|
|
|
+ const handlePlaying = () => {
|
|
|
|
+ detailData.currentTime += 0.03;
|
|
|
|
+ const currentTime = detailData.currentTime;
|
|
|
|
+ const duration = detailData.totalTime;
|
|
|
|
+ state.playProgress = (currentTime / duration) * 100;
|
|
|
|
+ // console.log('👀~播放进度',currentTime)
|
|
|
|
+ let item = getNote(currentTime);
|
|
|
|
+ if (item) {
|
|
|
|
+ gotoNext(item);
|
|
|
|
+ }
|
|
|
|
+ // 一行谱,需要滚动小节
|
|
|
|
+ if (state.isSingleLine) {
|
|
|
|
+ moveSmoothAnimationByPlayTime(currentTime)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ };
|
|
|
|
+ /** 在渲染前后计算光标应该走到的音符 */
|
|
|
|
+ const setStep = () => {
|
|
|
|
+ // console.log('播放状态',state.playState)
|
|
|
|
+ if (state.playState !== "play") {
|
|
|
|
+ console.log("暂停播放");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let startTime = Date.now();
|
|
|
|
+ requestAnimationFrame(() => {
|
|
|
|
+ const endTime = Date.now();
|
|
|
|
+ // 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
|
|
|
|
+ if (endTime - startTime < 16.7) {
|
|
|
|
+ handlePlaying();
|
|
|
|
+ setStep();
|
|
|
|
+ } else {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ handlePlaying();
|
|
|
|
+ setStep();
|
|
|
|
+ }, 16.7);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
};
|
|
};
|
|
|
|
|
|
return () => (
|
|
return () => (
|