Just Press Play! (Podfic Embedding on the AO3)

Post Header

Published:

2012-09-21 08:57:31 UTC

Tags:

While we're not yet able to host media types other than text, we're working on making the site more welcoming to multimedia works. As part of this, we encourage users to embed podfics and vids. In 2012, Google implemented server restrictions on their media player embedding solution that many of our users had used to post podfic, causing the works to not play any more. As a stopgap, we looked at several solutions, including continuing to expand our whitelist and locally hosting a copy of the Google code. We wanted, however, to have a more open-source solution that we will be able to fully support going forward, and preferably one without too much adjustment for the users.

After some debate and discussion, we have installed locally on the Archive a copy of Dewplayer, a Flash-based CC BY-ND 2.0 MP3 player. By hosting the player on the Archive, we have better confidence in the safety and security of the code, and because it is licensed under the Creative Commons, we're more confident we can provide this solution for the future.

One of the nice features of Dewplayer is that it by default comes with several different player skins. We recommend the Classic and Bubble skins, and the Volume variations of each. You will still need to have your files hosted on another server for now, though. Once you have the file hosted, just replace MP3_FILE_URL in the code for your favorite player below. (We should also note that several users have reported their browser pasting smart quotes again, so be sure to convert any of those back to normal double quotes!)

Classic

the Dewplayer Classic skin
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer.swf" width="200" height="27" allowscriptaccess="never" allownetworking="internal"></embed>

Classic with Volume control

the Dewplayer Classic skin with volume control
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer-vol.swf" width="250" height="27" allowscriptaccess="never" allownetworking="internal"></embed>

Bubble

the Dewplayer Bubble skin
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer-bubble.swf" width="250" height="65" allowscriptaccess="never" allownetworking="internal"></embed>

Bubble with Volume controls

the Dewplayer Bubble skin with volume control
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer-bubble-vol.swf" width="250" height="65" allowscriptaccess="never" allownetworking="internal"></embed>

Actions

Comments

Sorry, this news post doesn't allow comments.

pts Fri 21 Sep 2012 02:47PM UTC

This is great!
Is there any chance you'll eventually include an HTML5 embedding option for browsers not running Flash (e.g., iOS et al?)

Comment Actions
- Thread
1. samjohnsson Fri 21 Sep 2012 04:37PM UTC
  
  Hi!
  We do realize that browsers without Flash (iOS, some Android builds) are an issue that we need to address. We did consider transitioning to audio (and concurrently, video) tags during this time, but cross-platform support is a major issue. Neither Firefox nor Opera support MP3 (and Chrome may be depreciating it), while IE9 and Safari don't support OGG. (MozDev). Currently, there is no across-all-platforms solutions. The Coders are continuing to look at HTML5 support and if the situation changes, will re-evaluate adding audio and video to the sanitizer.
  Best,
  Sam J.
  AO3 Support
  
  Comment Actions
  - Thread
  - Parent Thread
2. 1. pts Fri 21 Sep 2012 04:41PM UTC
    
    So essentially, no mobile audio until the HTML5 audio codec licensing fiasco resolves itself, i.e., probably never.
    Software patents are the worst idea ever.
    
    Comment Actions
    - Thread
    - Parent Thread
  2. 1. samjohnsson Fri 21 Sep 2012 04:54PM UTC
      
      Hopefully, we'll be able to support the tags before that. But at the moment, we wanted an implementation that we could get back up and running in time for several upcoming podcasting challenges, with code that wasn't too wildly different from the previous Google player. As the site is in beta, our coders are always evaluating the sections of code and seeing what we can reliably support across our users' platforms. I will definitely make sure the coders are aware that HTML5 support is needed!
      Best,
      Sam J.
      AO3 Support
      
      Comment Actions
      - Thread
      - Parent Thread
    2. 1. pts Fri 21 Sep 2012 05:09PM UTC
        
        That's good to know.
        Sorry if I sounded grumbly -- the truth is I fucking love AO3, and I think this is the pragmatically-correct solution for Right Now.
        
        Comment Actions
        
        Thread
        
        Parent Thread
  3. Nixill (NixillUmbreon) Mon 02 Sep 2013 03:06PM UTC
    
    The way the audio tag works is that you can specify multiple sources (and a fallback message) as follows:
    <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
    I realize this might not be the optimal solution, and might possibly be too complicated for some users, but that's how the tag was set up. The video tag works in the same way.
    Edit: Just had an idea. You could add your own tag, <audiofile> for example, which would probably work like this:
    <audiofile src="AUDIO_FILE_MP3" />
    This would convert to the following HTML:
    <audio controls> <source src="AUDIO_FILE_MP3"> <embed type="application/x-shockwave-flash" flashvars="mp3=AUDIO_FILE_MP3" src="http://archiveofourown.org/system/dewplayer/dewplayer.swf" width="200" height="27" allowscriptaccess="never" allownetworking="internal"></embed> </audio>
    This would allow browsers that support the <audio> tag and MP3 format to use it, while letting other browsers fall back on the flash-based option.
    Edit 2: Your HTML auto-cleanup needs to learn to recognize that self-closing tags do not need to close tags that opened before them.
    
    Last Edited Mon 02 Sep 2013 03:16PM UTC
    
    Comment Actions
    - Thread
    - Parent Thread
  4. 1. CJ of Support (AO3_Support) (Official) Mon 02 Sep 2013 05:15PM UTC
      
      Hi, Nixill:
      Thank you for your suggestion on the audio tag and for the custom tag. Due to legacy browser support and the amount of work the rewrite will take, we have not transitioned to HTML5 yet. And the HTML sanitizer is very much a work in progress. I'll make a note of your suggestions and comments for the coding team to consider! If you have any other suggestions, feel free contact us directly via the Support and Feedback Form.
      Best,
      Sam J.
      AO3 Support
      
      Comment Actions
      - Thread
      - Parent Thread
