/    Sign up×
Community /Pin to ProfileBookmark

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:

[CENTER]

[URL]http://imagizer.imageshack.us/v2/150x100q90/c/843/aiw1.png[/URL]

[/CENTER]

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>[/CODE]

    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> [/CODE]

    I’d appreciate it someone could help me out with resolving these 2 issues that I’m having. Any help is greatly appreciated. Thanks!

    [CENTER]

    javascript play audio, html5 play audio, xml parse

    [/CENTER]

    to post a comment
    JavaScript

    1 Comments(s)

    Copy linkTweet thisAlerts:
    @rootNov 23.2013 — 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.
    ×

    Success!

    Help @AceDeveloper spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...