时间戳

首页 > 解决方案 > 从网页上传音频数据到服务器

javascript - 从网页上传音频数据到服务器

问题描述

我正在尝试将音频数据从网页上传到服务器，但发现它比应有的困难。

这是我的测试页面，它有一个按钮，点击后会开始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>

标签： javascriptphpaudioxmlhttprequesthtml5-audio

解决方案

推荐阅读