播放/暂停按钮HTML5音频 [英] Play/Pause Button HTML5 Audio

问题描述

我试图让HTML5音频在一个按钮中播放/暂停。我怎么可能会这样做呢？因此，播放按钮切换到暂停图标，这是字体真棒'fa fa-pause'代码在这里：

 < audio id =myTune> 
< source src =http://96.47.236.72:8364/;> 
< / audio> 
< div class =btn-group btn-group-xs> 
   

谢谢！

解决方案

您可以在< i> 标记中添加一个id，并将 fa fa-pause class change when state：

 < a href =javascript：void（0）class =btn btn默认数据切换=tooltiptitle =预览onclick =aud_play_pause（）>< i id =stateiconclass =fa fa-play>< / i><一个> 
 
< script> 
函数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（）; 
} 
} 
  

希望这有助于

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:

<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!

解决方案

You can put an id to the <i> tag and assign the fa fa-pause class when change of state:

<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

这篇关于播放/暂停按钮HTML5音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！