Add note about CORS to examples and docs

captbaritone · Jan 4, 2021 · e288916 · e288916
1 parent 3f1de0c
commit e288916
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 0 deletions.
diff --git a/examples/minimal/index.html b/examples/minimal/index.html
@@ -18,6 +18,9 @@
                     artist: "DJ Mike Llama",
                     title: "Llama Whippin' Intro"
                 },
+                // NOTE: Your audio file must be served from the same domain as your HTML
+                // file, or served with permissive CORS HTTP headers:
+                // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
                 url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
                 duration: 5.322286
             }],

diff --git a/examples/minimalMilkdrop/index.html b/examples/minimalMilkdrop/index.html
@@ -20,6 +20,9 @@
                     artist: "DJ Mike Llama",
                     title: "Llama Whippin' Intro"
                 },
+                // NOTE: Your audio file must be served from the same domain as your HTML
+                // file, or served with permissive CORS HTTP headers:
+                // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
                 url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
                 duration: 5.322286
             }],

diff --git a/examples/webpack/index.js b/examples/webpack/index.js
@@ -7,6 +7,9 @@ new Webamp({
         artist: "DJ Mike Llama",
         title: "Llama Whippin' Intro",
       },
+      // NOTE: Your audio file must be served from the same domain as your HTML
+      // file, or served with permissive CORS HTTP headers:
+      // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
       url:
         "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
       duration: 5.322286,

diff --git a/examples/webpackLazyLoad/index.js b/examples/webpackLazyLoad/index.js
@@ -7,6 +7,9 @@ new Webamp({
         artist: "DJ Mike Llama",
         title: "Llama Whippin' Intro",
       },
+      // NOTE: Your audio file must be served from the same domain as your HTML
+      // file, or served with permissive CORS HTTP headers:
+      // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
       url:
         "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
       duration: 5.322286,
@@ -20,6 +23,9 @@ new Webamp({
     getPresets: async () => {
       // Load presets from preset URL mapping on demand as they are used
       const resp = await fetch(
+        // NOTE: Your preset file must be served from the same domain as your HTML
+        // file, or served with permissive CORS HTTP headers:
+        // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
         "https://unpkg.com/[email protected]/weeks/week1/presets.json"
       );
       const namesToPresetUrls = await resp.json();

diff --git a/packages/webamp/docs/usage.md b/packages/webamp/docs/usage.md
@@ -54,11 +54,17 @@ const webamp = new Webamp({
       artist: "DJ Mike Llama",
       title: "Llama Whippin' Intro",
     },
+    // NOTE: Your audio file must be served from the same domain as your HTML
+    // file, or served with permissive CORS HTTP headers:
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
     // Can be downloaded from: https://github.com/captbaritone/webamp/raw/master/mp3/llama-2.91.mp3
     url: "path/to/mp3/llama-2.91.mp3"
   }],
   // Optional. The default skin is included in the js bundle, and will be loaded by default.
   initialSkin: {
+    // NOTE: Your skin file must be served from the same domain as your HTML
+    // file, or served with permissive CORS HTTP headers:
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
     // Can be downloaded from https://github.com/captbaritone/webamp/raw/master/skins/TopazAmp1-2.wsz
     url: "path/to/skins/TopazAmp1-2.wsz"
   },
@@ -194,6 +200,9 @@ The `Webamp` class has the following _instance_ methods:
 Add an array of `track`s (see above) to the end of the playlist.
 
 ```JavaScript
+// NOTE: Your audio files must be served from the same domain as your HTML
+// file, or served with permissive CORS HTTP headers:
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 webamp.appendTracks([
     {url: 'https://example.com/track1.mp3'},
     {url: 'https://example.com/track2.mp3'},
@@ -206,6 +215,9 @@ webamp.appendTracks([
 Replace the playlist with an array of `track`s (see above) and begin playing the first track.
 
 ```JavaScript
+// NOTE: Your audio files must be served from the same domain as your HTML
+// file, or served with permissive CORS HTTP headers:
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 webamp.setTracksToPlay([
     {url: 'https://example.com/track1.mp3'},
     {url: 'https://example.com/track2.mp3'},