Загрузка аудиоданных с веб-страницы на сервер

Я пытаюсь загрузить аудиоданные с веб-страницы на сервер и считаю, что это сложнее, чем должно быть.

Вот моя тестовая страница, на ней есть кнопка, и при ее нажатии начинается 5-секундная запись голоса, затем она воспроизводится и, наконец, звуковые данные должны быть загружены на сервер.

Части записи и воспроизведения голоса работают нормально. Загрузка на сервер работает не полностью.

Код, который у меня есть, полностью виден ниже. Я специально поместил весь файл (названный "GetAudio.php"), чтобы любой мог легко скопировать и вставить его, чтобы попробовать.

Вот что идет не так: созданный на сервере файл под названием «Audio.data» содержит 4 символа, а именно:

blob

Это не то, что я хочу. Я хочу, чтобы файл содержал фактические звуковые данные, записанные локально. Может ли кто-нибудь сказать мне, где в моем коде отсутствует какая-то важная вещь?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Record&Upload Trial</title>
</head>
<body>
<div>
    <h2>Five seconds voice record and upload.</h2>
    <p>
        <button id=startRecord><h3>Start the voice recording</h3></button><br/>
        <audio id="player" controls></audio>
        <p id="XMLH"></p>
    </p>
</div>

<?php
// Server side code:
if ($_POST['AudioData']) {
    $myfile = fopen("Audio.data", "w");
    fwrite($myfile, $_POST['AudioData']);
    fclose($myfile);
}
?>

<script>
startRecord.onclick = e => {
  startRecord.disabled = true;
  audioChunks = [];
  rec.start();
  setTimeout(() => {
    rec.stop();
    startRecord.disabled = false;
  }, 5000);
}

  var player = document.getElementById('player');

  var handleSuccess = function(stream) {
    rec = new MediaRecorder(stream);

    rec.ondataavailable = e => {
        audioChunks.push(e.data);
        if (rec.state == "inactive") {
            let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
            player.src = URL.createObjectURL(blob);
            player.controls=true;
            player.autoplay=true;

            // The code below intends to upload the sound file to the server.
            // But it is partly (or completely) wrong and does not work.
            var xhr = new XMLHttpRequest();

            var params = 'AudioData=blob';
            xhr.open('POST', 'GetAudio.php', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(params);
        }
    }
  };

  navigator.mediaDevices.getUserMedia({audio:true})
      .then(handleSuccess);

</script>

</body>
</html>

Замените var params = 'AudioData=blob'; на var params = 'AudioData=' + blob;

Emil S. Jørgensen 10.09.2018 11:31

Спасибо за предложение, но, к сожалению, оно не работает. Я попробовал, и в результате получился файл из 13 символов. Он содержит: «[объект Blob]».

Michel 10.09.2018 11:46

Взгляните на учебник MDN's "Отправка двоичных данных".

Emil S. Jørgensen 10.09.2018 11:52

Думаю, я видел это раньше и не нашел в нем особой пользы. Прочитав его снова, я понял, что могу последовать идее преобразования моего блоба в массив байтов, но даже после того, как выяснил, как это сделать. Как мне потом доработать серверную часть? Не осталось имени поля AudioData, как в обычной форме. Я здесь в незнакомой местности.

Michel 10.09.2018 18:45
0
4
224
0

Другие вопросы по теме