javascript 播放/暂停按钮 HTML5 音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24498603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play/Pause Button HTML5 Audio
提问by user3067306
I'm trying to get HTML5 Audio to play/pause in one button. How would I possibly go around doing this? So the play button switches to the pause icon which is font awesome 'fa fa-pause' The code is here:
我正在尝试让 HTML5 音频一键播放/暂停。我怎么可能去做这件事？所以播放按钮切换到暂停图标，这是字体真棒 'fa fa-pause' 代码在这里：
<audio id="myTune">
<source src="http://96.47.236.72:8364/;">
</audio>
<div class="btn-group btn-group-xs">
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="document.getElementById('myTune').play()"><i class="fa fa-play"></i></a>
Thank you!
谢谢！
采纳答案by martinezjc
You can put an id to the <i>tag and assign the fa fa-pauseclass when change of state:
您可以在<i>标签上放置一个 id并在fa fa-pause状态更改时分配类：
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a>
<script>
function aud_play_pause() {
var myAudio = document.getElementById("myTune");
if (myAudio.paused) {
$('#stateicon').removeClass('fa fa-play');
$('#stateicon').addClass('fa fa-pause');
myAudio.play();
} else {
$('#stateicon').removeClass('fa fa-pause');
$('#stateicon').addClass('fa fa-play');
myAudio.pause();
}
}
Hope this helps
希望这可以帮助
回答by Rachel Gallen
Give this a whirl:
试一试：
function aud_play_pause() {
var myAudio = document.getElementById("myTune");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}<audio id="myTune" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio>
<button type="button" onclick="aud_play_pause()">Play/Pause</button>回答by X9DESIGN
Here You have version for multiple instances of player
这里你有多个播放器实例的版本
HTML
HTML
<a href="javascript:void(0)" onclick="aud_play_pause(this)">
<i class="control icon-play"></i>
<audio class="xnine-player" src="/path/to/file#1.mp3" preload="auto"></audio>
</a>
<a href="javascript:void(0)" onclick="aud_play_pause(this)">
<i class="control icon-play"></i>
<audio class="xnine-player" src="/path/to/file#2.mp3" preload="auto"></audio>
</a>
JAVASCRIPT
爪哇脚本
<script>
function aud_play_pause(object) {
var myAudio = object.querySelector(".xnine-player");
var myIcon = object.querySelector(".control");
if (myAudio.paused) {
myIcon.className = "control icon-pause";
myAudio.play();
} else {
myIcon.className = "control icon-play";
myAudio.pause();
}
}
</script>
...
...
