Чтобы кнопка работала как Play / Pause, надо отслеживать текущее состояние плеера. Оно может быть:
- не начинал играть
- играет
- поставили на паузу
- трек доиграл до конца
Ниже топорный пример, где меняется надпись на кнопке, в зависимости от состояния: Play, Playing, Paused, Done:
var el = document.getElementById('btn-play');
var playing = false; // текущее состояние плеера
var player = new Audio('http://www.html5tutorial.info/media/vincent.mp3');
player.preload = "auto";
player.addEventListener('ended', function(){ // слушаем окончание трека
el.innerText = "Done";
playing = false;
});
el.addEventListener('click', playPause); // слушаем нажатие на кнопку
function playPause() {
if( playing) {
player.pause();
el.innerText = "Paused";
} else {
player.play();
el.innerText = "Playing..";
}
playing = !playing;
}
<link href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="btn-play" class="btn btn-success">Play</button>