• 0

كيف أتحكم في قطعة موسيقية باستعمال Angular Js؟

لدي قطعة موسيقية تشتغل في موقعي، وأريد إيقافها عند أختفاء نافذة الموقع، ثم إعادة تشغيلها عند فتح النافذة باستعمال Angular Js، وهذا ما توصلت إليه إلى حد الساعة:

 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();
        }
    });

ماهو الخطأ بالضبط؟ هل من اقتراحات؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يمكنك التأكد من ظهور أو اختفاء نافذة المتصفح من خلال دالة Javascript التالية:

visibilitychange

والتي تتيح لك التأكد من ظهور أو اختفاء نافذتك، بالطريقة التالية:

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

JQuery Trigger Event on Show/Hide of Element

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

إن كنت تقصد اختفاء أو ظهور نافذة المتصفح tقد أجابك @E.Nourddine
أما إن كنت تقصد اختفاء أو ظهور Route 
يمكنك الاستعانة بـالحدث 

$locationChangeStart

اقترح إيقاف الصوت مهما كان عند تغيير Location بالكود الآتي

$rootScope.$on('$locationChangeStart',function(event,newUrl,oldUrl,newState,oldState){
       $scope.audio.pause();
})

للمزيد من التفصيل حول هذا الحدث 

$location

الأحداث

$on

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن