|
|
@@ -22,12 +22,14 @@ import { Howl } from "howler";
|
|
|
import { storeData } from "/src/store";
|
|
|
import { api_back } from "/src/helpers/communication";
|
|
|
import Hammer from "hammerjs";
|
|
|
-import { Button, Icon, Popup, Space } from "vant";
|
|
|
+import { Button, Icon, Loading, Popup, Space } from "vant";
|
|
|
import GuideIndex from "./guide/guide-index";
|
|
|
import { getQuery } from "/src/utils/queryString";
|
|
|
import { browser } from "/src/utils";
|
|
|
import { usePageVisibility } from "@vant/use";
|
|
|
import { watch } from "vue";
|
|
|
+import { Vue3Lottie } from "vue3-lottie";
|
|
|
+import refesh_anim from "./refresh_anim.json";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: "viewFigner",
|
|
|
@@ -71,6 +73,7 @@ export default defineComponent({
|
|
|
tips: [] as IFIGNER_INSTRUMENT_Note[],
|
|
|
|
|
|
tnoteShow: false,
|
|
|
+ loadingSoundFonts: true,
|
|
|
});
|
|
|
const fingerData = reactive({
|
|
|
relationshipIndex: 0,
|
|
|
@@ -103,20 +106,31 @@ export default defineComponent({
|
|
|
console.log("🚀 ~ subject:", subject);
|
|
|
fingerData.subject = await getFingeringConfig(subject);
|
|
|
};
|
|
|
- const getSounFonts = () => {
|
|
|
+ const createAudio = (url: string) => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ const noteAudio = new Howl({
|
|
|
+ src: url,
|
|
|
+ loop: true,
|
|
|
+ onload: () => {
|
|
|
+ resolve(noteAudio);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const getSounFonts = async () => {
|
|
|
const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
|
|
|
+ data.loadingSoundFonts = true;
|
|
|
for (let i = 0; i < data.notes.length; i++) {
|
|
|
const note = data.notes[i];
|
|
|
- // console.log("🚀 ~ note:", i)
|
|
|
+ // console.log("🚀 ~ note:", i);
|
|
|
let url = `${pathname}soundfonts/${data.subject}/`;
|
|
|
url += note.realName;
|
|
|
url += ".mp3";
|
|
|
- const noteAudio = new Howl({
|
|
|
- src: url,
|
|
|
- loop: true,
|
|
|
- });
|
|
|
- data.soundFonts[note.realKey] = noteAudio;
|
|
|
+ data.soundFonts[note.realKey] = await createAudio(url);
|
|
|
}
|
|
|
+ setTimeout(() => {
|
|
|
+ data.loadingSoundFonts = false;
|
|
|
+ }, 300)
|
|
|
// console.log("🚀 ~ data.soundFonts:", data.soundFonts);
|
|
|
};
|
|
|
onBeforeMount(() => {
|
|
|
@@ -411,6 +425,14 @@ export default defineComponent({
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ {data.loadingSoundFonts && (
|
|
|
+ <div class={styles.loading}>
|
|
|
+ <Vue3Lottie
|
|
|
+ style={{ width: "100px", height: "100px" }}
|
|
|
+ animationData={refesh_anim}
|
|
|
+ ></Vue3Lottie>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
{!!data.tones.length && (
|
|
|
<>
|
