Automaic Playlists with Amazon S3
Wimpy integrates the ability to use the S3 service on Amazon Web Services (AWS) to automatically list files and subfolders located in your bucket -- similarly to how traditional Wimpy "Automatic Playlists" operate.
Since this feature is integrated into wimpy, using this feature is as simple as setting the "media" option to the bucket URL.
<div data-wimpyplayer data-media="http://BUCKET.s3.amazonaws.com/?foo.s3"></div>
-- OR --
<div data-wimpyplayer data-media='{"file":"http://BUCKET.s3.amazonaws.com","kind":"s3"}'></div>
IMPORTANT: We must inform wimpy that we are using the S3 service. This means we have to "trick" wimpy into parsing the extension of the URL as "s3", or we have to use JSON to explicitely tell wimpy what kind of file we have. In the two examples above, the first example uses the "trick" by tacking on a "?foo.s3", and the second example uses JSON to tell wimpy what kind of URL we are using.
You can also target sub-folders within your bucket directly:
<div data-wimpyplayer data-media="http://BUCKET.s3.amazonaws.com/SUB-FOLDER/?foo.s3"></div>
-- OR --
<div data-wimpyplayer data-media='{"file":"http://BUCKET.s3.amazonaws.com/SUB-FOLDER","kind":"s3"}'></div>
Configuring Your Bucket
Buckets need to be set up so that the "public" is allowed to obtain object lists, in addition, you'll need to Edit the CORS configuration to allow wimpy to interact with the bucket.
Step 1 - Add premission to "List".
After logging in to Amazon S3, select a bucket you wish to use for Wimpy, then click the icon next to your bucket, or choose "Actions > Properties" to display the bucket properties panel.
Next, click the "Permisions > Add more permissions" icon and set the "Grantee" to "Everyone", then check the "List" option.
Step 2 - Edit the CORS Configuration
Click the "Edit CORS Configuration" icon
A window will pop up for you to enter some configuration code... add the following code:
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
Close the CORS box.
Step 3 - Save the configuration
Bucket URLs
AWS accounts can be set up to run under a few different "Regions". This impacts the URL to your bucket.
Region name | Region | Example URL |
---|---|---|
US Standard | us-east-1 | MYBUCKET.s3.amazonaws.com |
US West (Oregon) | us-west-2 | MYBUCKET.s3-us-west-2.amazonaws.com |
US West (N. California) | us-west-1 | MYBUCKET.s3-us-west-1.amazonaws.com |
EU (Ireland) | eu-west-1 | MYBUCKET.s3-eu-west-1.amazonaws.com |
EU (Frankfurt) | eu-central-1 | MYBUCKET.s3.eu-central-1.amazonaws.com |
Asia Pacific (Singapore) | ap-southeast-1 | MYBUCKET.s3-ap-southeast-1.amazonaws.com |
Asia Pacific (Sydney) | ap-southeast-2 | MYBUCKET.s3-ap-southeast-2.amazonaws.com |
Asia Pacific (Tokyo) | ap-northeast-1 | MYBUCKET.s3-ap-northeast-1.amazonaws.com |
South America (Sao Paulo) | sa-east-1 | MYBUCKET.s3-sa-east-1.amazonaws.com |
Targetting Sub-Folders in your bucket
To target "sub-folders" wihtin your bucket, use the traditional "file and folder" approach as:
<div data-wimpyplayer data-media="http://BUCKET.s3.amazonaws.com/SUB-FOLDER/?foo.s3"></div>
-- OR --
<div data-wimpyplayer data-media='{"file":"http://BUCKET.s3.amazonaws.com/SUB-FOLDER","kind":"s3"}'></div>
Static Websites
Unfortuantely, this feature does not work when a bucket is set up as a "static website", because when a bucket is configured as a statis website, it is impossible to leverage the S3 communication protocol to retrieve object lists.
You must set up a standard bucket to use this feature.
See Also