What is the best way to integrate a voice recording library into the most recent version of Angular?

I am currently attempting to utilize a library for recording voice audio in angular.

https://github.com/killroywashere/ng-audio-recorder

Below is the code snippet for using it:

import { NgAudioRecorderService, OutputFormat } from 'ng-audio-recorder';
    ...

    @Component({...})
    export class AppComponent {

        constructor(private audioRecorderService: NgAudioRecorderService) {
        
            this.audioRecorderService.recorderError.subscribe(recorderErrorCase => {
                // Handle Error
            })
        }
        
        startRecording() {
            this.audioRecorderService.startRecording();
        }
        
        stopRecording() {
             this.audioRecorderService.stopRecording(outputFormat).then((output) => {
                // do post output steps
             }).catch(errorCase => {
                 // Handle Error
             });
        }
    }
    

The issue arises as it fails to specify the required outputFormat and the process of playing back the recorded audio. Could someone please provide guidance on this matter?

Answer №1

To specify the format of the output, use the following code snippet:

onStopRecording() {
        this.busyRecording = false;
        this.recordingStarted = false;
        let chosenFormat = OutputFormat.WEBM_BLOB;
 
        this.audioRecorderService.stopRecording(chosenFormat).then((result: Blob) => {
            this.blobData = result;

            this.createPlayer(result);
         }).catch(error => {
             this.toast.error(error);
         });

    }

It's important to note that this.blobData is a type of Blob.

It is worth mentioning that we explicitly set the output as a Blob. The available formats are WEBM_BLOB or WEBM_BLOB_URL.

If you encounter issues with ng-audio-recorder.service.d.ts due to changing the output type, consider modifying it to accept BLOB. Alternatively, instruct Angular to overlook such errors if necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am struggling with setting the data received from the backend to an array variable in Angular

Looking for assistance with my interface and service files: [Click here to view the service file code image](https://i.sstatic.net/2f0bzkDM.png) Upon executing the request to retrieve data from the backend and assign it to the variable 'users', ...

Create HTML content, convert it into a Word document, and enable users to download it onto their device

Can someone please assist me in using html-docx-js with node.js? I found information on the npm site (https://www.npmjs.com/package/html-docx-js) regarding this. Below is the code snippet provided: var converted = htmlDocx.asBlob(content); saveAs(convert ...

Determine in Typescript if a value is a string or not

In my code, I have a component: export type InputData = string | number | null; interface InputData { data?: string | number | null; validate: boolean; } const App: React.FC<InputData> = ({ data = '', validate = true, }) => ...

Is there a simple way to determine whether the operating system I am currently using is Windows or Mac when running npm scripts?

For a collaborative development project on a Mac environment, it is necessary to set chmod + x.usky /pre-commit for the projects. However, there may be individuals who intentionally do not set this in order to submit incorrect code to the repository I und ...

Passing a FormGroup from an Angular 2 component as a parameter

I have a FormGroup that contains a SubFormGroup: sub formGroup initialize: this.fg=new FormGroup({ name: new FormControl(), abcFg: new FormGroup({ aaa: new FormControl(), bbb: new FormControl() }) }) ...

Blocking JavaScript execution and the message queue

Questioning the possibility of a timeout function with 0ms delay setTimeout(function, 0) being triggered after a loop execution block or will the encompassing function always complete first? setTimeout(function(){ //something in here }, 0); function myFu ...

Utilizing Angular CDK to link several drop zones together using the cdkDropListConnectedTo directive

Currently in the process of designing a basic board interface with swim lanes similar to Jira swimlane or trello boards https://i.sstatic.net/7MBvm.png The red lines indicate the current flow The blue lines represent the flow that I aim to implement The ...

What's the best way to show the calendar date in the mm-dd-yyyy format within an input search tag in Angular

I have implemented the <input class="input-group1 search" id="to" placeholder="dd-mm-yyyy" [(ngModel)]="toDate" value="" name="dp3" type="date"> in my code, which currently di ...

Can you explain the rule known as the "next-line" in TypeScript?

No code examples are available for the specific scenario described below: "next-line": [ true, "check-catch", "check-finally", "check-else", "check-open-brace", "check-whitespace" ], ...

Is there a way to disable the ability for a logged-in user to like or comment on their own post?

I'm currently in the process of developing a mini social media API and I want to implement a feature where users can like and comment on posts made by others, but not on their own posts. However, I've encountered an issue with my current like sy ...

Resolving the issue of missing properties from type in a generic object - A step-by-step guide

Imagine a scenario where there is a library that exposes a `run` function as shown below: runner.ts export type Parameters = { [key: string]: string }; type runner = (args: Parameters) => void; export default function run(fn: runner, params: Parameter ...

Encountering the "Maximum Update Depth Exceeded" error in React Typescript with hooks

I encountered this error: Uncaught Error: Maximum update depth exceeded. It seems to be related to calling setState multiple times within componentWillUpdate or componentDidUpdate. React limits nested updates to prevent infinite loops. I am unsure of what ...

"Error: Unfinished string literal encountered" occurring in a TypeScript app.component.ts file in NativeScript

I've been trying to learn NativeScript through a tutorial, but I keep encountering errors. Here is an excerpt from my app.component.ts file: import { Component } from '@angular/core'; @Component ({ selector: 'my-app', temp ...

Setting up Node and NPM on Laradock can streamline your development

After carefully following the steps outlined in the documentation to enable NPM on my workspace, I encountered an issue. Upon running docker-compose exec workspace bash and checking for node -v, it was not installed as expected. The document does not pro ...

Unable to assign a default value to an Angular input field

My web page utilizes an Angular form to display user data fetched from a MongoDB database. The information includes the user's name, phone number, email, etc. I want the default value of the input field to be set as the placeholder text, allowing user ...

Error Encountered: Visual Studio cannot locate the file 'COMPUTE_PATHS_ONLY.ts' during the build process

Upon fixing my visual studio 2015, an error was thrown that I haven't encountered before. Error Build: File 'COMPUTE_PATHS_ONLY.ts' not found. I did not add COMPUTE_PATHS_ONLY.ts to my Git repository. The other files in the repo rema ...

Show an Angular Mat Card beneath the Input Field and position it on top of all other div elements

I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements. The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the ca ...

declare wrong TypeScript type in external library

I am currently using winston 3.0 in combination with the @types/winston types. Unfortunately, it seems that these types are not completely compatible, leading to an error in the types that I am unsure how to rectify. Below is the code snippet in question: ...

The mainBundlePath in the node package is coming up as Null

I am encountering an issue with the react-native-coreml package when trying to initialize my app. My goal is to integrate a CoreML package into my React Native project using this package. I am currently working in EXPO environment. I am unable to launch ...

Enhancing Visual Studio 2017 with Docker Compatibility for Angular Applications

What is preventing the angular support from being available in VS 2017? Is there a missing component that is needed? https://i.stack.imgur.com/asJhO.png ...