Streaming Files from S3 Using AWS Cloudfront

For a recent project I was working on, we needed to host a bunch of audio files for our web app and make them streamable to the client. My original implementation made use of Nodejs streams to stream content hosted on S3 down to the client. Check out that implementation here.

And then totally disregard that. Very soon afterward, I discovered AWS Cloudfront which offers a much better way to host and stream files. Cloudfront lets you associate a distribution with an existing S3 bucket and make select files streamable or generally available.

I'll briefly go through here how to start make S3 hosted audio files available for streaming on a client.

Link to S3

Assuming you have a bucket up and running on S3 with some files you want to make available, head on over to the Cloudfront Dashboard.

Click Create Distribution
Then choose Web

On the next screen set the Origin Domain Name to the bucket you want to set up the distribution for. Optionally, add in an Origin Path to specify a folder in the bucket to use as the default origin.

Click Create Disrtibution down at the bottom, and it will get up and running.

Back in your dashboard, you should see the new distribution along with some information about it.

Setting Up Permissions on your Bucket

to make the files available for streaming, you have to make them 'public' in your bucket. There are a few ways to do this depending on what you're hosting.

1) You can simply right click on any files in your bucket and choose Make Public

2) You can right click on a folder and choose Make Public. This will grant access to all files currently in the folder, but new files added into the folder will not be made public by default.

3) Probably your best bet, is to set up a bucket policy. These set up global permission defaults for your bucket and give you a lot of fine grained control over what you want to share, and with whom.

To edit a bucket policy, right click your bucket and choose Properties.
Click Permissions --> Add bucket policy.

Here are some example bucket policies from Amazon/ Copy, paste, modify, and save as your new bucket policy.

Here's a basic boilerplate to allow users to stream files from your bucket. It will let users get access to any .wav files in your public folder in the specified bucket.

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::examplebucket/public/*.wav"]
    }
  ]
}

Accessing Files on the Client

Once your new Cloudfront distribution is in an Enabled state and you have updated your bucket permissions, you can access your files through the client.

Back in the Cloudfront dashboard, grab the Domain Name for your distribution, then append the S3 folder path and filename of a file to stream.

For example, to get at test.wav in the public folder:

< what ever cloud front string >.cloudfront.net/public/test.wav  

Put that into your browser and you should be able to stream your file.

Like wise, to make it available on an html page add it as the source to an audio tag, and you're good to go!