Spaces:
Running
Running
File size: 2,402 Bytes
45aad28 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import Alpine from "alpinejs";
Alpine.start();
const baseUrl = "https://phv-conversion.herokuapp.com/";
const metronomeBpmRange = {}; // sample metronome beats
const metronomeBpmRangePicker = new Range();
const metronomeBeatsPerBar = {}; // sample metronome beats
const metronomeBeatsPerBarPicker = new Range();
const formatName = function(fileName) {
return fileName.split(".").shift().replace(/[^a-z0-9_-]/gi, "").toLowerCase();
}
window.addEventListener("load", function() {
const audioContext = new AudioContext();
const audioElm = document.getElementById("audioPlayer");
if (audioContext.state === "suspended") {
audioElm.addEventListener("click", function() {
if (audioContext.state !== "unsuspended") audioContext.resume();
});
}
audioContext.onstatechange = function() {
if (audioContext.state === "running") audioElm.classList.remove("paused");
else audioElm.classList.add("paused");
};
});
const MidiPlayer = {
set_midi_data: async function(midi_data) {
const result = await window.fetch("https://phv-conversion.herokuapp.com/convert", {
method: "POST",
headers: {
Accepts: "application/json",
"Content-Type": "application/json"
},
body: midi_data
}).then(response => response.json());
console.log(result);
this.setState({
midi: result.midi,
name: result.name,
format: result.format,
audio_url: null,
img_url: null,
is_playing: false,
playhead_x: 0,
bpm: 120,
bars: 4,
segments: 4,
segment_length: 4,
tracks: result.tracks,
});
},
toggle_playback: function() {
if (this.state.is_playing) {
audioCtx.stop();
this.setState({
is_playing: false,
});
} else {
audioCtx.play();
this.setState({
is_playing: true,
});
}
},
render: function() {
const progression_indicator = new Progress();
const is_playing = this.state.is_playing;
progression_indicator.playback = is_playing;
return(
<div id="songAudio" class="border-2 border-black absolute block w-full h-full" onclick={() => this.toggle_playback()}>
{is_playing && (
<div className="playback__progress-bar bg-gray-300">
<div className="h-full absolute top-1/4 bg-green-500">{progression_indicator.percent_played()}</div>
</div>
)}
</div> |