Andy Smith
93 lines
2.3 KiB
JavaScript
93 lines
2.3 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
const INSTRUMENTS = [
|
|
[
|
|
"/audio/mandolin/B3.mp3",
|
|
"/audio/mandolin/C3.mp3",
|
|
"/audio/mandolin/D4.mp3",
|
|
"/audio/mandolin/E3.mp3",
|
|
"/audio/mandolin/Fsharp4.mp3",
|
|
"/audio/mandolin/G3.mp3"
|
|
],
|
|
[
|
|
"/audio/synth/B3.mp3",
|
|
"/audio/synth/C3.mp3",
|
|
"/audio/synth/D4.mp3",
|
|
"/audio/synth/E3.mp3",
|
|
"/audio/synth/Fsharp4.mp3",
|
|
"/audio/synth/G3.mp3"
|
|
]
|
|
]
|
|
|
|
export default class extends Controller {
|
|
static targets = [ "container" ]
|
|
|
|
connect() {
|
|
this.instrumentIndex = 0
|
|
this.preloadedAudioFiles = []
|
|
|
|
document.addEventListener("keydown", this.handleKeyDown.bind(this));
|
|
// this.preloadedAudioFiles = INSTRUMENTS[0].map(file => {
|
|
// const audio = new Audio(file)
|
|
// audio.load()
|
|
// return audio
|
|
// });
|
|
}
|
|
|
|
disconnect() {
|
|
document.removeEventListener("keydown", this.handleKeyDown.bind(this));
|
|
}
|
|
|
|
handleKeyDown(event) {
|
|
this.#setInstrumentIndex(event)
|
|
|
|
if (this.instrumentIndex < INSTRUMENTS.length) {
|
|
this.#preloadAudioFiles(this.instrumentIndex)
|
|
console.log(this.preloadedAudioFiles)
|
|
}
|
|
}
|
|
|
|
dragEnter(event) {
|
|
event.preventDefault()
|
|
const container = this.#containerContaining(event.target)
|
|
|
|
if (!container) { return }
|
|
|
|
if (container !== this.sourceContainer && event.shiftKey) {
|
|
this.#playSound()
|
|
}
|
|
}
|
|
|
|
#setInstrumentIndex(event) {
|
|
const number = Number(event.code.replace("Digit", ""))
|
|
this.instrumentIndex = isNaN(number) ? 0 : number
|
|
}
|
|
|
|
#preloadAudioFiles(instrumentIndex) {
|
|
this.preloadedAudioFiles = []
|
|
const audioFiles = INSTRUMENTS[instrumentIndex];
|
|
|
|
if (audioFiles) {
|
|
this.preloadedAudioFiles = audioFiles.map(file => {
|
|
const audio = new Audio(file)
|
|
audio.load()
|
|
return audio
|
|
})
|
|
}
|
|
}
|
|
|
|
#containerContaining(element) {
|
|
return this.containerTargets.find(container => container.contains(element) || container === element)
|
|
}
|
|
|
|
#playSound() {
|
|
// At this stage, the preloaded audio files should be ready
|
|
|
|
// const randomIndex = Math.floor(Math.random() * this.preloadedAudioFiles.length)
|
|
// const audio = this.preloadedAudioFiles[randomIndex]
|
|
// const audioInstance = new Audio(audio.src)
|
|
//
|
|
// audioInstance.play()
|
|
}
|
|
}
|