Кнопка jQuery: воспроизведение / пауза аудио и переключение изображений - PullRequest
Новая
       27

Кнопка jQuery: воспроизведение / пауза аудио и переключение изображений

0 голосов
/ 25 сентября 2018

Я пытаюсь создать кнопку, которая переключает воспроизведение и делает паузу в аудио-теге.При воспроизведении на изображении должен отображаться активный динамик, а во время паузы динамик должен отображаться с 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>

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Воспользуйтесь приведенным ниже кодом, чтобы воспроизвести и приостановить звук 

<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>
0 голосов
/ 25 сентября 2018

Попробуйте! 

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>
0 голосов
/ 25 сентября 2018

Вы можете использовать функцию .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();"> -->
...