Hugging Face's logo

Spaces:
Rmpmartinspro
/
sf-8da
Running

App Files Community
Rmpmartinspro commited on
Commit
45aad28
·
1 Parent(s): fc56698

Add 3 files

Browse files
Files changed (3) hide show
  1. index.html +5 -19
  2. main.js(theAlpine.jsscriptfile) +74 -0
  3. style.css(theTailwindCSSstylesheet) +36 -0
index.html CHANGED
@@ -1,19 +1,5 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Phonk Remix Creator</title></head><body><div x-data="{ status: 'loading' }">
2
+ ... (This placeholder is here while song loads; removes itself once song loads)
3
+ <div x-data="{ isPlaying: false }">
4
+ ... (Container for song player)
5
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
main.js(theAlpine.jsscriptfile) ADDED
@@ -0,0 +1,74 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import Alpine from "alpinejs";
2
+ Alpine.start();
3
+ const baseUrl = "https://phv-conversion.herokuapp.com/";
4
+ const metronomeBpmRange = {}; // sample metronome beats
5
+ const metronomeBpmRangePicker = new Range();
6
+ const metronomeBeatsPerBar = {}; // sample metronome beats
7
+ const metronomeBeatsPerBarPicker = new Range();
8
+ const formatName = function(fileName) {
9
+ return fileName.split(".").shift().replace(/[^a-z0-9_-]/gi, "").toLowerCase();
10
+ }
11
+ window.addEventListener("load", function() {
12
+ const audioContext = new AudioContext();
13
+ const audioElm = document.getElementById("audioPlayer");
14
+ if (audioContext.state === "suspended") {
15
+ audioElm.addEventListener("click", function() {
16
+ if (audioContext.state !== "unsuspended") audioContext.resume();
17
+ });
18
+ }
19
+ audioContext.onstatechange = function() {
20
+ if (audioContext.state === "running") audioElm.classList.remove("paused");
21
+ else audioElm.classList.add("paused");
22
+ };
23
+ });
24
+ const MidiPlayer = {
25
+ set_midi_data: async function(midi_data) {
26
+ const result = await window.fetch("https://phv-conversion.herokuapp.com/convert", {
27
+ method: "POST",
28
+ headers: {
29
+ Accepts: "application/json",
30
+ "Content-Type": "application/json"
31
+ },
32
+ body: midi_data
33
+ }).then(response => response.json());
34
+ console.log(result);
35
+ this.setState({
36
+ midi: result.midi,
37
+ name: result.name,
38
+ format: result.format,
39
+ audio_url: null,
40
+ img_url: null,
41
+ is_playing: false,
42
+ playhead_x: 0,
43
+ bpm: 120,
44
+ bars: 4,
45
+ segments: 4,
46
+ segment_length: 4,
47
+ tracks: result.tracks,
48
+ });
49
+ },
50
+ toggle_playback: function() {
51
+ if (this.state.is_playing) {
52
+ audioCtx.stop();
53
+ this.setState({
54
+ is_playing: false,
55
+ });
56
+ } else {
57
+ audioCtx.play();
58
+ this.setState({
59
+ is_playing: true,
60
+ });
61
+ }
62
+ },
63
+ render: function() {
64
+ const progression_indicator = new Progress();
65
+ const is_playing = this.state.is_playing;
66
+ progression_indicator.playback = is_playing;
67
+ return(
68
+ <div id="songAudio" class="border-2 border-black absolute block w-full h-full" onclick={() => this.toggle_playback()}>
69
+ {is_playing && (
70
+ <div className="playback__progress-bar bg-gray-300">
71
+ <div className="h-full absolute top-1/4 bg-green-500">{progression_indicator.percent_played()}</div>
72
+ </div>
73
+ )}
74
+ </div>
style.css(theTailwindCSSstylesheet) ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import "tailwindcss/base";
2
+ @import "tailwindcss/components";
3
+ @import "tailwindcss/utilities";
4
+ #songAudio {
5
+ background-color: var(--vscode-checkbox-background);
6
+ }
7
+ .songAudio__progress-bar {
8
+ position: absolute;
9
+ top: 0;
10
+ left: 0;
11
+ width: 100%;
12
+ height: 2px;
13
+ background-color: var(--vscode-tab-border);
14
+ border-radius: 1px;
15
+ }
16
+ .songAudio__progress-bar .bg-green-500 {
17
+ background-color: var(--vscode-icon-foreground);
18
+ border-radius: 1px;
19
+ }
20
+ .songAudio__progress-bar .base__percent-played {
21
+ position: absolute;
22
+ top: 0;
23
+ right: 0;
24
+ width: 2px;
25
+ height: 100%;
26
+ background-color: var(--vscode-icon-foreground);
27
+ animation: songAudioProgress 2s linear;
28
+ }
29
+ .songAudio__progress-bar .base__percent-played::after {
30
+ content: "🔈"
31
+ }
32
+ @keyframes songAudioProgress {
33
+ 100% {
34
+ transform: translateX(100%);
35
+ }
36
+ }