|
@@ -11,6 +11,7 @@ import {
|
|
|
import { Howl } from "howler";
|
|
|
import { storeData } from "/src/store";
|
|
|
import { api_back } from "/src/helpers/communication";
|
|
|
+import { Button, Icon } from "vant";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: "viewFigner",
|
|
@@ -48,12 +49,12 @@ export default defineComponent({
|
|
|
fingerData.subject = await getFingeringConfig(data.subject);
|
|
|
};
|
|
|
const getSounFonts = () => {
|
|
|
+ const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
|
|
|
for (let i = 0; i < data.notes.length; i++) {
|
|
|
const note = data.notes[i];
|
|
|
// console.log("🚀 ~ note:", note)
|
|
|
- // console.log(`/soundfonts/${data.subject}/${note.name}${note.octave}.mp3`)
|
|
|
const noteAudio = new Howl({
|
|
|
- src: `${location.pathname.replace('.html', '/')}/soundfonts/${data.subject}/${note.name}${note.octave}.mp3`,
|
|
|
+ src: `${pathname}soundfonts/${data.subject}/${note.name}${note.octave}.mp3`,
|
|
|
loop: true,
|
|
|
});
|
|
|
data.soundFonts[note.realKey] = noteAudio;
|
|
@@ -145,21 +146,27 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class={styles.notes}>
|
|
|
+ {/* <Button>
|
|
|
+ <Icon name="arrow-left" />
|
|
|
+ </Button> */}
|
|
|
<div class={styles.noteBox}>
|
|
|
{data.notes.map((note: IFIGNER_INSTRUMENT_Note) => {
|
|
|
const steps = new Array(Math.abs(note.step)).fill(1);
|
|
|
return (
|
|
|
<div
|
|
|
+ draggable={false}
|
|
|
class={styles.note}
|
|
|
onKeydown={() => noteClick(note, "start")}
|
|
|
onKeyup={() => noteClick(note, "start")}
|
|
|
+ onMouseleave={() => noteClick(note, "stop")}
|
|
|
onTouchstart={() => noteClick(note, "start")}
|
|
|
onTouchend={() => noteClick(note, "stop")}
|
|
|
+ onTouchcancel={() => noteClick(note, "stop")}
|
|
|
>
|
|
|
{data.realKey === note.realKey ? (
|
|
|
- <img src={icons.icon_btn_ylow} />
|
|
|
+ <img draggable={false} src={icons.icon_btn_ylow} />
|
|
|
) : (
|
|
|
- <img src={icons.icon_btn_blue} />
|
|
|
+ <img draggable={false} src={icons.icon_btn_blue} />
|
|
|
)}
|
|
|
|
|
|
<div class={styles.noteKey}>
|
|
@@ -171,6 +178,9 @@ export default defineComponent({
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
+ {/* <Button size="small" >
|
|
|
+ <Icon name="arrow" />
|
|
|
+ </Button> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|