Question

围绕该主题有几篇文章，但是我仍然无法调试我的代码，例如Sending HTML5 audio element content to ajax POST

目前，我有一个允许用户使用recorder.js录制音频的客户端。然后，我要获取存储在blob中的生成的wav文件，并将其发送到服务器端代码，并将其存储在mongo中。

<div id="fb-button">
  <div class="fb-login-button fb_iframe_widget" data-width="200px" data-scope="email" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" data-onlogin="window.checkLoginState()" login_text="" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=203191490405831&amp;auto_logout_link=true&amp;button_type=continue_with&amp;container_width=0&amp;locale=en_US&amp;max_rows=1&amp;scope=email&amp;sdk=joey&amp;show_faces=false&amp;size=large&amp;use_continue_as=false&amp;width=200px">
    <span style="vertical-align: bottom; width: 240px; height: 40px;">
      <iframe name="f28cb7614377564" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" title="fb:login_button Facebook Social Plugin" src="https://www.facebook.com/v3.2/plugins/login_button.php?app_id=203191490405831&amp;auto_logout_link=true&amp;button_type=continue_with&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FafATJJjxKE6.js%3Fversion%3D43%23cb%3Df3b80f280703dbc%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1ed62ab87a02c4%26relation%3Dparent.parent&amp;container_width=0&amp;locale=en_US&amp;max_rows=1&amp;scope=email&amp;sdk=joey&amp;show_faces=false&amp;size=large&amp;use_continue_as=false&amp;width=200px" style="border: none; visibility: visible; width: 240px; height: 40px;" class=""></iframe>
    </span>
  </div>
</div>

我读过几篇文章，我应该将rec.exportWAV(sendToBackEnd); } function sendToBackEnd(blob){ var blob = blob; console.log(blob) var fd = new FormData(); fd.append('fname', 'test.wav'); fd.append('data', blob); // fd.append('data', blob); $.ajax({ url: '/recordings', type: 'POST', data: fd, processData: false, // contentType: "audio/wav" }).done(function(data) { console.log(data); }); }设置为false，但是req.body为空。

在服务器端，我有以下代码。

contentType

任何对此的帮助都会受到高度重视。谢谢！

Answer 1

这是我通过recorder.js服务器与express服务器进行音频记录，上传和存储的方法。

客户

我在下面不使用jQuery，仅使用本机XMLHttpRequest：

this.recorder.stop().then(({ blob }) => {
  if (blob.size === 44) { // 44 bytes means something is wrong. reload to fix
    if (window.confirm('Sorry, no audio was captured. Click OK to reload the page.'))
      window.location.reload();
    else return;
  }

  const fd = new FormData(),
    xhr = new XMLHttpRequest();

  fd.append("audioData", blob);

  xhr.onreadystatechange = r => {
    if (xhr.status !== 200) { window.alert("Sorry, something went wrong"); return }

    const response = JSON.parse(r.target.response);
    console.info(`Ok, audio uploaded!`, response);
  };
  xhr.open("POST", "https://my.audio.server/upload", true);
  xhr.send(fd);
});

服务器

在我的服务器上，我使用的是Express而不是MongoDB，但看起来服务器端的问题更多是在获取已上传的音频数据。这是我的方法：

const fs = require("fs"),
  fileUploader = require("multer")({ dest: "/tmp/" });

app.post("/upload", fileUploader.single("audioData"), (req, res) => {
  const temporaryFilename = req.file.path,
    wavData = fs.readFileSync(temporaryFilename),
    bytes = fs.statSync(temporaryFilename)["size"];

  // do something with wavData

  return res.json({ ok: true, bytes, at: new Date() });
});

发送和处理WAV文件到NodeJS

1 个答案:

客户

服务器