如何从Spring启动应用程序播放音频blob

Question

我在angular中存储音频blob(录制的声音)，然后我调用spring boot API将其存储在azure blob存储中，如下所示:

submit(){
const blob = this.audioRecording.getblob();
this.blobOutgoing = new FormData(); 
this.blobOutgoing.append('file', blob);
this.blobOutgoing.append('name', this.name);
this.blobOutgoing.append('email', this.email);
this.blobOutgoing.append('uid', this.uid);
this.pronunciationAPIService.saveEmployeeNameAlternate(this.blobOutgoing)
.subscribe((response: any) => {
console.log(response);
})
}
public  void insertEmpoyeeRecord(Employee employee) {
try {
Statement stmt = getStatement();
System.out.println("Connected to the YugabyteDB Cluster successfully.");
// stmt.execute("DROP TABLE IF EXISTS employee");
/*stmt.execute("CREATE TABLE IF NOT EXISTS employee" +
"  (id int primary key, name varchar, age int, language text)");*/
// System.out.println("Created table employee");
String insertStr = "INSERT INTO employees.employees  VALUES ('"+employee.getUid()+"','"+employee.getEmail()+"','"+employee.getName()+"','"+employee.getUid()+"')";
String deleteStr = "DELETE FROM employees.employees WHERE email='"+employee.getEmail()+"' or uid='"+employee.getUid()+"'";
stmt.execute(deleteStr);
stmt.execute(insertStr);
----------> blobService.uploadFile(employee.getMultipartFile(), employee.getUid());   <----------------------------------
System.out.println("EXEC: " + insertStr);
ResultSet rs = stmt.executeQuery("select * from employees.employees");
while (rs.next()) {
System.out.println(String.format("Query returned: uid = %s, email = %s, name = %s, blob = %s",
rs.getString("uid"), rs.getString("email"), rs.getString("name"), rs.getString("audio")));
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
public void uploadFile(MultipartFile multipartFile, String audioFilenameRequest){
// String localFolderPath = "C:\Users\erman\Downloads\audiofolder\";
try {
byte[] bytes = multipartFile.getBytes();
System.out.println("lenght:: " + bytes.length);
String audioFileName = audioFilenameRequest;
CloudBlobContainer containerReference = getCloudBlobContainer();
//Getting a blob reference
CloudBlockBlob blockBlobReference = containerReference.getBlockBlobReference(audioFileName);

//Creating blob and uploading file to it
//System.out.println("Uploading the sample file, Absolute path: "+sourceFile.getAbsolutePath() );
blockBlobReference.uploadFromByteArray(bytes,0,bytes.length);
System.out.println("upload to Azure cloud blob is done!!!!");
// blockBlobReference.upload
/* Path path = Paths.get(localFolderPath + multipartFile.getOriginalFilename());
Files.write(path,bytes);*/
} catch (IOException e) {
e.printStackTrace();
} catch (URISyntaxException e) {
e.printStackTrace();
} catch (InvalidKeyException e) {
e.printStackTrace();
} catch (StorageException e) {
e.printStackTrace();
}
}

然后我尝试通过调用另一个Spring启动API从Angular检索:

playAudioFromBlob(){
this.pronunciationAPIService
.pronounceName(this.employee)
.subscribe((response: Array<Employee>) => {
console.log(response);
response.forEach( (employee) => {
let blob = new Blob(employee.blobByte, {type: "audio/webm"});
console.log(employee.blob);
const audioURL = URL.createObjectURL(blob);
let audio = new Audio(audioURL)
audio.controls = true;
audio.play();
})
});
}
public List<Employee> searchEmployeeByUid(String uid){
Employee employee = null;
try {
System.out.println("Connected to the YugabyteDB Cluster successfully.");
Statement stmt = getStatement();
String selectStr = "SELECT uid,email,name,audio FROM employees.employees WHERE uid='"+uid+"'";
stmt.execute(selectStr);
System.out.println("EXEC: " + selectStr);
ResultSet rs = stmt.executeQuery(selectStr);
while (rs.next()) {
employee = new Employee();
employee.setUid(rs.getString("uid"));
employee.setEmail(rs.getString("email"));
employee.setName(rs.getString("name"));
employee.setBlob(rs.getString("audio"));
}
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
byte[] blob = blobService.downloadFile(employee.getBlob());
employee.setBlobByte(blob);
return  employee;
}
public byte[] downloadFile(String audioFileName) {
File downloadedFile = null;
byte[] audioByteArray = new byte[472179];
try {
// byte[] bytes = multipartFile.getBytes();
// String audioFileName = multipartFile.getOriginalFilename();
CloudBlobContainer containerReference = getCloudBlobContainer();
//Getting a blob reference
CloudBlockBlob blockBlobReference = containerReference.getBlockBlobReference(audioFileName);
// downloadedFile = new File(audioFileName);
//byte [] b = new byte[472179];
blockBlobReference.downloadToByteArray(audioByteArray,0);
System.out.println("download from Azure cloud blob is done!!!!:: Size : " + audioByteArray.length);

} catch (URISyntaxException e) {
e.printStackTrace();
} catch (InvalidKeyException e) {
e.printStackTrace();
} catch (StorageException e) {
e.printStackTrace();
}
return audioByteArray;
}
public class Employee {
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUid() {
return uid;
}
public void setUid(String uid) {
this.uid = uid;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getBlob() {
return blob;
}
public void setBlob(String blob) {
this.blob = blob;
}
public MultipartFile getMultipartFile() {
return blobOutgoing;
}
public void setMultipartFile(MultipartFile multipartFile) {
this.blobOutgoing = multipartFile;
}
private String name;
private String uid;
private String email;
private String blob;
private MultipartFile blobOutgoing;
public byte[] getBlobByte() {
return blobByte;
}
public void setBlobByte(byte[] blobByte) {
this.blobByte = blobByte;
}
private byte[] blobByte;
}

问题是当转换字节[]流到blob在角我得到错误:

Failed to construct 'Blob': The provided value cannot be converted to a sequence

我想我得到这个问题，因为我没有正确地写作或阅读blob。我在Angular中使用ng-audio-recorder来录制音频。Ng-audio-recorder在audio webm中构建blob

update:也许一个更简单的问题是如何在angular中播放multipartfile中的byte[]流?

Answer 1

初始参数(Parameter)必须按顺序呈现

let blob = new Blob(employee.blobByte, {type: "audio/webm"});  console.log(employee.blob);

用下面的替换

let blob=new Blob([employee.blobByte] ,{type: "audio/webm"});  console.log(employee.blob);