|
| 1 | +<template> |
| 2 | + <QDialog ref="dialogRef" auto-scroll @before-show="initializeValues"> |
| 3 | + <QLayout container view="hHh lpr fFf" class="q-dialog-plugin bg-background"> |
| 4 | + <QHeader> |
| 5 | + <QToolbar> |
| 6 | + <QToolbarTitle>MIDIファイルのインポート</QToolbarTitle> |
| 7 | + </QToolbar> |
| 8 | + </QHeader> |
| 9 | + <QPageContainer class="q-px-lg q-py-md"> |
| 10 | + <QFile |
| 11 | + v-model="midiFile" |
| 12 | + label="インポートするMIDIファイル" |
| 13 | + class="q-my-sm" |
| 14 | + accept=".mid,.midi" |
| 15 | + :error-message="midiFileError" |
| 16 | + :error="!!midiFileError" |
| 17 | + placeholder="MIDIファイルを選択してください" |
| 18 | + @input="handleMidiFileChange" |
| 19 | + /> |
| 20 | + <QSelect |
| 21 | + v-if="midi" |
| 22 | + v-model="selectedTrack" |
| 23 | + :options="tracks" |
| 24 | + emit-value |
| 25 | + map-options |
| 26 | + label="インポートするトラック" |
| 27 | + /> |
| 28 | + </QPageContainer> |
| 29 | + <QFooter> |
| 30 | + <QToolbar> |
| 31 | + <QSpace /> |
| 32 | + <QBtn |
| 33 | + unelevated |
| 34 | + align="right" |
| 35 | + label="キャンセル" |
| 36 | + color="toolbar-button" |
| 37 | + text-color="toolbar-button-display" |
| 38 | + class="text-no-wrap text-bold q-mr-sm" |
| 39 | + @click="handleCancel" |
| 40 | + /> |
| 41 | + <QBtn |
| 42 | + unelevated |
| 43 | + align="right" |
| 44 | + label="インポート" |
| 45 | + color="toolbar-button" |
| 46 | + text-color="toolbar-button-display" |
| 47 | + class="text-no-wrap text-bold q-mr-sm" |
| 48 | + :disabled="selectedTrack === null" |
| 49 | + @click="handleImportTrack" |
| 50 | + /> |
| 51 | + </QToolbar> |
| 52 | + </QFooter> |
| 53 | + </QLayout> |
| 54 | + </QDialog> |
| 55 | +</template> |
| 56 | + |
| 57 | +<script setup lang="ts"> |
| 58 | +import { computed, ref } from "vue"; |
| 59 | +import { useDialogPluginComponent } from "quasar"; |
| 60 | +import { Midi } from "@tonejs/midi"; |
| 61 | +import { useStore } from "@/store"; |
| 62 | +
|
| 63 | +const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent(); |
| 64 | +
|
| 65 | +const store = useStore(); |
| 66 | +
|
| 67 | +// MIDIファイル |
| 68 | +const midiFile = ref<File | null>(null); |
| 69 | +
|
| 70 | +// MIDIファイルエラー |
| 71 | +const midiFileError = computed(() => { |
| 72 | + if (midiFile.value && !midi.value) { |
| 73 | + return "MIDIファイルの読み込みに失敗しました"; |
| 74 | + } else if (midiFile.value && midi.value && !midi.value.tracks.length) { |
| 75 | + return "トラックがありません"; |
| 76 | + } |
| 77 | + return undefined; |
| 78 | +}); |
| 79 | +// MIDIデータ(tone.jsでパースしたもの) |
| 80 | +const midi = ref<Midi | null>(null); |
| 81 | +// トラック |
| 82 | +const tracks = computed(() => { |
| 83 | + if (!midi.value) { |
| 84 | + return []; |
| 85 | + } |
| 86 | + // トラックリストを生成 |
| 87 | + // トラックNo: トラック名 形式 |
| 88 | + return midi.value.tracks.map((track, index) => ({ |
| 89 | + label: `${index + 1}: ${track.name}`, |
| 90 | + value: index, |
| 91 | + })); |
| 92 | +}); |
| 93 | +// 選択中のトラック |
| 94 | +const selectedTrack = ref<string | number | null>(null); |
| 95 | +
|
| 96 | +// データ初期化 |
| 97 | +const initializeValues = () => { |
| 98 | + midiFile.value = null; |
| 99 | + midi.value = null; |
| 100 | + selectedTrack.value = null; |
| 101 | +}; |
| 102 | +
|
| 103 | +// MIDIファイル変更時 |
| 104 | +const handleMidiFileChange = (event: Event) => { |
| 105 | + if (!(event.target instanceof HTMLInputElement)) { |
| 106 | + throw new Error("Event target is not an HTMLInputElement"); |
| 107 | + } |
| 108 | +
|
| 109 | + const input = event.target; |
| 110 | +
|
| 111 | + // 入力ファイルが存在しない場合はエラー |
| 112 | + if (!input.files || input.files.length === 0) { |
| 113 | + throw new Error("No file selected"); |
| 114 | + } |
| 115 | +
|
| 116 | + // 既存のMIDIデータおよび選択中のトラックをクリア |
| 117 | + midi.value = null; |
| 118 | + selectedTrack.value = null; |
| 119 | +
|
| 120 | + const file = input.files[0]; |
| 121 | + const reader = new FileReader(); |
| 122 | + reader.onload = (e) => { |
| 123 | + try { |
| 124 | + if ( |
| 125 | + e.target && |
| 126 | + e.target.result && |
| 127 | + e.target.result instanceof ArrayBuffer |
| 128 | + ) { |
| 129 | + // MIDIファイルをパース |
| 130 | + midi.value = new Midi(e.target.result); |
| 131 | + const DEFAULT_TRACK = 0; |
| 132 | + selectedTrack.value = DEFAULT_TRACK; |
| 133 | + } else { |
| 134 | + throw new Error("Could not find MIDI file data"); |
| 135 | + } |
| 136 | + } catch (error) { |
| 137 | + throw new Error("Failed to parse MIDI file", { cause: error }); |
| 138 | + } |
| 139 | + }; |
| 140 | + reader.onerror = () => { |
| 141 | + throw new Error("Failed to read MIDI file"); |
| 142 | + }; |
| 143 | +
|
| 144 | + // MIDIファイルをバイナリデータとして読み込む |
| 145 | + reader.readAsArrayBuffer(file); |
| 146 | +}; |
| 147 | +
|
| 148 | +// トラックインポート実行時 |
| 149 | +const handleImportTrack = () => { |
| 150 | + // MIDIファイルまたは選択中のトラックが未設定の場合はエラー |
| 151 | + if (midiFile.value == null || typeof selectedTrack.value !== "number") { |
| 152 | + throw new Error("MIDI file or selected track is not set"); |
| 153 | + } |
| 154 | + // トラックをインポート |
| 155 | + store.dispatch("IMPORT_MIDI_FILE", { |
| 156 | + filePath: midiFile.value.path, |
| 157 | + trackIndex: selectedTrack.value, |
| 158 | + }); |
| 159 | + onDialogOK(); |
| 160 | +}; |
| 161 | +
|
| 162 | +// キャンセルボタンクリック時 |
| 163 | +const handleCancel = () => { |
| 164 | + onDialogCancel(); |
| 165 | +}; |
| 166 | +</script> |
0 commit comments