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

您可以使用.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 2

请尝试以下代码播放和暂停音频

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

Answer 3

尝试一下！

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>

jQuery按钮：播放/暂停音频并切换图像

3 个答案: