I’m new to using JavaScript & trying to implement a MP3 Player into my site using a HTML Table with multiple Play Buttons that are being controlled with both JavaScript & the HTML5 audio element. The buttons that are on the site were created in Photoshop & are my own custom buttons. Here is what the HTML5 Audio Play buttons look like along with the HTML Table:
[URL]http://imagizer.imageshack.us/v2/150x100q90/c/843/aiw1.png
So I was wondering if someone could help me with the following:
1.
What I’m trying to do is make it so that the MP3 Play buttons will be compatible with all (most if possible) major web browsers including mobile devices. What method would be the best in both HTML5 & JavaScript since this is already what I’ve started with? Maybe someone could suggest a better method? I’m open to trying anything that works.
I also noticed that the loading time is taking way too long in Mozilla Firefox as well. What would be the best method for loading a HUGE list of HTML5/JavaScript buttons into an .HTML Document? Should I implement XML with this or what would be best if I have a big list of songs to play on a page?
Here is the current code that I’m working with for the JavaScript:
[CODE]<script type=”text/javascript”>
function PlayBeat(btn,audio){
var audio = document.getElementById(audio);
if(audio.paused){
audio.play();
btn.style.background = “url(Pausebtn.png)”;
} else {
audio.pause();
btn.style.background = “url(Playbtn.png)”;}
}
</script>
AND HERE IS THE HTML5 AUDIO ELEMENT THAT I’M USING TO PLAY THE SONGS AS WELL:
[CODE]<audio id=”MyAudio1″>
<source src=”Music/You Live You Learn.mp3″ />
</audio>
I’d appreciate it someone could help me out with resolving these 2 issues that I’m having. Any help is greatly appreciated. Thanks!
javascript play audio, html5 play audio, xml parse