AngularJs audio

AngularJs audio

本文关键字：audio AngularJs      更新时间：2023-09-26

当音频以angular js结束时，我该如何确认？我已附上我的代码。任何人请帮帮我。

app.controller("myCtrl",function($scope,ngAudio,$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;
        if (doucmentHidden)
            $scope.audio.pause();
        else
            $scope.audio.play();
        }, false);
    });

经过一些研究，我没有找到一个可以告诉你Aduio何时结束的监听器，但我发现了两个可以给你一些有用状态的属性：

$scope.audio.paused

或

$scope.audio.canPlay

它们都返回布尔值，所以你需要做的是定义一个这样的函数：

function listen(audio, callBack) { 
    if(audio.paused) {
         callBack();
    } else {
         setTimeout(listen);
    }
}

这个函数的问题是，每次调用.play()方法时都需要调用它

$scope.audio.play();
listen($scope.audio, function () { 
    console.log("ended !!");
});

请注意，这不是一个好的解决方案，其中一个好方案是使用本机Audio构造函数：

$scope.audio = new Audio("aud.mp3");
$scope.audio.onended = function () { 
    console.log("ended !! ");
}
$scope.audio.play();

除非您自己编辑模块，否则收听结束的事件并不容易，我必须编辑该模块以允许事件侦听器angular.audio.js Line 240

    cleverAudioFindingService.find(id)
        .then(function(nativeAudio) {
            audio = nativeAudio;
            audio.addEventListener('canplay', function() {
                audioObject.canPlay = true;
            });
             /*-----*/
            audio.addEventListener('ended',function(){
                alert('ended');
            });
             /*-----*/
        }, function(error) {
            audioObject.error = true;
            console.warn(error);
        });

由于这不是一个好的练习，我也使用了这个角度播放器

相关文章：