I was looking for a way to present a set of audio files. I’ve been learning a lot about the serverless design pattern, so I thought I would apply that pattern to this problem.

Here is the problem statement: Given a set of audio files deliver a playable web interface.

I am familiar with Cloudflare Tunnels so I thought I would use Cloudflare Stream for the host. This service consists of two parts - the storage and the streaming. The storage cost is $5 per kilominute. The streaming cost is $1 per kilominute. First you establish your content - 1000 minutes of storage for $5/month. Then you implement streaming - 1000 minutes of streaming for $1/month. I have 717 minutes stored and I used less than 1000 minutes streaming last month = $6 cost. Here is one possible problem solution:

1) Get your videos together. I started with a set of mp3s and some original art. I used ffmpeg to make a set of mp4s with a still image as the video track. (I guess that is an article for another time).

2) Sign up for Cloudflare Stream. You will get an API Key and and Account Number.

3) Upload your content. Cloudflare has a web based admin page, but I prefer command line tools. They have an API, so here is a bash script for batch upload.

You need your Account Number, API Key, and email address.

# upload all mp4s in current dir
declare -x ACCOUNT=youraccountnumber
declare -x KEY=yourapikey
declare -x EMAIL=youremailaddress
for f in *.mp4 ; \
do curl -X POST \
 -F file=@$f https://api.cloudflare.com/client/v4/$ACCOUNT/stream \
 -H "X-Auth-Key: $KEY" \
 -H "X-Auth-Email: $EMAIL" ; done

4) Implement your player. Cloudflare provides an iframe with a fully featured player. They also have React and Angular components, or you can roll your own using the Player API. The only required data is the uid of the video. Let's use the serverless design pattern and host our html on Cloudflare Pages.

Here is the commented source for a one page web app. This app has a header with title and bandcamp link, a player that uses an iframe with a javascript constructor, and a set of clickable thumbnails that are generated once and then included: https://github.com/taudas/imadeamusiciansgallery/wiki/index.html

5) The tricksy part is generating the html for the clickable set of thumbnails of all the video files. First use the Cloudflare API to get all properties. Here is the bash script used to retrieve all the metadata from a Cloudflare Stream account.

# get a list of all properties for all files
declare -x ACCOUNT=youraccountnumber
declare -x KEY=yourapikey
declare -x EMAIL=youremailaddress
curl -s \
 -X GET "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT/stream" \
 -H "X-Auth-Key: $KEY" \
 -H "X-Auth-Email: $EMAIL" >allprops

Second use jquery to extract just the uids to a randomized list.
cat allprops | jq -r '.result[].uid' | shuf > alluids

Third construct the links.html fragment. There is the main link to select the specified file and the link to the thumbnail provided by Cloudflare. I need to use the uid twice so time for some sed magic.
cat alluids | sed -e 's#\(.*\)#<a href="http://danglingganglion.com/?\1"><img width="20%" src="https://videodelivery.net/\1/thumbnails/thumbnail.jpg"></a>#' >links.html

The generated links.html file is included into index.html with some javascript and Voila!