new ao3 audio tag

[godoflaundrybaskets]

Example:
Post where I'm using it https://archiveofourown.org/works/21261434

Details: I basically copied the code straight out of what ao3 suggested here:  https://archiveofourown.org/admin_posts/14125  and just replaced with my own mp3 links. If your host doesn't provide a direct link to the mp3 like archive.org does then this new audio tag probably won't work for you.

Code:

<audio src="https://archive.org/download/capableofcomingoutalive/capable%20of%20coming%20out%20alive.mp3" controls="controls" crossorigin="anonymous" preload="metadata">

 
<p>Your browser doesn't support streaming with the HTML5 audio tag, but you can still <a href="https://archive.org/download/capableofcomingoutalive/capable%20of%20coming%20out%20alive.mp3" rel="nofollow">download this podfic</a>.</p>

</audio>

 

CSS:
audio {
  width: 100%;
  max-width: 500px;
}


What it looks like:




Hosts with .mp3 links (that I know about):
✅Archive.org is working
✅Dropbox.com is working but requires some finagling (explained below)
✅Airtable.com is working (here's a guide by bluedreaming: https://archiveofourown.org/works/29325015)
✅ParakaProductions's (and other self hosts on dreamhost/backblaze/similar platforms) should work! You might need to add a .htaccess to your system if you don't have it already. An example file is avaliable from paraka here:  https://twitter.com/ParakaProducti1/status/1192946378135277569 . Can check out the note at the bottom of the announcement post for details too:  https://archiveofourown.org/admin_posts/14125
✅Backblaze - though this will require you do do some configuration to enable CORS yourself. See  revolutionaryjo's comment on this post.


Google drive generally doesn't provide direct links. Same with a lot of hosts unless you're doing the hosting yourself or with a friend like paraka. I use archive.org and that one gives you direct links to your uploaded mp3s.

When I say direct link to the mp3, I mean something like this  https://ia801509.us.archive.org/1/items/03.haunt/03.%20haunt.mp3 . Which is ending in a .mp3 file extension. When you click on a direct link to an mp3, it should load into your browser like the following picture:
https://ia801509.us.archive.org/1/items/03.haunt/03.%20haunt.mp3




Archive.org

Archive.org direct links to it's mp3s are fairly easily available.

• Go to the item page which gets created when you upload the mp3
• Find the "Download Options"
• Click the VBR MP3 option 
  
• Right click the mp3 file you want the embedded streamer
• Select the option "Copy Link Address"

Dropbox

Create a shared link for your file.

Paste the link in your browser. It should look something like: https://www.dropbox.com/s/4km8khiuaaviaf2/Breathing%20Space.mp3?dl=0

You should be able to just paste that in as your audio source url and, change the www to a dl and then have it appear <audio src="https://dl.dropbox.com/s/4km8khiuaaviaf2/Breathing%20Space.mp3?dl=0" />

****



Old Dropbox Instructions (if the stuff above doesn't work)

Dropbox which has a share mp3 link but the default one is not a direct mp3 link and will not work with the ao3 audio tag. So this link though it has a .mp3 in the URL does not take you to that black screen:
https://www.dropbox.com/s/d1ggsy9th8fxahy/03.%20haunt.mp3

To generate that direct mp3 link I'm talking about with dropbox you can do the following. First you need to generate a shared link (which you probably already do if your sharing your podfics through them.). Your full link should look like https://www.dropbox.com/s/d1ggsy9th8fxahy/03.%20haunt.mp3

Now that won't allow you to embed but what you can do is replace the  www.dropbox.com at the front of the url with dl.dropboxusercontent.com. Like so:
https://dl.dropboxusercontent.com/s/d1ggsy9th8fxahy/03.%20haunt.mp3

Can see the dropbox one working for me here:  https://archiveofourown.org/works/20956637  with the embedded mp3. 

All of this is also explained in this tutorial:  https://zapier.com/learn/how-to/generate-direct-dropbox-link/.
 

Comments

[anneapocalypse]

Good stuff to know! Thank you for sharing.

[revolutionaryjo]

Info on how to enable CORS on Backblaze, which I'm dropping here to save others the time and effort spent attempting to google it before just logging in and seeing it's an option that can be clicked on:

1. Log in and find the bucket you want to enable CORS on
2. Click the "CORS Rules" link
3. Select "Share everything in this bucket with all HTTPS origins"
4. Save