JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>

JavaScript

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"
        }
    }
});