Audio Player
Audio Player with HTML5 Fallback (26 posts)

  1. masswerk
    Posted 5 years ago #

    Hi everyone,

    I modified Audio Player to include a HTML5 audio element as a fallback option.
    The SWF is still the first option, only if this fails and HTML5-audio is available with canPlayType "mp3", an audio element is injected. Finally, if both options fail, the behavior is like with the standard version. Even if MP3 isn't supported by all browsers, this modification adds at least support for iPhones and iPads.

    The code expects the soundfile-URL to be either escaped or base64-encoded (these are the standard formats of the plugin).

    As this might be of wider interest and I didn't find a way to contact the authors, I'm posting the code here.

    Installation is a bit difficult:

    • You could either exchange the file "audioplayer.js" in your plug-in directory, which is definitely not wise to do as it might interfere with any updates.
    • I choose to not call wp_head() in my theme and to output all headers by php.
      (This leaves you with the task of generating all header elements by your own.)
      This way I referred a file in a special directory inside my theme:

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/audio-player-html5.js?ver=">

    Hopefully the modifications will migrate to the standard code, so that the HTML5 fallback would become available by a simple update.


  2. adamlazio
    Posted 5 years ago #

    Thank you @masswerk for this! I really hope they include this in the next official update. With Flash being depreciated in the ever-increasing mobile market, this is very forward thinking of you.

    I have one question: how do I css config the html5 player? I was looking through your script and it looks like the css is dynamically created? Any help would be greatly appreciated!

  3. masswerk
    Posted 5 years ago #

    I'm afraid there isn't much to style for the HTML5-audio-element. It seems to render as a generic UI-Element (which is imho the best choice for a mobile client).
    Try to apply styles for the "audio"-element in your style.css.

    audio { width: 300px; color: #00f; }

    (I haven't tried it yet, as the audio-element is quite new and I think it would better be instantly recognizable by the user.)

    A more complex approach would have been to compose a complex widget by the use of JavaScript and mimic the SWF-Interface, but this was beyond the scope of this hack.

    Road-map for using a generic html5-widget:
    1) have a variable to check if we did include the widget-script
    2) in the callback inject the widget-script into the page's header, if we haven't done so
    3) call the script instead of inserting an audio-tag
    4) inside the widget script we would have a function to output some divs to represent the UI of the audio element (sliders, trackbars, text-display, and so on)
    5) inside the widget script we would also have the code to control this UI and the related (invisible) audio
    6) modify the function AudioPlayer to provide the config-values/options also to our widget-script

    But again, I'm not to sure if this kind of UI would be the best choice for mobile clients. So we would probably like to provide 2 kind of UIs: the generic UI-element for mobile/touch-clients and a widget for other clients.

  4. adamlazio
    Posted 5 years ago #

    I'll give the audio tag in css a try. Also, the widget sounds really interesting, though it would be well beyond my javascript abilities. If you develop something like it, I'd be happy to give it a try.


  5. sdeep27
    Posted 5 years ago #

    hey i just ran in to this post through google and it's exactly what I needed! eliminates the need to go back and change all my old posts with the audio player if i had downloaded another html5 audio plugin that's not half as customizable as this one.

    however, I did implement by replacing the audio-player.js file using your minfied version. hopefully won't affect anything....

    thanks again for this! a real lifesaver.


  6. mt33
    Posted 4 years ago #

    Hey, thanks a lot for this!

  7. flotzam
    Posted 4 years ago #

    Hi -- Thanks for this. Unfortunately, the code didn't work out of the box for me. But I was able to modify it and get it working! Here's a post on what I did and a link to the modified js: http://developer.flotzam.com/2011/09/27/flotzam-audio-player-now-falls-back-to-html5-for-ios-etc/ And here's the site where the code is working: http://flotzam.com

  8. masswerk
    Posted 4 years ago #

    Hi flotzam,

    the code was originally written for a site that required link-encryption for mp3.
    Also I found that the parent element came into the way of my layout and I just wanted the bare audio element. Fine that there's another variant of this now - maybe these could be merged in the next update (with a configuration?), so it would fit all needs.

  9. dasnipe
    Posted 4 years ago #

    Works for me, thanks guys on the good work and maybe we can keep updating the plugin!

  10. Brad West
    Posted 4 years ago #

    Dose anyone know how to do the opposite of this?

    I'd like to use the HTML5 player as default and fallback to the flash, Audio Player, if they're using an old browser?

    I tried adding the [audio] shortcodes inside the <audio> tags but that only produced two players.

  11. mbzo2006
    Posted 4 years ago #

    Nice one, Masswerk.
    Like Sdeep your mod saved me a bunch of time customizing another audio plugin.
    Curious to know if anyone has got Google Analytics to work with this plugin somehow.

  12. GR8FL
    Posted 4 years ago #

    I copied the suggested codes from both flotzam and masswerk in place of what was in the audioplayer.js (saving the original one under a different name). When I checked it out on my flash-enabled desktop, it works fine, but when I go to my iPad, I see "Cannot Play Audio File" where the player should be. What step did I miss? Would really appreciate the help.

  13. masswerk
    Posted 4 years ago #

    apparently you are using some modified version of the code, which has disabled the part responsible for decoding base64-encoded sound-urls.

    Please refer to the original version:

    (It would be nice, if modified versions would be annotated in the header of the script-file.)

  14. GR8FL
    Posted 4 years ago #

    Thanks for your response. I did switch back to the original version (used the minified version: audio-player-html5.js.).

    I think the problem is because of the way I am using Audio Player.

    Normally, the syntax to call it is: [audio:http://www.yourdomain.com/path/to/your_mp3_file.mp3]

    I have done the following which doesn't seem to be the case of the others (I peeked at the embedded JavaScript)

    1. set a default location for the audio files so don’t have to specify the full URL everytime. [audio:mp3_file.mp3] Doing this option only works fine also.

    The problem is when I try to load multiple tracks into the player:

    [audio:mp3_file_1.mp3,mp3_file_2.mp3] - it fails!

    It also fails if I have one mp3 file, but also add titles & artists:

    [audio:mp3_file_1.mp3,mp3_file_2.mp3|titles=The title 1,The title 2|artists=The artist 1,The artist 2]


  15. masswerk
    Posted 4 years ago #



    the hack only supports single-sound-urls, no playlist. Sorry
    (On the version-problem: Having had a look at your site I found that the urls where base64-encoded anyway.)

  16. GR8FL
    Posted 4 years ago #

    Guess my option then is to make one fat mp3 (if I am going to combine tracks) and not use titles or artists if I want to continue to use the audio player for both flash and html-5. Or investigate another player that supports both formats AND lets me have a playlist (see http://sjward.org/jplayer-for-wordpress as one example that I found).

  17. masswerk
    Posted 4 years ago #

    FYIO: Why not support playlists?

    At the time of writing this hack generic playlists (using source-elements nested inside the the audio tag) where supported only by a small subset of browsers. As the hack doesn't insert any extra widget controlled by JS, but relies totally on the generic implementation of the audio element, there wouldn't had been a safe way to implement playlists. Also playlists are not that common and were not an issue for the site the hack was developed for.

    Maybe there's anyone out there willing to further modify the script ...
    (This would require to inject multiple source-elements and setting the src-attribute of each of these elements rather than setting the src-attribute of the audio-element. But this would require prior testing for the browser's capabilities and a smart fallback – e.g.: multiple audio-elements in a list – for those browsers only supporting the simple form of the audio-tag.)

    Sample code:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    please note that this sample logic is not setting any other attributes, which should be preferably:
    controls preload="auto" autobuffer

  18. GR8FL
    Posted 4 years ago #

    It is not just multiple mp3s into a playlist, but also the artist & title that won't fallback.

    [audio:/halloweenz/HalloweenMadness2011_29Tracks.mp3|titles=Halloween Madness Mixtape 2011|artists=GR8FL,GR8FL] does not work

    [audio:/halloweenz/HalloweenMadness2011_29Tracks.mp3] does work

    But the player displays "Track #1" instead of the artist & title when viewing the flash version. :(

  19. GR8FL
    Posted 4 years ago #

    @masswerk - I have no idea where to insert your sample code for multiple tracks to render a playlist. I do appreciate everything you have provided so far. Thank you.

  20. masswerk
    Posted 4 years ago #

    @GR8FL - this is just a rough outline of the code needed. Anyone able and willing to implement this and the according checks and preprocessing required cleanly, will also know where to implement it ...

    At the time being the hack only supports a single sound-url with no further attributes, which also reflects the capabilites of a simple audio-tag. Any other attributes would either be supported only be a subset of the newest browsers or require a quite complex implementation using a custom widget. (Remember: This is only a quick hack to enable a fallback for mobile devices, not a full-fledged solution.)

  21. GR8FL
    Posted 4 years ago #

    thanks again @masswerk. I will not mind combining all MP3s into on fat one and generating a playlist text below. What I do mind is seeing "Track #1" in the flash display. But, now I have to work my real job that pays for all this hobbying around... so will have to look later.

  22. masswerk
    Posted 4 years ago #

    Sorry, if this hack doesn't meet all your requirements and needs. It was done for a site of one of my clients and reflects the requirements of a specific installation. Just made it public, since there wasn't any solution at this time and others were posting for a similar solution ...
    MIT license usually translates to "use it, change it, but no support" ;-)

  23. masswerk
    Posted 4 years ago #

    And now the code-outline (see above) is gone – no time to write that again, Sorry.
    Please re-invent the wheel again, if interested in it.

  24. GR8FL
    Posted 4 years ago #

    masswerk thank you for everything you have posted. I am not asking for you to do anymore work and I understand you simply wanted to share what you did.

  25. mbzo2006
    Posted 4 years ago #

    Hi, can someone help me understand how to "glue" this piece of code (audio player with track analytics) together with masswerk´s minified version of audioplayer script.

    _gaq.push(['_trackPageview', '/audioplayer/'+ J['trackInfo']['artist'].replace(/\s/g,'_') +'/'+ J['trackInfo']['title'].replace(/\s/g,'_') ]);

    Masswerk´s minified version reads a bit different (line 137) :
    ... ,activate:function(playerID,info){if(activePlayerID&&activePlayerID!=playerID){getPlayer(activePlayerID).close();}

  26. andycheeseman
    Posted 4 years ago #

    The minified version worked a treat for me. Simply replaced audio-player.js and it worked. The long version didn't work, nor did the Flotzam version. For me at least.


Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic