CODEWITHSUNDEEP
javascripthtmlangularjs
Vinoth kanna
Vinoth kanna

Reputation: 45

Angular js audio issue

How to pause angular js audio when browser window is closed and resume again when window is maximized? This is my code. i am new to angular js . i have got no idea about it. anyone help me

    var app=angular.module("myApp",['ngAudio']);
    app.controller("myCtrl",function($scope,ngAudio,$window)
    {$scope.src="aud.mp3";
        $scope.play=false;
        $scope.play=function(){
            $scope.audio = ngAudio.load('aud.mp3');
            $scope.audio.play();
        }
        $scope.stop=function(){
            $scope.audio = ngAudio.load('aud.mp3');
            $scope.audio.pause();
        }
    });

Upvotes: 1

Views: 707

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You could try below logic, which will track visibilitychange event and check for document visibility.

Code

app.controller("myCtrl", function($scope, ngAudio, $window, $document) {
    $scope.src = "aud.mp3";
    $scope.play = false;
    $scope.play = function() {
        $scope.audio = ngAudio.load('aud.mp3');
        $scope.audio.play();
    };
    $scope.stop = function() {
        $scope.audio = ngAudio.load('aud.mp3');
        $scope.audio.pause();
    };

    $document[0].addEventListener("visibilitychange", function() {
        var doucmentHidden = document.hidden;
        $scope.$apply(function() { //need to apply scope from events to run digest cycle
            if (doucmentHidden)
                $scope.stop();
            else
                $scope.play();
        });
    }, false);
});

Working Plunkr

Upvotes: 1

Related Questions