Providing content with Replayer

Table of Contents

While Replayer can work with any available resource in one of the supported media formats, you can also distribute your own specific content by

  • offline distributing compilations as files or packages
  • sharing ready-to-use Replayer links to online music and online compilations

Keep in mind that you are responsible for observing any licenses when distributing media files.

Offline distribution

  • In the Replayer app, download the compilation as a ZIP file
  • Distribute the ZIP file e.g. via cloud storage (One-Drive, Dropbox, Google Drive), e-mail, messenger, USB flash drive, SD card etc...
  • Users will then download the compilation to their their local file system first, then
  • Load the compilation from within the Replayer app

Serving music files online

When sharing media directly with Replayer (either using the Track API or Package API), the files need to be served from an URL the recipient's Replayer instance has proper access to. This usually means that the files are accessible using a public (or shared) link URL. Also, for compilations, the server must support Cross-origin resource sharing (CORS) for the Replayer origin. See below for more info about CORS.

Dropbox

Dropbox is a popular file storage service that allows sharing both publicly and privately. Since CORS is not supported out of the box in conjunction with Replayer, only music files, using the Track API, can be used online without a preceding download.

To use an online file from a Dropbox account:

  1. Get the public download link
  2. Replace the "dl=0" ending with "dl=1", according to their documentation on how to directly downloading files via a link.
  3. Use the link as media source with the Track API

Example: 

https://web.replayer.app/#/play?
media=https://www.dropbox.com/s/pm62qksbfj00t7t/your-light-by-lidija-roos.mp3?dl=1&
title=Your+Light&
album=Not+For+Sale&
artist=Lidija+Roos&
17.5=Verse

As link: Your Light by Lidia Roos, with the media file served from Dropbox

Google Drive

Google Drive is a popular file storage service that allows sharing both publicly and privately. Since CORS is not supported out of the box in conjunction with Replayer, only music files, using the Track API, can be used online without a preceding download.

To use an online file from a Google Drive account:

  1. Get the link ("sharing URL") for the file and make sure to select the "Anyone with the link", as a viewer, option.
  2. Generate a direct dowload link (that skips the browser preview for the sharing URL) using their Google Drive Direct Link Generator.
  3. Replace the ampersand character (&) in the direct download link with it's URL encoding (%26).
  4. Use the link as media source with the Track API

Example (note the URL encoded & character in the media URL, just after "download"): 

https://web.replayer.app/#/play?
media=https://drive.google.com/uc?export=download%26id=12pLN-awFxp1r-t5lBWNqCGFXoaCKI_eJ&
title=Your+Light&
album=Not+For+Sale&
artist=Lidija+Roos&
17.5=Verse

As link: Your Light by Lidia Roos, with the media file served from Google Drive

Microsoft OneDrive

OneDrive is a popular file storage service that allows sharing both publicly and privately. Since CORS is not supported out of the box in conjunction with Replayer, only music files, using the Track API, can be used online without a preceding download.

To use an online file from a OneDrive account, instead of "sharing", you need to use the "embed" feature, then tweak the URL:

  1. Select the "Embed" action for your file
  2. Copy the embeddable source code, then extract the value for the "src" key
  3. Replace the "embed" keyword with "download"
  4. Replace any ampersand character (&) in the direct download link with it's URL encoding (%26).
  5. Use the link as media source with the Track API

Example (note the URL encoded & character in the media URL, just before "resid" and "authkey"): 

https://web.replayer.app/#/play?
media=https://onedrive.live.com/download?cid=3DB905138F2203AA%26resid=3DB905138F2203AA%211420%26authkey=ABKQ8jbDgCvjopg&
title=Your+Light&
album=Not+For+Sale&
artist=Lidija+Roos&
17.5=Verse

As link: Your Light by Lidia Roos, with the media file served from OneDrive

Replayer library

For reference and demo purposes, Replayer has it's own library of freely available music, both as single tracks and compilations, which you can try.

These are some example audio files in all supported media formats:

From your own web server

To allow Replayer access to files on your own web server, you will need to enable Cross-origin resource sharing (CORS) in a suitable way, at the very least to the "https://web.replayer.app" origin, and for the GET and OPTIONS method.

As an example, on https://lib.replayer.app, running on a LiteSpeed web server, it's done via an .htaccess file:

<IfModule mod_headers.c>
# Allow CORS to all origins (or use "https://web.replayer.app" to only allow Replayer specifically)
Header set Access-Control-Allow-Origin "*"
# Allow GET, plus the OPTIONS for CORS preflight requests
Header set Access-Control-Allow-Methods "GET,OPTIONS"
</IfModule>

Next, you can use the Security Header scanner from Scott Helme to check for the above headers on your served files. Alternatively, the command line tool curl also can show the headers (example file from the Replayer library):

# check for CORS headers to the "https://web.replayer.app" origin (example for a linux terminal)
$ curl --progress-bar --dump-header - --output /dev/null -H "Origin: https://web.replayer.app" --url https://lib.replayer.app/demo-compilation-featuring-lidija-roos.rez
HTTP/2 200 
content-type: application/octet-stream
[...]
content-security-policy: default-src 'self';
access-control-allow-origin: *
access-control-allow-methods: GET,OPTIONS

You will need to have the access-control-allow-origin and access-control-allow-methods to be provided as explained above.