jQuery 按钮：播放/暂停音频和切换图像答案

【问题标题】：jQuery Button: Play/Pause Audio AND switch ImagesjQuery 按钮：播放/暂停音频和切换图像
【发布时间】：2019-03-01 12:04:06
【问题描述】：

我正在尝试制作一个按钮来切换音频标签的播放和暂停。当它播放图像时应该显示一个活跃的扬声器，当它暂停时，扬声器应该出现一个 X。

Sound off Sound on

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

感谢您的回答！

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

【问题讨论】：

标签： jquery image button audio toggle

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

感谢您的回答！也可以：-D

【解决方案3】：

您可以使用 .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();"> -->

【讨论】：