Как сохранить значение глобальной переменной?

Question

[Апти Хасухаджиев]

Есть глобальная переменная publicBlobObj. Ей в функции старт задается значение, но при выходе из функции ее значение становится undefinde. Как сохранить значение для этой глобальной переменной, которое было задано в функции start()?.

function createAudioElement(blob) {
    var aud = document.getElementById("sound");
    aud.controls = true;
    aud.src = blob;
    aud.type = 'audio/webm';
}

var recorder;
var publicBlobObj;

function start() {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        // store streaming data chunks in array
        const chunks = [];
        // create media recorder instance to initialize recording
        recorder = new MediaRecorder(stream);
        // function to be called when data is received
        recorder.ondataavailable = e => {
            // add stream data to chunks
            chunks.push(e.data);
            // if recorder is 'inactive' then recording has finished
            if (recorder.state == 'inactive') {
                // convert stream data chunks to a 'webm' audio format as a blob
                publicBlobObj = new Blob(chunks, { type: 'audio/webm' });
                // convert blob to URL so it can be assigned to a audio src attribute
                createAudioElement(URL.createObjectURL(publicBlobObj));
            }
        };
        // start recording with 1 second time between receiving 'ondataavailable' events
        recorder.start();
        // setTimeout to stop recording after 4 seconds
    }).catch(console.error);
}


function stop() {
    recorder.stop();

    var xhr = new XMLHttpRequest();
    var data = new FormData;
    data.append("sound", publicBlobObj);
    xhr.open('POST', '/User/Sound', true);
    // Listen to the upload progress.
    xhr.send(data);
}

Answer 1

[Кирилл Петров]

Объявляйте глобальную или локальную переменную через let вместо var
Подробнее тут

Comments

[Апти Хасухаджиев]

Не помогло. Тут скорее всего вот в чем дело: в функции stop() создается объект через конструктор Blob этот создаваемый объект мне надо сохранить. Его я передаю в свою глобальную переменную. При выходе из функции объект уничтожается и ссылка на этот объект, которая у меня хранится в переменной не указывает уже никуда. Нужно сохранить или клонировать этот объект в новый. Этот новый объект я передаю на сервер из другой функции.

Answer 2

[Владимир Скибин]

У Вас скорей всего отправляется XHR раньше, чем разрешился Promise. Попробуйте переделать логику, чтобы была более последовательной: Начать запись, остановить, записать данные в audio-object, вызвать XHR.

Answer 3

[Сергей Мельников]

function createAudioElement(blob) {
  var aud = document.getElementById("sound")
  aud.controls = true
  aud.src = blob
  aud.type = 'audio/webm'
}

var recorder
var publicBlobObj

function start(callback) {
  navigator
    .mediaDevices
    .getUserMedia({ audio: true })
    .then(stream => {
      const chunks = []
      recorder = new MediaRecorder(stream)
      recorder.ondataavailable = e => {
        chunks.push(e.data)
        if (recorder.state == 'inactive') {
          publicBlobObj = new Blob(chunks, { type: 'audio/webm' })
          createAudioElement(URL.createObjectURL(publicBlobObj))
          if (callback) callback()
        }
      }
      recorder.start()
    })
    .catch(console.error)
}

function stop() {
  recorder.stop()
  var xhr = new XMLHttpRequest()
  var data = new FormData
  data.append("sound", publicBlobObj)
  xhr.open('POST', '/User/Sound', true)
  xhr.send(data)
}

start(() => {
  // вот тут уже и recorder и publicBlobObj имеют значение
})

Comments

[Апти Хасухаджиев]

Не работает.
start(() => {
// вот тут уже и recorder и publicBlobObj имеют значение
})
Вот эта часть должна вызываться по завершении функции start()?

[Сергей Мельников]

Да

Answer 4

[Павел Корнилов]

function start() {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        // store streaming data chunks in array
        const chunks = [];
        // create media recorder instance to initialize recording
        recorder = new MediaRecorder(stream);
        // function to be called when data is received
        recorder.ondataavailable = e => {
            // add stream data to chunks
            chunks.push(e.data);
            // if recorder is 'inactive' then recording has finished
            if (recorder.state == 'inactive') {
                // convert stream data chunks to a 'webm' audio format as a blob
                window.publicBlobObj = new Blob(chunks, { type: 'audio/webm' });
                // convert blob to URL so it can be assigned to a audio src attribute
                createAudioElement(URL.createObjectURL(publicBlobObj));
            }
        };
        // start recording with 1 second time between receiving 'ondataavailable' events
        recorder.start();
        // setTimeout to stop recording after 4 seconds
    }).catch(console.error);
}

function stop() {
    recorder.stop();

    var xhr = new XMLHttpRequest();
    var data = new FormData;
    data.append("sound", window.publicBlobObj);
    xhr.open('POST', '/User/Sound', true);
    // Listen to the upload progress.
    xhr.send(data);
}

А вообще советую юзать strict mode для отлова подобных ошибок.

Comments

[Апти Хасухаджиев]

Тоже не работает. Может кто-нибудь сможет подключится по teamviwer и посмотреть?

Answer 5

[Апти Хасухаджиев]

Может кто-нибудь сможет подключится по teamviwer и посмотреть? Я уже 3 дня сижу над этой ошибкой. Руки опустились.