Change a play button to pause in Angular and vice versa

0
votes

I'm trying to make a basic play-pause control using the Soundcloud streaming.

I've got the part where you click the play button and the sound streams.

<img class="media-object img-rounded img-responsive"  src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)">

The controller for that bit looks like this

$scope.streamTrack = function (stream_url) {
    console.log(stream_url);
    SC.stream(stream_url, function(sound){
    sound.play();
  });

When I click on the button, I want it to change to a pause button. Then when you click the pause button, I'll set it up to fire sound.pause or sound.stop.

What's the best way to change a button and corresponding click events in Angular?

PlayPause

2
angularjssoundcloud

2 Answers

2
votes

Try this in your markup:

<img class="media-object img-rounded img-responsive"  src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)" ng-hide="isStreaming">
<img class="media-object img-rounded img-responsive"  src="/images/pause_button.png" alt="pausebutton" height="40px" width="40px" ng-click="stopTrack(sound)" ng-show="isStreaming">

And in JS:

$scope.streamTrack = function (stream_url) {
    console.log(stream_url);
    SC.stream(stream_url, function(sound){
      $scope.sound = sound;
      sound.play();
    });

    $scope.isStreaming = true;
}

$scope.stopTrack = function (sound) {
    sound.pause()

    $scope.isStreaming = false;
}
1
votes

Consider using ng-src in your button.

<img ... ng-src="playPauseButton" ...>

Then in your controller, define a scope variable that you specify the src.

$scope.streamTrack = function(){
  ...
  $scope.playPauseButton="/pathtopausebutton.png"
}
$scope.stopStreaming = function(){
  ...
  $scope.playPauseButton="/pathtoplaybutton.png"
}

$scope.playPauseButton="/pathtoplaybutton.png"