Как отправить аудио-файл ogg в API в JavaScript?

Я записываю аудио на веб-странице с помощью простых кнопок запуска и остановки. Файл хранится в виде большого двоичного объекта. И я хочу, чтобы этот BLOB-файл преобразовывался в base64 в теле POST-вызова моего внутреннего API.

Я пробовал следующий код:

'use strict' var log = console.log.bind(console), id = val => document.getElementById(val), ul = id('ul'), gUMbtn = id('gUMbtn'), start = id('start'), stop = id('stop'), stream, recorder, counter = 1, chunks, media; var mv = id('mediaVideo'), mediaOptions = { video: { tag: 'video', type: 'video/webm', ext: '.mp4', gUM: { video: true, audio: true } }, audio: { tag: 'audio', type: 'audio/ogg', ext: '.ogg', gUM: { audio: true } } } media = mediaOptions.audio; navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => { stream = _stream; id('btns').style.display = 'inherit'; start.removeAttribute('disabled'); recorder = new MediaRecorder(stream); recorder.ondataavailable = e => { chunks.push(e.data); let blob = new Blob(chunks, { type: media.type }) , url = URL.createObjectURL(blob) , li = document.createElement('li') , mt = document.createElement(media.tag) , hf = document.createElement('a'); if (recorder.state == 'inactive') makeLink(url, li, mt, hf); log('data receiving'); var reader = new FileReader(); reader.readAsDataURL(blob); console.log(reader); var xhttp = new XMLHttpRequest(); xhttp.open("POST", "http://localhost:8080/rest/api/v1/audio/submit", (JSON.stringify(reader)), true); xhttp.setRequestHeader('Content-Type', 'application/json'); xhttp.send(JSON.stringify(reader)); }; }).catch(log); start.onclick = e => { start.disabled = true; stop.removeAttribute('disabled'); chunks = []; recorder.start(); } stop.onclick = e => { stop.disabled = true; recorder.stop(); start.removeAttribute('disabled'); } function makeLink(url, li, mt, hf) { mt.controls = true; mt.src = url; hf.href = url; hf.download = `${counter++}${media.ext}`; hf.innerHTML = `${hf.href}`; li.appendChild(mt); li.appendChild(hf); ul.appendChild(li); } 

К сожалению, я не мог понять, как POST после записи в JavaScript.

Всего 1 ответ


Вам нужен прослушиватель события onload случая, когда reader загрузил в него data после чтения из file . В handler прослушивателя handler вы можете сделать post звонок.

let reader = new FileReader();
reader.addEventListener('load', e=>{
    console.log(reader.result);
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST"," http://localhost:8080/rest/api/v1/audio/submit", true);
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.send({data:reader.result});
});
reader.readAsDataURL(blob);

Также проверьте официальную документацию FileReader.readDataAsURL


Есть идеи?

10000