录制音频文件,然后通过html <form>将其发布到java应用程序

时间:2017-06-14 22:53:47

标签: javascript java jquery html

我有以下问题。虽然我可以在这里录制音频文件并播放但不提供表单提交的输入... 我的代码来自视图:

<div class="col-lg-1" align="center"> 
<p> 
 <button class="btn btn-primary btn-lg"id=startRecord>record</button> 
 <button class="btn btn-primary btn-lg" id=stopRecorddisabled>stop</button>
</p> 
<p> 
 <audio id=recordedAudio></audio> 
 <a id=audioDownload></a> 
</p>
</div> 
<!-- Buttons --> 
<div class="form-group"> 
<!-- Buttons --> 
 <div class="col-lg-offset-2 col-lg-9">
  <button type="submit" class="btn btn-primary">Hinzufügen</button> 
  <a href="http://localhost:9000/">
   <button type="button" class="btn btn-default">Abbrechen</button> 
  </a> 
 </div>
</div>
<script>
navigator.mediaDevices.getUserMedia({audio:true})
 .then(stream => {
  rec = new MediaRecorder(stream);
  rec.ondataavailable = e => {
  audioChunks.push(e.data);
  if (rec.state == "inactive"){
   var blob = new Blob(audioChunks,{type:'audio/webm'});
   recordedAudio.src = URL.createObjectURL(blob);
   recordedAudio.controls=true;
   recordedAudio.autoplay=false;
   audioDownload.href = recordedAudio.src;
   audioDownload.download = 'hallo.mp3';
   audioDownload.innerHTML = 'download';
   $("#base64").attr("value", recordedAudio.valueOf().src);
   $("#blob").attr("value", recordedAudio.valueOf().src);
  }
 }
})
.catch(e=>console.log(e));
 startRecord.onclick = e => {
 startRecord.disabled = true;
 stopRecord.disabled=false;
 audioChunks = [];
 rec.start();
}
 stopRecord.onclick = e => {
 startRecord.disabled = false;
 stopRecord.disabled=true;
 rec.stop();
}
</script>
<form action="upload" method="post">
 <input id="blob" class="versteckt" name="datei" value="">
 <input type="submit" value="senden" href="http://localhost:9000/">
 <input name="base64" type="file" accept="*/*" value="">
</form>

这是我的应用程序(Java)

DynamicForm dynamicForm = Form.form().bindFromRequest();
String string = dynamicForm.get("datei");

String b64 = dynamicForm.get("base64");
System.out.println("\nb64Inhalt : " + b64 + "\n\n");

String[] strsplited = string.split("blob:http://localhost:9000/");
string = strsplited[1];
System.out.println("\nstringInhalt : " + string);
try {
    java.security.SecureRandom random = new java.security.SecureRandom();
    String newFileName = new BigInteger(130, random).toString(32);
    byte[] data = Base64.getDecoder().decode(b64);
    File dest = new File("/Users/Patrick-Sojka/Desktop/", newFileName + ".mp3");
    FileUtils.writeByteArrayToFile(dest, data);
    System.out.println("Anzahl von Bytes empfangen: " + data.length);
    System.out.println("Erstelle neue Datei :" + newFileName + ".mp3");
} catch (IOException e) {
  e.getMessage();
}

如何让它下载可播放文件/或将其传递给Java模型?

0 个答案:

没有答案