heardtheowl Fri 21 Sep 2012 03:25PM UTC

<3<3<3 THANK YOU! THANK YOU SO VERY MUCH! <3<3<3

Comment Actions
- Thread
zvi Sat 22 Sep 2012 03:18PM UTC

I find it frustrating that you guys are more tightly integrating flash support for multimedia as the format is losing support devices, which people increasingly use to experience entertainment. To what extent are you supporting HTML5 audio tag ?
edit: saw the above conversation after I posted. I'm glad to see you're thinking abolut it, although I'm not sure follow the reasoning.

Last Edited Sat 22 Sep 2012 03:24PM UTC

Comment Actions
- Thread
1. samjohnsson Sun 23 Sep 2012 04:46PM UTC
  
  Hi, Zvi!
  audio and video are on our radar, and transitioning to HTML5 validation is something that we want to do. However, it will require changing the doctype, several page layout components to meet the new validation, and recoding the HTML sanitizer - all of which are things we're loathe to do (again) immediately prior to the holiday rush, especially when it's known that some browsers we still support (IE8) can have unusual behavior with HTML5. This is on top of the issue that creators would have to upload two different filetypes, or just not provide inline content to a significant portion of our users.
  In sum: yes, we do want to support HTML5 eventually, but we don't want to rush it out and break all the things in the process.
  Best,
  Sam J.
  AO3 Support
  
  Comment Actions
  - Thread
  - Parent Thread
argentumlupine Sun 23 Sep 2012 11:40AM UTC

Thank you!

Comment Actions
- Thread
Firerose Sun 30 Sep 2012 02:33AM UTC

Thanks for this, it seems very easy to use!

Comment Actions
- Thread
mothlights Tue 09 Jul 2013 12:31AM UTC

Thank you for setting up a convenient way to offer podfic streaming! :)

Comment Actions
- Thread
klb Sat 24 Jan 2015 06:18PM UTC

Sorry to comment, delete, and then comment. I saw that my streaming was working again and thought I might have been wrong about it being down, but now I see that Classic with Volume Control is working and the others go to 404 errors. There's a decent chance that the reason one of them just got fixed is because you're already on it and working to fix the problem, but just in case I thought I'd recomment to mention the issue.

Comment Actions
- Thread
1. Account Deleted Wed 23 Dec 2015 03:58AM UTC
  
  Hello klb. I'm just wondering how you manage to get your podfics working? I've tried posting from different browsers and systems (iOS and PC alike) and haven't received any satisfying results. Please let me know if there's a step I'm missing? What process do you go by?
  
  Comment Actions
  - Thread
  - Parent Thread
2. 1. klb Mon 18 Jan 2016 06:06PM UTC
    
    It's about where you host the file. I'm lucky enough to be able to host it on Paraka's server, but sadly she's not able to take on new people right now. She's working on finding a solution for that, but in the meantime there are other options like soundcloud that apparently you can use with AO3's streaming? There's some discussion about it here.
    (Although I see in the comment below that you're already using Soundcloud. I wish I knew enough to help you troubleshoot it, but I don't. Sorry!)
    
    Last Edited Mon 18 Jan 2016 06:07PM UTC
    
    Comment Actions
    - Thread
    - Parent Thread
  2. 1. Account Deleted Wed 04 May 2016 05:45AM UTC
      
      I figured it out, finally!
      Soundcloud offers an embed link that can be pasted into AO3's HTML option. And voila. I feel a bit stupid for not realizing it was so simple.
      Thank you for the help, though!
      
      Comment Actions
      - Thread
      - Parent Thread
