Edit in JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>

<div id="jquery_jplayer_1"></div><!-- ここにaudioタグが入ります -->
<div id="jp_container_1"><!-- インターフェース部分 -->
    <div class="track-name">Pops up the mind wings</div>
    <div class="jp-play"></div><!-- 再生 -->
    <div class="jp-pause"></div><!-- 一時停止 -->
</div>

#jp_container_1{
    border:solid 5px #ccc;
    width:300px;
    margin:5px;
    position:relative;
    background:#000;
}
.track-name{
    color:#fff;
    font-size: 15px;
    padding:15px 42px;
    font-weight: bold;
    line-height: 30px;
    -webkit-transition: all 0.3s ease;
    -webkit-transition-delay: 0s;
    transition: all 0.3s ease 0s;
}
.track-name.active{
    color:#59e2fb;
}
.jp-play{
    position: absolute;
    left: 5px;
    top: 18px;
    width: 33px;
    height: 30px;
    background: url(http://webism.jp/image/jplayer/play.png) center top no-repeat;
    cursor: pointer;
}
.jp-pause{
    position: absolute;
    left: 5px;
    top: 18px;
    width: 33px;
    height: 30px;
    background: url(http://webism.jp/image/jplayer/play.png) center bottom no-repeat;
    cursor: pointer;
    display: none;
}

jQuery(function($){
    $("#jquery_jplayer_1").jPlayer({
		ready: function () {// jPlayer の準備ができたら実行される処理を記述
			$(this).jPlayer("setMedia", {
				mp3: "http://webism.jp/media/jplayer/tw034.mp3" //再生するメディアを指定 カンマ区切りで複数指定できる。
			});
		},
		cssSelectorAncestor: '#jp_container_1', // コントロール部分をラップしているコンテナ
		cssSelector: {play: '.jp-play',pause: '.jp-pause'}, // cssセレクタを指定、それぞれメソッドに対応
		loop: false, // ループ再生　
		volume: 0.2, // ボリューム 0~1で指定
		swfPath: "/jplayer", // Jplayer.swfのパス html5で再生されなかった場合、フラッシュで再生される
		ssupplied: 'mp3', // フォーマット（カンマ区切りで複数指定できる、優先度は左が高い）
		play: function(){
            // 再生時の処理
            $('.track-name').addClass('active');
		},
		pause: function(){
			// ポーズ時の処理
            $('.track-name').removeClass('active');
		},
		ended: function(){
			// 最後まで流れた時の処理
            $('.track-name').removeClass('active');
		}
    });
});