我想要的是一个基本的播放按钮,它可以onclick播放音频文件,并将其外观从glyphicon-play更改为glyphicon-pause。进一步单击将暂停音频并返回到play-glyphicon。
我所拥有的是一个脚本,该脚本可让我播放和暂停音频文件,这些音频文件是通过按钮触发的。
缺少的是我的按钮中的切换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个音频文件,并且这些解决方案似乎只能在第一个按钮上或在所有按钮上使用同时。处理此问题的最佳方法是什么?太感谢了!
改变你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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句