How to do a jQuery play and stop toggle button in Angular?

Question

Recently I created this jQuery play and pause button (http://jsfiddle.net/jTh3v/338/) which allows the user to toggle between play and pause when playing the music. I want to recreate this functionality but in AngularJS. However I'm very junior when it comes to Angular and struggled to do so. In the JSFiddle I hide the audio tag because I don't want the user to be able to see it, instead I just have 2 icons that allows them to play/pause the music. Could someone please help?

jQuery - toggles between the 2 icons and plays/pauses the song:

$('#button_play').on('click', function() {
  $('#button_pause').show();
  $('#button_play').hide();
  $('#aud').trigger('play');
});
$('#button_pause').on('click', function() {
  $('#button_play').show();
  $('#button_pause').hide();
   $('#aud').trigger('pause');
});

HTML:

<div id="soundTag"></div><br>

  <div>
    <button id="button_play" class="first" ng-click="" type="button">
      <i class="glyphicon glyphicon-volume-up"></i></button>
    <button id="button_pause" class="second" ng-click="" type="button">
      <i class="glyphicon glyphicon-volume-off"></i></button>
  </div>

Dan M. CISSOKHO · Accepted Answer · 2016-08-30 12:23:04Z

1

You should do like so :

<div id="soundTag"></div><br>

  <div>
    <button ng-show="!playing" id="button_play" class="first" ng-click="play()" type="button">
      <i class="glyphicon glyphicon-volume-up"></i></button>
    <button ng-show="playing" id="button_pause" class="second" ng-click="pause()" type="button">
      <i class="glyphicon glyphicon-volume-off"></i></button>
  </div>

In your JS

      $scope.play = function () {
        $scope.playing = true;
        angular.element(document.querySelector('#aud'))[0].play(); 
        // or document.querySelector('#aud').play();
      };
      $scope.pause = function () {
        $scope.playing = false;
        angular.element(document.querySelector('#aud'))[0].pause();
        // or document.querySelector('#aud').pause();
      };

answered Aug 30, 2016 at 12:23

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dipendra · Accepted Answer · 2016-08-30 12:20:02Z

1

Kindly find below HTML and Js:

//Controller code
$scope.play = true;
$scope.pause = false;

$scope.play = function() {
  //Code
};

$scope.pause = function() {
  //Code
};

//HTML code
<div>
  <button id="button_play" ng-if="play" class="first" ng-click="play=!play;pause=!pause;play();" type="button">
  <i class="glyphicon glyphicon-volume-up"></i></button>
  <button id="button_pause" ng-if="pause" class="second" ng-click="play=!play;pause=!pause;pause();" type="button">
  <i class="glyphicon glyphicon-volume-off"></i></button>
</div>

answered Aug 30, 2016 at 12:20

dipendra

2611 gold badge3 silver badges9 bronze badges

Comments

Jekin Kalariya · Accepted Answer · 2016-08-30 12:21:30Z

0

After configuring angular js do following code

    <div>
    <button id="button_play" class="first" ng-click="changeIcon(1)" ng-if ="volumUp" type="button">
      <i class="glyphicon glyphicon-volume-up" ></i></button>
    <button id="button_pause" class="second" ng-click="changeIcon(2)" ng-if ="!volumUp" type="button">
      <i class="glyphicon glyphicon-volume-off" ></i></button>
  </div>

in your controller

changeIcon=function(code){


      if(code==1){

      $scope.volumUp=false;
      $scope.functionForPlay();

      }else{

      $scope.volumUp=true;
      $scope.functionForPause();


      }

}

edited Aug 30, 2016 at 12:21

answered Aug 30, 2016 at 12:16

Jekin Kalariya

3,5072 gold badges22 silver badges32 bronze badges

1 Comment

Dan M. CISSOKHO Over a year ago

this solution does not fire sound

Collectives™ on Stack Overflow

How to do a jQuery play and stop toggle button in Angular?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related