Изменить glyphicon в кнопке onclick

Question

Что я хочу - это основная кнопка воспроизведения, в которой onclick воспроизводит аудиофайл и изменяет его внешний вид с глификон-игры на глификон-паузу. Дальнейшее нажатие будет приостанавливать звук и возвращаться к play-glyphicon.

У меня есть сценарий, который позволяет мне воспроизводить и приостанавливать звуковые файлы, которые Я запускаю с помощью кнопки.
Отсутствует переключатель глификон в моей кнопке.

function EvalSound(soundobj) { 
 
    var thissound = document.getElementById(soundobj); 
 
    if (thissound.paused) { 
 
     thissound.play(); 
 
    } else { 
 
     thissound.pause(); 
 
    } 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<audio id="SDJTrack1" preload="none" source src='http://www.salon-du-jazz.de/mp3/La_Version_del_Trabajo_Hoerprobe.mp3' type='audio/mpeg'> 
 
</audio> 
 

 
<audio id="SDJTrack2" preload="none" source src='http://www.salon-du-jazz.de/mp3/No_Matter_Hoerprobe.mp3' type='audio/mpeg'> 
 
</audio> 
 

 
<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack1')"><span class="glyphicon glyphicon-play"></span> 
 
</button>1. Song 
 

 
<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack2')"><span class="glyphicon glyphicon-play"></span> 
 
</button>2. Song

Я нашел несколько решений для этого, например: https://stackoverflow.com/a/24901840/5325923 Но я хочу, чтобы добавить около 20 аудио-файлов на моем сайте, и эти решения только кажется, работать на первой кнопке ИЛИ на всех кнопках одновременно. Каков наилучший способ справиться с этим? Большое вам спасибо!

Answer 1

Изменение html и js как следующий

function EvalSound(soundobj, button) { 
 
    var thissound = document.getElementById(soundobj); 
 
    if (thissound.paused) { 
 
     thissound.play(); 
 
     $(button).find(".glyphicon").removeClass("glyphicon-pause").addClass("glyphicon-play"); 
 
    } else { 
 
     thissound.pause(); 
 
     $(button).find(".glyphicon").removeClass("glyphicon-play").addClass("glyphicon-pause"); 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<audio id="SDJTrack1" preload="none" source src='http://www.salon-du-jazz.de/mp3/La_Version_del_Trabajo_Hoerprobe.mp3' type='audio/mpeg'> 
 
</audio> 
 

 
<audio id="SDJTrack2" preload="none" source src='http://www.salon-du-jazz.de/mp3/No_Matter_Hoerprobe.mp3' type='audio/mpeg'> 
 
</audio> 
 

 
<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack1', this)"><span class="glyphicon glyphicon-play"></span> 
 
</button>1. Song 
 

 
<button type="button" class="btn btn-default btn-lg" onClick="EvalSound('SDJTrack2', this)"><span class="glyphicon glyphicon-play"></span> 
 
</button>2. Song