Amazon S3 and WavePlayer: the perfect configuration

There are several benefits in storing your media files on Amazon S3. The main reason is that Amazon S3 is by far one of the fastest servers in the market, which improves the loading time of your audio tracks. Another reason is that Amazon also offers the possibility to distribute your files across a global network of servers, resulting in lower latencies for any user around the world. Finally, offloading your files to Amazon S3 will also lift some weight from your web hosting account not only in terms of monthly bandwidth but also in regard to the hosting space taken up by your files.

Unlike other audio players, such as the default WordPress audio player, WavePlayer has special features (i.e. the waveform animations) that require to access the audio file through javascript. If the audio file is stored under the same domain name of your website, the browser always grants access from a script. By contrast, if the audio file being played back is stored on a remote server, before granting access from the script, the browser checks if the remote server allows the resource to be shared with a different origin. That mechanism is called CORS, Cross-Origin Resource Sharing.

Configuring the CORS on Amazon S3

Configuring the CORS policy of your Amazon S3 bucket is very easy and can be completed as follows:

1. Login to your AWS Management Console
2. In the Services menu, locate the S3 service, under the Storage category. You can also type S3 in the Search Bar

3. You will be presented with a list of your current Buckets. Click on the bucket you want to edit.

4. Click on the Behaviors tab

5. Scroll down to the bottom of the page, where you are going to find the CORS editor. Click on the Edit button to start editing the CORS policy of your bucket.
6. In the latest version of the AWS Management Console, the CORS policy is written as a JSON array of CORS policy objects. If you want WavePlayer to have access to the audio files stored in your S3 bucket, you must list HEAD and GET as the AllowedMethods and your domain name as the AllowedOrigin. The following CORS policy should work: make sure to replace https://www.example.com with the actual URL of your website.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "https://www.example.com"
        ],
        "ExposeHeaders": []
    }
]

7. When you are done editing the CORS policy, click the Save Changes button

The change should be effective immediately. So, you can go back to your website and verify that WavePlayer can now playback all your files from S3 and render the waveform animation the same way it does for all your local files.