www.webdeveloper.com
Results 1 to 2 of 2

Thread: Playing Audio With HTML5 Audio Element & Multiple Buttons

  1. #1
    Join Date
    Nov 2013
    Posts
    4

    Question Playing Audio With HTML5 Audio Element & Multiple Buttons

    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:


    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.

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

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    possibly add preload to your audio tag.
    HTML5 sudio has a ready built console. have you thought about using that and having a single player that has the audio source set for a sound may be better and also... point of courtesy, never autoplay or start an audio track playing as you have no idea what is currently happening, the visitor may already be playing audio and just having a look at your site.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles