Html5音频播放列表无法正常工作

Question

我有一个音频HTML5播放器，因为它在单个音频上工作正常，但是当我添加更多音频时，有些像：

1. 斗犬
2. 夏奇拉
3. Bilal Saeed

现在，我点击PITBULL（好吧工作正常）但是当我点击（Bilal Saeed或Shakira）另一首歌时，所有歌曲都将播放而不是，暂停PITBULL并启动SHAKIRA或Bilal Saeed。 在JSFIDDLE

上查看

HTML

<div id="playList">
    <a href="#">
        <span class="glyphicon glyphicon-play-circle">
            <audio preload='none'>
                <source src='http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3' type='audio/mpeg' />
            </audio>
        </span>
    </a>
    <a href="#">
        <span class="glyphicon glyphicon-play-circle">
            <audio preload='none'>
                <source src='http://audio.khanqah.org/AK20021104%20Rozay%20or%20taqwa%20may%20rabt.mp3' type='audio/mpeg' />
            </audio>
        </span>
    </a>
    <a href="#">
        <span class="glyphicon glyphicon-play-circle">
            <audio preload='none'>
                <source src='http://audio.khanqah.org/AK19991224%20Tark%20e%20masiat%20may%20takheer%20na%20kijiay.mp3' type='audio/mpeg' />
            </audio>
        </span>
    </a>
</div>

JS

document.getElementById('playList').addEventListener('click', function(e){
    var target = e.target;
    if(target && target.nodeName === 'SPAN'){
        if(target.className == "glyphicon glyphicon-play-circle"){
            target.childNodes[1]['play']();
            target.className = "glyphicon glyphicon-pause"
        }else{
            target.childNodes[1]['pause']();
            target.className = "glyphicon glyphicon-play-circle"
        }
    }
});