Audio Player 2.0.4.1 with HTML5 Fallback

  • Hi everyone,

    I modified Audio Player 2.0.4.1 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=2.0.4.1">

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

    Norbert

Viewing 15 replies - 1 through 15 (of 25 total)

  • 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!

    Thread Starter masswerk

    (@masswerk)

    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.

    eg.:
    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.

    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.

    Thanks.

    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.

    https://www.vibeaddict.com

    Hey, thanks a lot for this!

    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: https://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: https://flotzam.com

    Thread Starter masswerk

    (@masswerk)

    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.

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

    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.

    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.

    TheViv

    (@octotoot)

    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.

    Thread Starter masswerk

    (@masswerk)

    @gr8fl
    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:
    https://www.masswerk.at/audioplayer/

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

    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:https://www.yourdomain.com/path/to/your_mp3_file.mp3%5D

    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]

    ??

    Thread Starter masswerk

    (@masswerk)

    @GR8LF

    Hi,

    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.)

    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 https://sjward.org/jplayer-for-wordpress as one example that I found).

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Audio Player 2.0.4.1 with HTML5 Fallback’ is closed to new replies.