#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    2
    Rep Power
    0

    Question JavaScript & HTML5 Audio Buttons Loading & Playing...


    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:

    https://imagizer.imageshack.us/v2/978x984q90/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.

    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!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    26
    Rep Power
    0
    something like this
    I would guess ...

    Code:
     <!doctype html>
    <html>
    <audio id="MyAudio1">
            <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
         </audio>
    <button onclick="PlayBeat(this,'MyAudio1')">click</button>
    <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>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo