如何在 JavaScript 中将 ogg 音频文件发布到 API?

门迪克斯

我正在使用简单的开始和停止按钮在网页上录制音频。该文件存储为 blob。我希望在对后端 API 的 POST 调用正文中将此 blob 作为文件转换为 base64。

我尝试了以下代码:

'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);


}

不幸的是,我无法弄清楚如何在 JavaScript 录制后发布。

阿米特·达斯

您需要的onload时候为事件监听器reader已加载data在它看完后file在该事件侦听器中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的官方文档

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何在JavaScript中将Blob转换为文件

来自分类Dev

javascript-如何在ebone.js中将json发布到api方法

来自分类Dev

如何在Android中将音频文件与图像或视频文件合并?

来自分类Dev

如何确定OGG文件的长度

来自分类Dev

如何在JavaScript或PHP中将WAV音频文件转换为FLAC格式

来自分类Dev

如何在Android中将两个音频文件合并为一个音频文件?

来自分类Dev

如何解码Ogg vorbis文件Java?

来自分类Dev

如何遍历音频文件的javascript数组?

来自分类Dev

如何在javascript中将xml文件转换为csv文件

来自分类Dev

如何在Android中将视频/音频文件转换为字节数组,反之亦然?

来自分类Dev

如何在python中将音频文件(wav格式)拼接为1秒的拼接?

来自分类Dev

.ogg音频文件和播放白噪声

来自分类Dev

如何在JavaScript中将文件转换为Tensor

来自分类Dev

如何在JavaScript中将数组api响应转换为json

来自分类Dev

如何在Android中将特定的SQLITE音频文件共享到Gmail?

来自分类Dev

如何在Android中将音频文件与图像或视频文件合并?

来自分类Dev

如何在javascript中转换音频文件的比特率?

来自分类Dev

如何使用ffmpeg编码ogg音频文件?

来自分类Dev

.ogg音频文件和播放白噪声

来自分类Dev

如何使用IGraphBuilder播放Ogg Vorbis文件

来自分类Dev

如何在JavaScript中将原始数据转换为音频

来自分类Dev

如何在(L)ubuntu中将`rm`和`ra`音频文件转换为mp3?

来自分类Dev

如何在JavaScript中将HTML文件的多个部分的打印排队?

来自分类Dev

ffmpeg如何从mkv提取音频到ogg

来自分类Dev

如何在javascript中将多个函数插入到数组中

来自分类Dev

如何在javascript中调整音频文件的音量

来自分类Dev

Javascript:如何加载更新的音频文件并播放

来自分类Dev

如何在vba excel中将哔声保存到音频文件

来自分类Dev

如何在 JavaScript 中将 0.023 舍入到 0.03

Related 相关文章

  1. 1

    如何在JavaScript中将Blob转换为文件

  2. 2

    javascript-如何在ebone.js中将json发布到api方法

  3. 3

    如何在Android中将音频文件与图像或视频文件合并?

  4. 4

    如何确定OGG文件的长度

  5. 5

    如何在JavaScript或PHP中将WAV音频文件转换为FLAC格式

  6. 6

    如何在Android中将两个音频文件合并为一个音频文件?

  7. 7

    如何解码Ogg vorbis文件Java?

  8. 8

    如何遍历音频文件的javascript数组?

  9. 9

    如何在javascript中将xml文件转换为csv文件

  10. 10

    如何在Android中将视频/音频文件转换为字节数组,反之亦然?

  11. 11

    如何在python中将音频文件(wav格式)拼接为1秒的拼接?

  12. 12

    .ogg音频文件和播放白噪声

  13. 13

    如何在JavaScript中将文件转换为Tensor

  14. 14

    如何在JavaScript中将数组api响应转换为json

  15. 15

    如何在Android中将特定的SQLITE音频文件共享到Gmail?

  16. 16

    如何在Android中将音频文件与图像或视频文件合并?

  17. 17

    如何在javascript中转换音频文件的比特率?

  18. 18

    如何使用ffmpeg编码ogg音频文件?

  19. 19

    .ogg音频文件和播放白噪声

  20. 20

    如何使用IGraphBuilder播放Ogg Vorbis文件

  21. 21

    如何在JavaScript中将原始数据转换为音频

  22. 22

    如何在(L)ubuntu中将`rm`和`ra`音频文件转换为mp3?

  23. 23

    如何在JavaScript中将HTML文件的多个部分的打印排队?

  24. 24

    ffmpeg如何从mkv提取音频到ogg

  25. 25

    如何在javascript中将多个函数插入到数组中

  26. 26

    如何在javascript中调整音频文件的音量

  27. 27

    Javascript:如何加载更新的音频文件并播放

  28. 28

    如何在vba excel中将哔声保存到音频文件

  29. 29

    如何在 JavaScript 中将 0.023 舍入到 0.03

热门标签

归档