jQuery按钮:播放/暂停音频和切换图像

Question

我试图做一个按钮，切换播放和暂停的音频标签。当它播放时，图像应该显示一个活动的扬声器，当它暂停时，扬声器应该用X显示。

隔音 有声

下面的代码可以在图像之间切换，但是当图像发生变化时，如何添加播放和暂停选项？

谢谢你的回答！

​

<!-- Audio --> >
<img src="/media/sound_off.png" alt="Play Music" id="playbutton" onclick="change();">
<audio id="background-music" src="/media/sjorisar-intro.mp3"></audio>


<!-- Scripts -->
<script type="text/javascript">
  var image_tracker = 'off';

  function change() {
    var image = document.getElementById('playbutton');
    if (image_tracker == 'off') {
      image.src = '/media/sound_on.png';
      image_tracker = 'on';
    } else {
      image.src = '/media/sound_off.png';
      image_tracker = 'off';
    }
  }
</script>

​

Answer 1

尝尝这个!

​

var mPlayer = document.getElementById("background_music"); 
var mPlayAction = document.getElementById("playbutton"); 

var isPlaying = false;

function playAudio() { 
    mPlayer.play(); 
    isPlaying = true;
    mPlayAction.src = "https://findicons.com/files/icons/1676/primo/128/button_blue_pause.png";
} 

function pauseAudio() { 
    mPlayer.pause();
    isPlaying = false;
    mPlayAction.src = "https://findicons.com/files/icons/1676/primo/128/button_blue_play.png";
} 
function HandleAudio(){
  if(isPlaying == true){
    //Playing already Pause it
    pauseAudio();
  }else{
    //Play the music
    playAudio();
  }
}

<img src="https://findicons.com/files/icons/1676/primo/128/button_blue_play.png" alt="Play Music" id="playbutton" onclick="HandleAudio()">

<audio id="background_music">
  <source src="https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
</audio>

​

Answer 2

您可以使用.toggle()函数。

​

$("#p1").toggle(function() {
    //$(this).html('<img src="play.png" width="60px" height="60px"/>');
    $(this).html('Test 2');
}, function() {
$(this).html('Test 3');
    //$(this).html('<img src="pause.png" width="60px" height="60px"/>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="p1">Test 1</div>

$(this).html('test2');


<!--<img src="/media/sound_off.png" alt="Play Music" id="playbutton" onclick="change();"> -->

​

Answer 3

尝试下面的代码播放并暂停音频

<script type="text/javascript">
  var image_tracker = 'off';

  function change() {
    var image = document.getElementById('playbutton');
    var audio= document.getElementById('background-music');
    if (image_tracker == 'off') {
      image.src = '/media/sound_on.png';
      image_tracker = 'on';
      audio.play();
    } else {
      image.src = '/media/sound_off.png';
      image_tracker = 'off';
      audio.pause();
    }
  }
</script>