Question

I am trying to control HTNL5 audio from a graphic. The first click will start the song but then the link stops responding to clicks so the song keeps playing and can’t be stopped. Does e.preventDefault() remove a link’s clickability?

The HTML is

<div>
    <audio id="plyr">
        <!-- <audio controls="controls"> -->
        <source src="<?php echo get_bloginfo('wpurl') . '/assets/media/' . $faSong; ?>.ogg" type="audio/ogg">
        <source src="<?php echo get_bloginfo('wpurl') . '/assets/media/' . $faSong; ?>.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div> <!-- END plyr DIV -->
<div id="featured-song">
    <a class="playback" href="#">
        <img class="btnPlay" src="/assets/images/play_button.png" />
    </a>
</div> <!-- END featured-song DIV -->

AND the jQuery is:

jQuery(function($) {
    var song = $("#plyr").get(0);

    $(".playback").click(function(e){
        e.preventDefault();
        if( song.paused ){
            song.play();
        } else {
            song.pause;
        } // end if
});

Answer 1

change song.pause to song.pause()