#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    6
    Rep Power
    0

    Question HTML5 / JavaScript Audio Buttons - Cross-Browser Compatibility...


    I have a HTML Table with a vertical scrollbar that displays audio play & pause buttons. The table will consist of many songs to play. I have the play buttons made with both JavaScript & the HTML5 <audio> tag.

    What I need is 2 simple things to be done:

    1. I need to make my mp3 play buttons cross-browser compatible (including mobile devices & older browsers).

    2. Improve loading time of the audio buttons for all browsers.

    Here is the link to my table that contains the audio buttons. Please check it:

    bit.ly/191B5xS

    What do you recommend is the best method for playing a BIG list of audio play buttons & ensuring both fast loading time & cross-browser compatibility? Is JavaScript & HTML5 the best for this type of player for accomplishing this? I'd appreciate any support... Thanks!

    - Aaron C.
    =========
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    The audio tag was introduced was introduced in HTML5; which means, in most modern browsers (including many smart phone / tablet devices)..., it will work as expected; but it will not be supported with older / out-of-date browsers. So, one option would be to use Flash (using the object/embed tag) and use FS-Commands and/or JavaScript to add events to your buttons; that will allow them to control your flash video. Another, more out-dated method..., would be to embed browser based supported video players / plug-in (such as Media Player, Quick Time, Real Player, and etc.; also a more modern plug-in by Microsoft is Silverlight); but this method relies on the browser / end user to have previously added this plug-in to there operating system. Another suggestion, that I would have for you; would be for you to do an online search for "html5 video alternatives" and "html5 video detection". This may be helpful to you; so that you may see what options are available for you to apply to your question.
    Last edited by web_loone08; November 25th, 2013 at 09:26 PM. Reason: Corrected Typo

IMN logo majestic logo threadwatch logo seochat tools logo