Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    modifing a music player controls

    Hello everybody,
    i'm having a problem with finishing my music player, i need just a play button and pause button,
    when we click on play, the song start and pause button show up instead of play button, And vice versa..

    i already have it but instead of the play.png and pause.png buttons, i have "play!" and "pause!"
    how can i insert img instead of text in javascript
    here is the code :

    [<head>
    <title>audio player</title>

    </head>

    <body>

    <div class="trackrow ">
    <audio id="yourAudio" preload='none'>
    <source src="Kylie.ogg" type="audio/ogg" />
    <source src="Kylie.mp3" type="audio/mpeg" />
    </audio>
    <a href="#" id="audioControl">play!</a>
    </div>

    <script>
    var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

    ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
    };
    </script>

    </body>
    </html>]


    please help ! thanks

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    looks like you can just put an IMG tag inside the A tag.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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