javascript - P5.js Draw() 函数在 AngularJS 指令中未按预期工作

Question

我正在尝试将 p5.js 库集成到我的 AngularJS 应用程序中，让我的代码在指令中运行。

在我的纯 JavaScript 文件中，我能够在全局导入 p5 库后运行 draw() 方法。

我的原始代码（不是问题）：

var mic
var playButton
var volHistory = []
var micIsOn = false

function setup(){
    createCanvas(400, 150)
    createButtons()
    mic = new p5.AudioIn()
}

function draw(){
    background(245)
    stroke(0, 109, 203) 

    //populate volHistory
    if(micIsOn){
        var vol = mic.getLevel()
        //check to see if array is empty, if it is empty we do not want to push 0 volume
        if(volHistory.length > 0 && vol > 0){
            volHistory.push(vol)
        //if recording has started, we can now take in vol
        } else if(vol > 0) {
            volHistory.push(vol)
            console.log(volHistory.length)
        }
    }

    //iterate through volHistory and draw
    fill(0, 109, 203)
    var barWidth = 2;
    var offsetWidth = 5;
    var offset = 5;
    for(var i = 0; i < volHistory.length; i++){
        var barHeight = map(volHistory[i], 0, 1, 1, height)
        rect(i + offset, (height/2.0) - (barHeight/2.0), barWidth, barHeight, 15);
        offset += offsetWidth;
    }

    //moves wavelength 1 index at a time and account for bar width and offset width
    if(volHistory.length * (offsetWidth + barWidth) > width){
        volHistory.splice(0, 1)
    }

    //draw vertical line
    stroke(250, 30, 100)
    line(volHistory.length + offset, 0, volHistory.length + offset, height) 
}

function createButtons(){
    playButton = createButton("<img style='width: 50px' src='playbutton.png'/>")
    playButton.mousePressed(toggleRecord)
    playButton.position(162, 50)
    playButton.style("background-color", color(0,0,0,0))
    playButton.style("border", 0)
}

//toggle recording of audio
function toggleRecord(){
    if(!micIsOn){
        mic.start()
        micIsOn = true
    } else {
        mic.stop()
        micIsOn = false
    }
}

上面的代码让我创建了一个声音可视化器，它接入用户的麦克风，绘制一个显示他们声音级别的画布。看起来像这样：

但是，当我尝试在 Angular 指令中使用该库时，似乎无法让 draw() 方法按预期运行。draw() 函数不会像在 Angular 指令之外那样连续运行。

我得到的最接近的工作是通过$watch在变量上创建一个来跟踪用户是否正在录制。如果 isRecording 为真，我将使用 setInterval 连续调用 draw()。不幸的是，这似乎是对 draw() 方法的不当使用，因为它应该在第一次执行后自行连续执行其中的代码。

角代码：

(function () {

    angular.module('icSdkPwp').directive('icAudioRecordingUpload', icAudioRecordingUpload);

    function icAudioRecordingUpload($stateSvc, $rS, $utilSvc) {
        return {
            scope: {
                model: '=',
                config: '=',
                updateState: '='
            },
            link: function ($s, e, a) {

                $s.hasRecording = false;
                $s.isRecording = false;
                $s.recordingPaused = false;
                $s.recordingProcessing = false;
                $s.volHistory = []
                $s.micIsOn = false
                $s.p5mic = null
                $s.playButton = null

            var gumStream;
            var rec;
            var input;

            var AudioContext = window.AudioContext || window.webkitAudioContext;
            var audioContext

            $s.startRecording = function(e) {
                if($s.recordingProcessing)
                    return;

                var constraints = { audio: true, video:false }
                setup()
                $s.isRecording = true;

                navigator.mediaDevices.getUserMedia(constraints)
                  .then(function(stream) {
                    audioContext = new AudioContext();
                    gumStream = stream;
                    input = audioContext.createMediaStreamSource(stream);
                    rec = new Recorder(input,{numChannels:2})
                    rec.record()

                }).catch(function(err) {
                    $s.isRecording = true;
                });
            }

           var redrawInt = null;
           $s.$watch("isRecording", function (n, o, s) {
                if(s.isRecording){
                    redrawInt = setInterval(function(){
                        draw()
                    },0);
                }
                else{
                    clearInterval(redrawInt);
                }

            });


            function setup(){
                createCanvas(400, 150)
                $s.p5mic = new p5.AudioIn()
                $s.p5mic.start()
                $s.micIsOn = true
                background(245)
            }

            function draw(){
                stroke(0, 109, 203) 

                //populate volHistory
                if($s.isRecording){
                    var vol = $s.p5mic.getLevel()
                    //check to see if array is empty, if it is empty we do not want to push 0 volume
                    if($s.volHistory.length > 0 && vol > 0){
                    $s.volHistory.push(vol)
                    //if recording has started, we can now take in vol
                    } else if(vol > 0) {
                        $s.volHistory.push(vol)
                    }
                }

                //iterate through volHistory and draw
                fill(0, 109, 203)
                var barWidth = 2;
                var offsetWidth = 5;
                var offset = 5;
                for(var i = 0; i < $s.volHistory.length; i++){
                    var barHeight = map($s.volHistory[i], 0, 1, 1, height)
                    rect(i + offset, (height/2.0) - (barHeight/2.0), barWidth, barHeight, 15);
                    offset += offsetWidth;
                }

                    //moves wavelength 1 index at a time and account for bar width and offset width
                if($s.volHistory.length * (offsetWidth + barWidth) > width){
                    $s.volHistory.splice(0, 1)
                }

                    //draw vertical line
                stroke(250, 30, 100)
                // debugger
                line($s.volHistory.length + offset, 0, $s.volHistory.length + offset, height) 
            }

        }
        };
    }

}());

调用 startRecording() 的按钮，启动进程

<div class="IX_recordControls clearfix">
    <div class="rcrow row1">
        <div ng-click="recordingProcessing || startRecording($event)"
             ng-if="!hasRecording">
    </div>
</div>

这给了我一个非常奇怪的画布，我认为这是意料之中的，因为我不应该多次调用 draw()，但我找不到一种方法让它一次调用并连续运行。

这绝对看起来像是范围的问题，其中 draw() 方法无法执行自己的循环。

标签： javascriptangularjsp5.js