Hello and welcome to our community! Is this your first visit?
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
    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 :

    <title>audio player</title>



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

    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';

    // Prevent Default Action
    return false;


    please help ! thanks

  2. #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 619 Times in 599 Posts
    looks like you can just put an IMG tag inside the A tag.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com


Posting Permissions

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