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: http://ace-beatz.com/mp3player/acebeatzplayer.html 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. =========
Uhm... I dunno how you run the sounds, but HTML 5 won't work with older browsers anyway, so why you need to cater for those, I'm a bit unsure of. Second - this seems like a horrible way to code the UI for this. Why don't you just have a grid layout filling most (if not all) of the screen, with all of the different songs, and then one player / button-set at the bottom, which will play any selected song? Easily extendable, easy to fix for big or small screens, etc.
First, I plan on doing a Flash Fallback with the HTML5 audio tags & the JavaScript is how I'm controlling the play/pause buttons. I am using HTML5 because it's the latest technologies & every major updated version of most browsers are now supporting it. Also HTML5 is for the purpose of catering to Mobile devices (iPads, Tablets, iPhone, Android, etc.,etc..). Second, why do you believe that "this seems like a horrible way to code the UI for this"? Can you give me a good reason why? Third, I don't want the whole page to be taken up with a "grid layout" because I have a certain CSS layout that I've already created and don't have enough space for what you are suggesting.
Okay - so this is just gonna be in a sidebar, or something similar? If so, I can see that this approach might be the one to choose. However, you were not showing that, only a small scrollable container (extra scrollbars are considered to be bad design, btw), hence my suggestion. That being said: Unless I'm on your page to specifically hear those tracks, I'm not gonna bother with a small container, with no information, just a track and a play-button. Neither am I gonna be very happy with a scrollbar I have to use to get to the other songs. Basically, secondary scrollbars on a page is a PITA, and should be avoided if possible - this seems like a bad choice to me. Also, repeating the code for each track, adding its own buttons and such, seems like overkill, and might perhaps bog down the site. Normally, a separate player entity, and a select function to chose song would be preferable. Like it is now, you could just as well have a dropdown with the tracks in it, and a player underneath.