SpeechKit API на JS?

Question

[chincharovpc]

Записываю с микрофона в формате .ogg
Функция возвращает мне ссылку на файл типа "blob:https://xn--80aaj5aiiy2b.xn--p1ai/ce8b1088-7f67-45..."

Потом я должен передать по API к Yandex SpeechKit, только не получается передать

Вот и сама функция

function SpeechKit(link) {
    console.log(link);

    var data = null;
    var xhr = new XMLHttpRequest();

    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            console.log(this.responseText);
        }
    });

    xhr.open("POST", "https://stt.api.cloud.yandex.net/speech/v1/stt:recognize",true);
    xhr.setRequestHeader("Authorization", "Api-Key ........");
    xhr.setRequestHeader("Content-Type", "text/plain");
    xhr.setRequestHeader("Accept", "/");
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("Postman-Token", "9d5bfa....");
    xhr.setRequestHeader("cache-control", "no-cache");

    xhr.send(data);
}

Как я должен отправить link через API ?

Comments

[DIMANVAZ]

Автор, привет, можно вопрос по теме? Тоже хочу прикрутить этот спич-кит на сайт (обойдясь только HTML + JS), но только наоборот - текст в речь. Возможно ли обойтись без ПХП, Питона, Ноды JS?

[chincharovpc]

DIMANVAZ, думаю, нет. Посмотри как работает на сайте чатналог.рф (запись + чтение)

Answer 1

[chincharovpc]

Смог.

1. Записывается голос с микрофона с помощью WebAudioRecorder, есть в github
   
2. Запись преобразуем в blob
   
3. blob преобразуем в base64 с помощью FileReader
   
4. base64 передаем с помощью POST к php
   
5. в php создаем файл из base64 с помощью

   file_put_contents($audioFileName, base64_decode($file));

   
   
6. Открываем файл созданный только что и передаем к Speechkit
   
7. Возвращаем ответ
   
   

Comments

[Роман]

Все тоже самое можно сделать не прибегая к бэку.

[Роман]

Но вариант с бэком наверное все таки правильнее, так как позволяет не светить ваш токен для яндекс SpeechAPI

[chincharovpc]

Роман, Яндекс сказал, что запросы можно сделать только с сервера, а не с браузера

[chincharovpc]

Роман, С JS возникают проблемы с CORS

[Роман]

pakhrudin, спорить не буду, но мне кажется что яндекс в данном случае можно обмануть)

[Роман]

pakhrudin, кстати, возможно вам будет интересно это (смотрите пример в моем ответе)

[chincharovpc]

Роман, Это то что я хотел. Буду разбирать как сохранять звук с микрофона

[chincharovpc]

Роман, а вы не сможете допилить код, чтобы записывалось в .ogg и с помощью blob получить ссылку?

[Роман]

pakhrudin, наверно смог бы. Завтра по колдую, если не загрузят работой)

[chincharovpc]

Спасибо огромное.
Будет хорошо если поможете. Уже 3 дня вожусь с этим.
Нужно записывать 20 секунд или до 3 секунд тишины.
ПОльзовался этой статьей Статья
Демо вот
Файлы взял из Github
Нужен ogg формат
Код обработки Blob, Base64, Post запрос.

function createDownloadLink(blob, encoding) {
    var reader = new FileReader();
    reader.readAsDataURL(blob)
    reader.onloadend = function () {
        var base64data = reader.result;


        var data = null;
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;

        var param = "action="+String(base64data.slice(base64data.indexOf(',') + 1));
        //var param = base64data;

        //console.log(param);
        xhr.open("POST", "search.php");
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send(param);

        xhr.addEventListener("readystatechange", function () {
            if (this.readyState === 4) {
                if(JSON.parse(this.responseText)['answer']['result']){
                    document.getElementById("search").value=JSON.parse(this.responseText)['answer']['result'];
                    document.getElementById("searchButton").click();
                }else{
                    alert('Голос не распознан');
                }
            }
        });
    }
}

blob url имеет вид

blob:https://xn--80aaj5aiiy2b.xn--p1ai/ce8b1088-7f67-45...

Спасибо.

Answer 2

[Роман]

вариант 1 (взят с qaru)

Это возможно только при использовании XHR FormData API (ранее известный как часть XHR2 или XHR Level 2, в настоящее время известный как "Расширенные функции XHR" ).

Учитывая этот HTML,

<input type="file" id="myFileField" name="myFile" />

вы можете загрузить его, как показано ниже:

var formData = new FormData();
formData.append("myFile", document.getElementById("myFileField").files[0]);

var xhr = new XMLHttpRequest();
xhr.open("POST", "myServletUrl");
xhr.send(formData);

XHR позаботится о правильных заголовках и запросит кодирование тела, и файл в этом примере будет доступен на стороне сервера как form-data с именем myFile.

Вам нужно иметь в виду, что API FormData не поддерживается в старых браузерах. В caniuse.com вы можете увидеть, что он в настоящее время реализован в Chrome 7+, Firefox 3.5+, Safari 5+, IE 10+ и Opera 12+.

вариант 2 (взят с qaru)

(более подробное описание fetch API)

// Это базовый пример с комментариями. Функция upload - это то, что вы ищете:

// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');

// This will upload the file after having read it
const upload = (file) => {
  fetch('http://www.example.net', { // Your POST endpoint
    method: 'POST',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};

// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);

// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

ЗЫ: не забудьте указать правильные параметры аудиофайла