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?
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;
}