Как остановить плеер, когда играет другой
 

Здравствуйте. Очень надеюсь на вашу помощь, сама уже несколько дней мучаюсь.
На странице есть несколько плееров с плейлистами. Нужно сделать так, что бы при нажатии на play играл только текущий, а остальные ставились на паузу. Сейчас если у каждого нажать play, то они хором поют :( Пример на jsfiddle https://jsfiddle.net/xt2ubjjv/

html код

<!--первый плеер  -->
<div class="audio-item">
    <div class="player">
        <div class="pl"></div>
        <div class="meta-block">
            <div class="artist">О любви</div>
            <div class="desc">Романтика, инструментальная</div>
            <div class="title"></div>
        </div>
        <div class="cover"></div>
        <div class="controls">
            <div class="play"></div>
            <div class="pause"></div>
            <div class="rew"></div>
            <div class="fwd"></div>
        </div>
        <div class="volume"></div>
        <div class="tracker"></div>
    </div>
    <ul class="playlist">
        <li audiourl="img/mp3/01.mp3" cover="img/mp3/cover1.jpg">
            <span class="name-track">Песня 1</span>
            <span class="time-track">3:08</span>
        </li>
        <li audiourl="img/mp3/02.mp3" cover="img/mp3/cover2.jpg">
            <span class="name-track">Песня 2</span>
            <span class="time-track">3:08</span>
        </li>
        <li audiourl="img/mp3/03.mp3" cover="img/mp3/cover3.jpg">
            <span class="name-track">Песня 3</span>
            <span class="time-track">3:08</span>
        </li>
    </ul>
</div>
 
<!--второй плеер  -->
<div class="audio-item">
    <div class="player">
        <div class="pl"></div>
        <div class="meta-block">
            <div class="artist">О любви</div>
            <div class="desc">Романтика, инструментальная</div>
            <div class="title"></div>
        </div>
        <div class="cover"></div>
        <div class="controls">
            <div class="play"></div>
            <div class="pause"></div>
            <div class="rew"></div>
            <div class="fwd"></div>
        </div>
        <div class="volume"></div>
        <div class="tracker"></div>
    </div>
    <ul class="playlist">
        <li audiourl="img/mp3/01.mp3" cover="img/mp3/cover1.jpg">
            <span class="name-track">Песня 1</span>
            <span class="time-track">3:08</span>
        </li>
        <li audiourl="img/mp3/02.mp3" cover="img/mp3/cover2.jpg">
            <span class="name-track">Песня 2</span>
            <span class="time-track">3:08</span>
        </li>
        <li audiourl="img/mp3/03.mp3" cover="img/mp3/cover3.jpg">
            <span class="name-track">Песня 3</span>
            <span class="time-track">3:08</span>
        </li>
    </ul>
</div>

скрипт плеера

$('.audio-item').each(function() {
 
    var $container=$(this);
 
    // inner variables
    var song;
    var tracker = $container.find('.tracker');
    var volume = $container.find('.volume');
    var dVol = 0.8;
 
    function initAudio(elem) {
        var url = elem.attr('audiourl');
        var title = elem.find('.name-track').text();
        var cover = elem.attr('cover');
        var artist = elem.attr('artist');
 
        $container.find('.player .title').text(title);
        $container.find('.player .artist').text(artist);
        $container.find('.player .cover').css('background-image','url('+cover+')');
 
        song = new Audio(url);
 
        song.volume = dVol;
 
        // timeupdate event listener
        song.addEventListener('timeupdate',function (){
            var curtime = parseInt(song.currentTime, 10);
            tracker.slider('value', curtime);
        });
 
        $container.find('.playlist li').removeClass('active');
        elem.addClass('active');
    }
    function playAudio() {
        song.play();
 
        //tracker.slider("option", "max", song.duration);
 
        $container.find('.play').addClass('hidden');
        $container.find('.pause').addClass('visible');
 
        // автопроигрывание следующего трека
        song.addEventListener('ended', function(){
          stopAudio();
 
          var next = $container.find('.playlist li.active').next();
          if (next.length == 0) {
            next = $container.find('.playlist li:first-child');
          }
          initAudio(next);
 
          playAudio();
 
          song.addEventListener('loadedmetadata', function() {
            tracker.slider('option', 'max', song.duration);
          });
        });
    }
    function stopAudio() {
        song.pause();
 
        $container.find('.play').removeClass('hidden');
        $container.find('.pause').removeClass('visible');
    }
 
    // play click
    $container.find('.play').click(function (e) {
        e.preventDefault();
 
        playAudio();
        tracker.slider("option", "max", song.duration);
    });
 
    // pause click
    $container.find('.pause').click(function (e) {
        e.preventDefault();
 
        stopAudio();
    });
 
    // forward click
    $container.find('.fwd').click(function (e) {
        e.preventDefault();
 
        stopAudio();
 
        var next = $container.find('.playlist li.active').next();
        if (next.length == 0) {
            next = $container.find('.playlist li:first-child');
        }
        initAudio(next);
        playAudio(next);
 
    });
 
    // rewind click
    $container.find('.rew').click(function (e) {
        e.preventDefault();
 
        stopAudio();
 
        var prev = $container.find('.playlist li.active').prev();
        if (prev.length == 0) {
            prev = $container.find('.playlist li:last-child');
        }
        initAudio(prev);
        playAudio(prev);
 
    });
 
    // show playlist
    $container.find('.pl').click(function (e) {
        e.preventDefault();
 
        //$container.find('.playlist').fadeIn(300);
        $container.find('.playlist').toggleClass('playlist-close');
    });
 
    // playlist elements - click
    $container.find('.playlist li').click(function () {
        stopAudio();
        initAudio($(this));
        playAudio($(this));
    });
 
    // initialization - first element in playlist
    initAudio($container.find('.playlist li:first-child'));
 
    // set volume
    song.volume = 0.8;
 
    // initialize the volume slider
    volume.slider({
        range: 'min',
        min: 1,
        max: 100,
        value: 80,
        start: function(event,ui) {},
        slide: function(event, ui) {
            song.volume = ui.value / 100;
            dVol = ui.value / 100;
        },
        stop: function(event,ui) {},
    });
 
    // empty tracker slider
    tracker.slider({
        range: 'min',
        min: 0, max: 10,
        start: function(event,ui) {},
        slide: function(event, ui) {
            song.currentTime = ui.value;
        },
        stop: function(event,ui) {}
    });
});