更改按钮 onclick 中的字形图标

Question

我想要的是一个基本的播放按钮，点击它可以播放音频文件并将其外观从字形播放更改为字形暂停。进一步点击将暂停音频和 return 到播放符号。

我有一个脚本可以让我播放和暂停音频文件，它我用一个按钮触发。
缺少的是我按钮中的切换字形。

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

我已经找到了几个解决方案，例如：然而我想在我的网站上添加大约 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

更改按钮 onclick 中的字形图标

Change glyphicon in button onclick

html

javascript

jquery

onclick

twitter-bootstrap