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>
<div class="container">
    <div id="bgm">BGM OFF</div>
    <div class="track-name">Pops up the mind wings</div>
</div>

.container{
    border:solid 5px #ccc;
    width:300px;
    margin:15px 0;
    position:relative;
    background:#000;
}
.track-name{
    margin:10px;
    color:#fff;
    font-size: 15px;
    padding:5px 0;
    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;
}
#bgm{
    margin:10px;
    font-size:14px;
    display:inline-block;
    border-radius:20px;
    background:#f7f7f7;
    padding:10px;
    cursor: pointer;
}

jQuery(function($){
    $("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				mp3: "http://webism.jp/media/jplayer/tw034.mp3"
			});
		},
		loop: true, // ループ再生　
		volume: 0.2, // ボリューム 0~1で指定
		swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer",
		ssupplied: 'mp3',
		play: function(){
            // 再生時の処理
            $('.track-name').addClass('active');
		},
		pause: function(){
			// ポーズ時の処理
            $('.track-name').removeClass('active');
		},
		ended: function(){
			// 最後まで流れた時の処理
            $('.track-name').removeClass('active');
		}
    });
    
    // $('#bgm')をクリックした時の処理
    $('#bgm').on('click',function(){
        // $('.track-name')がアクティブ(BGM ON)かどうか
        if($('.track-name').hasClass('active')){
            //BGM ONの場合
            $('#bgm').text('BGM OFF');
            $("#jquery_jplayer_1").jPlayer('pause');
        } else {
            //BGM OFFの場合
            $('#bgm').text('BGM ON');
            $("#jquery_jplayer_1").jPlayer('play');
        }
    });
});