support direct urls

README.md

@@ -1,19 +1,29 @@
 # vertexshaderart.com is in transition to a static site
 
-Soundcloud changed their API and I can't be bothered to fix this code.
-Tools are out of date etc and it's just too much work for a site that
-gets almost no traffic and that I, myself, rarely use.
+## Music Tracks
 
-Using Soundcloud has always been problematic. They've changed their API
-more than once causing a bunch of work. Artists delete their accounts, or
-delete songs, or change permissions
-and then the visualizations here are left non-working.
+Options: 
 
-So, I took the server offline. It ran for ~9 years.
+* `random`
 
-I'm working on putting up the data. Unfortunately, without soundcloud,
-most of the visualizations will do nothing. I will look into putting in
-some random music and/or provide options to use other sources of music.
+  chooses a random track
 
-I will also probably try to make new stuff url based so it's entirely a
-static website.
+* `<some-url-to>.mp3`
+
+  The mp3 file must have the correct permissions to stream. Ideally you'd pick public domain or CC0 track and add it to
+  [this repo](https://github.com/greggman/music-lists.git).
+
+* `<some-url.to>.json`
+
+  A json file in the following format
+
+  ```js
+  {
+    name?: string,    // name of track, if not provided it will be the base name of the url
+    author?: string,  // name of author/artist/band
+    url?: string,     // url for author's page
+    infoUrl?: string, // url for info about the track 
+    trackUrl?: string, // url for .mp3 file. if not provided assumes the path
+                       // is the same as the .json file just with .mp3 instead
+  }
+  ```

src/index.html

@@ -127,18 +127,13 @@ <h1>saving</h1>
 [T]        : Resets the time to 0
 [+]        : Makes a new art piece
 [<img class="onechar" src="/static/resources/images/stop.svg" />]        : Stop Rendering
-[save]     : Saves the current art (Ctrl-S / Cmd-S)
 [mode]     : POINTS, LINES, LINE_STRIP, LINE_LOOP, etc...
 [NATIVE]   : Lines are native size (1 pixel) or CSS size
            : On HD-DPI display CSS will generate thicker lines
-[sound]    : A soundcloud URL for music/playlist.
-           : The URL must have permission to embedded/stream
-           : Blank = off, mic = mic, feedback = mic + speaker
-[lock]     : Prevent music changing when switching art
-[yourname] : Shows your creations (or sign in).
-[name]     : Shows all revisions of current art
-[username] : Shows all user's creations
-[&hearts;]        : &ldquo;Like&rdquo; current art
+[sound]    : A URL to a .json or .mp3 file
+           : Blank = off, mic = mic, feedback = mic + speaker,
+           : random = random track
+           : <a href="https://github.com/greggman/vertexshaderart.com/">see here for more info.</a>
 
 Inputs
 -------------------------------------------------------------

src/js/main.js

@@ -1110,6 +1110,9 @@ define([
         s.playlist = [url];
         playNextTrack();
       } else if (url.includes('soundcloud') || url === 'random') {
+        if (url.includes('soundcloud')) {
+          setSoundSuccessState(false, "soundcloud not supported. using random track");
+        }
         getRandomMusic().then(track => {
           s.playlist = [track];
           s.trackNdx = 0;
@@ -1138,10 +1141,41 @@ define([
             setSoundSuccessState(false, "not a valid soundcloud url? " + (err.message ? err.message : ""));
           });
         */
-      } else {
-        s.playList = [track];
-        s.trackNdx = 0;
-        playNextTrack();
+      } else if (url.endsWith('.mp3')) {
+        fetch(`${url.substring(0, url.length -4)}.json`)
+          .then(async res => {
+            if (res.ok) {
+              const track = await res.json();
+              track.trackUrl = url;
+              track.name = track.name || url.substring(url.lastIndexOf('/') + 1).replace(/\.mp3$/, ''),
+              s.playlist = [track];
+              s.trackNdx = 0;
+              playNextTrack();
+            } else {
+              throw new Error()
+            }
+          })
+          .catch(e => {
+            s.playlist = [
+              {
+                trackUrl: url,
+                name: url.substring(url.lastIndexOf('/') + 1).replace(/\.mp3$/, ''),
+              },
+            ];
+            s.trackNdx = 0;
+            playNextTrack();
+         });
+      } else if (url.endsWith('.json')) {
+        fetch(url)
+          .then(async res => {
+            if (res.ok) {
+              const track = await res.json();
+              track.name = track.name || url.substring(url.lastIndexOf('/') + 1).replace(/\.json$/, ''),
+              s.playlist = [track];
+              s.trackNdx = 0;
+              playNextTrack();
+            }
+          });
       }
     }