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

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

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

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

Вот моя тестовая страница, на ней есть кнопка, и при ее нажатии начинается запись голоса в течение 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>
...