CosmicGranddad Sat 28 Nov 2015 03:11PM UTC

Hey, I'm sorry I have tried a few times but I seem to cannot get it to work... I tried with different URL's hosted on different websites, different players and I thought about the smart quotes thing as well but that doesn't seem to be the problem....
it just keeps loading instead of playing the podfic
http://mfi.re/listen/276vpx6v1l12atr/1._The_most_annoying_sound.mp3
This is the link to where it's currently hosted. Thank you for your time!

Comment Actions
- Thread
1. Account Deleted Wed 23 Dec 2015 02:03AM UTC
  
  I am experiencing the same issue. Although, I did read previous comments, and I'm guessing the problem is that I'm attempting to embed through iOS' Safari browser. I have a PC laptop, though, too. Does Firefox support this? Explorer (which I hate)?
  The original MP3 file is located on Soundcloud.
  
  Comment Actions
  - Thread
  - Parent Thread
2. 1. CosmicGranddad Tue 19 Jan 2016 10:00AM UTC
    
    I tried with chrome... explorer doesn't work on mac's anymore
    
    Comment Actions
    - Thread
    - Parent Thread
Cactus_Candy Sun 31 Jan 2016 01:02PM UTC

Hi, I am having some issues getting my player to work. I have tried over 8 different hosts and none of them are working with the Dewplayer...
I keep getting XML error each time. Can you help me to fix this please?

Comment Actions
- Thread
1. clover71 Wed 01 Feb 2017 07:36AM UTC
  
  Hi. I just came here to check the instructions in embedding audio files because the embed code I used with soundcloud doesn't seem to work anymore, so I opted for AO3's Dewplayer. I used DriveHQ as host and it works. Try Dropbox as well, since that's the host site recommended by the archive's support when I asked about it. Hope this helps.
  
  Comment Actions
  - Thread
  - Parent Thread
2. 1. CJ of Support (AO3_Support) (Official) Wed 01 Feb 2017 02:20PM UTC
    
    Hi, Clover_71:
    Soundcloud embeds breaking are news to us. Are you using Soundcloud's player completely, or using a link from Soundcloud in Dewplayer? If you can let us know, here or in a Support ticket, we'll try to help!
    Best,
    CJ
    AO3 Support
    
    Comment Actions
    - Thread
    - Parent Thread
  2. 1. clover71 Wed 01 Feb 2017 08:28PM UTC
      
      Hi. I was using the embed code from Soundcloud. I used to see the player on the page, but when I checked a few days ago, the player isn't visible anymore. I haven't checked my account in SoundCloud, so I'm not sure if it's an account-related problem. I just went with the easier and simpler option and that is to use the archive's DewPlayer.
      ETA: I just checked my soundcloud account, it seems it is an account-related glitch. I haven't logged in for quite some time and I just needed to log in again. It's working now, thought you might like to know.
      
      Last Edited Thu 02 Feb 2017 05:17AM UTC
      
      Comment Actions
      - Thread
      - Parent Thread
3. CJ of Support (AO3_Support) (Official) Wed 01 Feb 2017 02:18PM UTC
  
  Hi, Tanuki_Ghost:
  Thanks for asking about this issue with your media. Usually, an XML error means that Dewplayer isn't getting the link directly to the mp3 file. If you can submit a Support ticket with the specific link you're trying to use, we can advise you further.
  I should note that we generally don't monitor the comments on old posts. If you ever have questions, contacting us at the "Technical Support and Feedback" link at the bottom of any page is the fastest method to reach us!
  Best,
  CJ
  AO3 Support
  
  Comment Actions
  - Thread
  - Parent Thread
Izzyv1o Sun 13 Aug 2017 02:47AM UTC

Thanks for such detailed information!
Are there any updates the supported players to not use flash? I'm curious because it's been 5 years since this post andflash support is ending across browsers in the coming years.

Comment Actions
- Thread
NateVargas Sun 17 Jun 2018 09:29AM UTC

Where can I find Dewplayer?

Comment Actions
- Thread
Accidentalshipper Wed 18 Jul 2018 02:32PM UTC

Does anyone know if this is still supposed to work? Because I've tried it with several hosts, and I just keep getting a black rectangle where the player should be...

Comment Actions
- Thread
1. lonelystars Sat 19 Mar 2022 08:50PM UTC
  
  sorry im late but no because it uses flash and flash is no longer hosted on all sites TT its aggravating to see that this is their only solution and they haven't tried retackling it-however i also understand that they are all volunteers its just been like ten years and no other solution has come up...
  
  Comment Actions
  - Thread
  - Parent Thread

AO3 News