jQuery 按钮：Play/Pause 音频和切换图像

Question

我正在尝试制作一个按钮来切换音频标签的播放和暂停。当它播放时，图像应该显示一个活跃的演讲者，当它暂停时，演讲者应该出现一个 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>

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 按钮：Play/Pause 音频和切换图像

jQuery Button: Play/Pause Audio AND switch Images

audio

jquery

image

button

toggle