CODEWITHSUNDEEP
angularjsionic-framework
MehdiN
MehdiN

Reputation: 351

How to toggle between a play and pause button?

Essentially, I would like to know the best way to toggle between two img or div on a user click. So, first the play image is visible and when user clicks, play image is hidden and pause image is shown. When user clicks pause image, pause image is hidden and play image is shown.

I tried using an ng-show but I could only figure out how to show both images without hiding the other. So, a play image would be next to the pause image, which is not ideal.

Thanks in advance :)

Code I have tried that does not work:

HTML

<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>

Controller:

$scope.changeStatus=function(){
    $scope.checkStatus = false;
}

$scope.changeStatusAgain=function(){
    $scope.checkStatus = true;
}

https://jsfiddle.net/n8nnwtte/

Upvotes: 0

Views: 2738

Answers (2)

Boaz
Boaz

Reputation: 20230

Use the same expression for both and negate it according to your logic.

HTML

 <button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
 <button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">

JS

var $scope.song = {
    playing: false, // Set the initial state

    togglePlay: function() {
         $scope.song.playing = !$scope.song.playing; // This would alternate the state each time

         // Do something with the song
        if ($scope.song.playing) { /*..*/ }  else { /*..*/ }
    }
};

This assumes you have a song object defined in your scope and that it has a boolean property called playing. So if song.playing is falsy we show the play button and if it's truthy we show the pause button.

The togglePlay() method defined can then be used to alternate the state of song.playing in addition to its role of actually controlling the playback.

Upvotes: 6

Ravi Gadhiya
Ravi Gadhiya

Reputation: 54

JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element

his post shows how to toggle (play/pause) sound by JavaScript manipulation of onclick event of a DOM element. Browser support of HTML5 audio tag is a must in this example.

https://siongui.github.io/code/javascript-sound/toggle.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>

<button id="player" type="button"
  onclick="javascript:toggleSound();">
  Click to Toggle Sound
</button>
<audio id="audio">
  <source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>

<script type="text/javascript">
function toggleSound() {
  var audioElem = document.getElementById('audio');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause();
}
</script>

</body>
</html>

Upvotes: 0

Related Questions