how to playback audio blob from Spring boot App

Question

I am storing an audio blob(recorded voice) in angular and then I am calling a spring boot API to store it in azure blob storage as so:

  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();
    }
}

And then I try to retrieve from Angular by calling another Spring boot API:

  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;
}

The problem is when converting the byte[] stream to a blob in angular I get the error:

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

I think I am getting this issue because I am not properly writing or reading the blob. I use ng-audio-recorder for the audio recordings in Angular. ng-audio-recorder builds the blob in audio webm

update: perhaps a more simplified question is how can you play back the byte[] stream in multipartfile in angular?