JSFiddle - React, Tailwind, and code Playground

by dj_floyd

HTML

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button">&nbsp;</a>
<div class="pic">
pic
</div>

CSS

.soundIcnPlay {
    background: none repeat scroll 0 0 red;
    cursor: pointer;
    display: inline-block;
    height: 100px;
    width: 100px;
}

.soundIcnPlay.down {
    background: none repeat scroll 0 0 blue;
}
.pic {
  display: inline-block;
    height: 100px;
    width: 300px;
    border: 1px solid #222;
  
}
.soundIcnPlay.down + .pic {
  background: none repeat scroll 0 0 yellow;
}

JavaScript

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;

        } else {
            document.getElementById('player').pause();
            playing = false;
        }


    });
});