Sharing 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 ready-made content by

  • offline distributing compilation files.
  • sharing ready-to-use Replayer links to online music and online compilations

Keep in mind that you are responsible for observing any copyrights 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 like One-Drive, Dropbox, Google Drive, or via e-mail, messenger, USB flash drive, SD card etc... )
  • Users will transfer/download the ZIP file to their local device file system first, then
  • Load the compilation with their Replayer app

About sharing 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/shared link URL.

Sharing via Dropbox

Dropbox is a popular file storage service that allows sharing both publicly and privately. Since CORS is supported with a hack, both the Track API and the Package API can be used.

To use an online file from a Dropbox account:

  1. Get the public download link
  2. Replace "www.dropbox.com" with "dl.dropboxusercontent.com", according to this community post.
  3. Optionally you can remove all parameters, except the "rlkey" with it's value
  4. Percent-encode the link. You can use this online URL encoder
  5. Use the percent-encoded link as media or package URL

Example with the Track API: 

https://web.replayer.app/#/play?
media=https%3A%2F%2Fdl.dropboxusercontent.com%2Fscl%2Ffi%2Flh4jw17lw5s0i847ogvzw%2Fyour-light-by-lidija-roos.mp3%3Frlkey%3Dznfw0etm3jqlne5q8lmr6a59l&
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

Example with the Package API: 

https://web.replayer.app/#/play?
package=https%3A%2F%2Fdl.dropboxusercontent.com%2Fscl%2Ffi%2Fbh7nelwdhoa8drjlnn0pe%2Fdemo-compilation-featuring-lidija-roos.zip%3Frlkey%3Dl9xjs145u5uz2lz2eo79kgtw9

As link: Not for Sale by Lidia Roos, using a compilation file served from Dropbox

Updating content

Dropbox creates a new download link for every new shared file, independent of it's name. To keep the same link for an updated file of the same name, you need upload/replace an existing file with a new file with the exact same name. You must not delete or rename the old file beforehand.

Sharing via 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 download link (that skips the browser preview for the sharing URL) using their Google Drive Direct Link Generator.
  3. Percent-encode the link. You can use this online URL encoder
  4. Use the link as media source with the Track API

Example:

https://web.replayer.app/#/play?
media=https%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Ddownload%26id%3D12pLN-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

Sharing via 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. Percent-encode the link. You can use this online URL encoder
  5. Use the link as media source with the Track API

Example:

https://web.replayer.app/#/play?
media=https%3A%2F%2Fonedrive.live.com%2Fdownload%3Fresid%3D3DB905138F2203AA%25211420%26authkey%3D!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:

Sharing 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.zip
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.