Question

I am trying to make an audio player using jquery and seem to have some problem doing so. I can stop the music but i can’t seem to play it back again.

HTML:

 <footer>
        <nav>
            <div id="buttons">
                <buttons type="button" id="playbutton">Stop Music</button>
            </div>
        </nav>
  </footer>
  <audio id="Theme" autoplay>
      <source src="BillaTheme.mp3"/>
  </audio>

Jquery:

$("document").ready(function(){                    
        $("#playbutton").click(function() {
                    if (!$("#Theme").paused)
                    {
                        $("#Theme")[0].pause();           
                        $("#playbutton").text("Play Music");
                    }
                    else
                        {
                            $("#Theme")[0].play();           
                            $("#playbutton").text("Stop Music");
                        }
                });
});

Not sure where the error is.. Need some guidance…

Answer 1

$("#Theme").paused needs to be $("#Theme")[0].paused – otherwise you access a property of the jQuery object which won’t work.

To improve readability add var player = $("#Theme")[0]; and then use player.paused, player.play() etc.