Angular 5 Dome обновляется после клика - PullRequest
Новая
       10

Angular 5 Dome обновляется после клика

0 голосов
/ 10 октября 2018

У меня есть код ниже, чтобы получить десятичное значение звука, полученного микрофоном.Я получаю значение в console.log, но в то же время я также показываю и в DOM, что отражается, только если я предпринимаю какие-то действия, такие как щелчок.

component.ts 

class MyComponent {
micStreamObservable: Observable<Number>;
constructor() {

    this.micStreamObservable = new Observable<Number>(observer => {
        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                audio: true
            },
                (stream) => {
                    var audioContext = new AudioContext();
                    var analyser = audioContext.createAnalyser();
                    var microphone = audioContext.createMediaStreamSource(stream);
                    var javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);

                    analyser.smoothingTimeConstant = 0.8;
                    analyser.fftSize = 1024;

                    microphone.connect(analyser);
                    analyser.connect(javascriptNode);
                    javascriptNode.connect(audioContext.destination);

                    javascriptNode.onaudioprocess = () => {
                        var array = new Uint8Array(analyser.frequencyBinCount);
                        analyser.getByteFrequencyData(array);
                        var values = 0;

                        var length = array.length;
                        for (var i = 0; i < length; i++) {
                            values += (array[i]);
                        }

                        var average = values / length;

                        observer.next(Math.round(average - 40));


                        console.log({ avg: Math.round(average - 40) });

                    }
                },
                (err) => {
                    console.log("The following error occured: " + err.name)
                });
        } else {
            console.log("getUserMedia not supported");
        }
    });

}

component.html {{micStreamObservable |асинхронной}}

...