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:
I need to make my mp3 play buttons cross-browser compatible (including mobile devices & older browsers).
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:
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!
It isn’t the audio buttons causing the slow loading, it’s the “BIG list”.
Is there no way you can break things up into categories, eg. genre, artist, alphabetacally, etc. so as to get smaller lists?
Or perhaps a way to “paginate” it?
Hi Mittineague and thank you for your quick reply!
So I really would like to keep everything contained within this table. I’ve seen previous HTML5 Audio Players that had everything within “1 BIG LIST”, but they seemed like their players loaded quickly & were cross browser compatible. Also I noticed that these programmers implemented XML to pull the songs & descriptions into the tables. I don’t know if it’s really all that necessary to do XML & if it is, then this means that it will only take that much more time to learn another language & getting this project completed. Something tells me that it can be done with a little HTML5, JavaScript & maybe a little bit of Flash Fallback. What do you think?
I’m guessing the others you’ve seen initially only load a portion of the list and then progressively load more, most likely using AJAX (think Facebook and Twitter). That is, by the time you read what was first loaded, more has come in, so it looks like it all loaded at once but it really didn’t. i.e. if you scrolled fast enough to the bottom, or if you broke your connection, you would see that the entire list had not been loaded before the page rendered.
As for learning XML, if you are already familliar with (X)HTML you shouldn’t have any problem picking it up quickly. The format is likely to be similar to a Comma Separated Variables (CSV) list inside the appropriate tags, perhaps with some as attribute values
Thanks again. So I looked into what you’re saying and you are absolutely right. It’s best when using large list of songs to play that I implement AJAX & XHTML to prevent the bogging in loading time. So I am a complete beginner at all web development languages & programming in general. What do you think is the best learning resources for both AJAX & XHTML for beginners? I see that you have experience & would like for your advice? Thanks again Mittineague for your support.
It’s been a while since I was just starting, so I may be missing things I now take for granted, but I’ll try.
The good news is you don’t need to be an expert in everything. The way things change so fast it’s impossible to keep up anyway, but of course the more you know the better.
I think the best place to start is to get familiar with HTML. You could start by looking at http://reference.sitepoint.com/html and other sites. And there’s always right-click viewsource to see how pages have been written. The mark-up you’ll find is often not best practice but it can help a lot. You don’t need more than getting familiar with how it looks to start. Even this might be enough to let you start getting your hands dirty right away.
<html>
<head>
<script type="text/javascript">
// put your javascript function here eg.
function do_something(){
// .......
}
</script>
</head>
<body>
<div>
<script type="text/javascript">
// call your function here
do_something();
</script>
</div>
</body>
</html>
Then you could look around http://reference.sitepoint.com/javascript and other sites to learn the basics, eg. data types, syntax, etc, and get a feel for how it works.
Last I knew w3schools.com’s javascript tutorial section let you play with code in one panel and see the effect in another. The site is now horribly out-of-date, so you risk having to unlearn some things later, but as long as you keep in mind that much is out-of-date it could help.
You don’t need to upload files to your site or have a localhost server to test HTML pages, you can save a text file with the “.html” extension and it should open in your default browser.
Once you feel comfortable with mark-up and simple javascript, you could go on to learning AJAX. Some libraries like jquery do AJAX but they’re best for people already well versed in javascript.
There’s a lot to web development, but having a “project” goal is a good way to learn, it helps keep focus on what you need to learn to get there.
