The 'split' property is not found in the type 'string | ArrayBuffer'. The property 'split' is not available in the type 'ArrayBuffer'.ts(2339)

"I need assistance with splitting a base64 audio file. Specifically, I want to extract only the audio data without the 'data:audio/wav;base64' text included. Can someone provide the correct code for this?"

“This code snippet is intended for use with Angular 7.”

 
const reader = new FileReader();
reader.readAsDataURL(data.blob);
let base64Audio ;
reader.onloadend = function() {
  const base64data = reader.result;
  console.log(base64data);

 base64Audio = base64data.split(' , ')[1];
  console.log(base64Audio);

"My expected output is the extracted text without any additional content."

Answer №1

const audioReader = new FileReader();
audioReader.readAsDataURL(audioBlob);
let encodedAudio ;
audioReader.onloadend = function() {
const base64EncodedData = audioReader.result as string;
console.log(base64EncodedData);
encodedAudio = base64EncodedData.replace("data:audio/wav;base64,", "");
console.log(encodedAudio);

Answer №2

For optimal results, consider using .slice() prior to using .split():

this.urlPath = this.urlpath.slice(0, 34);

By doing this, you can extract the necessary information while eliminating the unnecessary. Then, proceed to obtain the desired array from the sliced portion, followed by the split operation.

this.urlname = this.response.responseList[0].FileName;
this.urlname = this.urlname.split(".", 1);

In this TypeScript example, I utilized slice before split to address a similar issue... Full Example link https://stackblitz.com/edit/angular-jyjs3v

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

Passing variable values in Angular 6

Is there a way to transfer the value of a variable from Component1 to a variable in Component2 without using any template binding? I have two components, Header and Footer. In the Header component, there is a boolean variable called test that I need to pa ...

When using Konva getContext('2d') to retrieve image data, the data returned may be incorrect when viewing the image at varying resolutions and levels of zoom

Recently, I began using Konva and everything was functioning properly. However, when I opened the same HTML page on a 1920x1080 monitor with 150% zoom, I noticed that the data points array was incorrect at this resolution. layer.getContext('2d') ...

Exploring the functionalities of R.pick in TypeScript

Recently, I attempted the following code snippet: import R from 'ramda' import fs from 'fs' import path from 'path' import {promisify} from 'util' const readFile = promisify(fs.readFile) export async function disc ...

Error Page Reappeared After Refresh

I have a backend Spring Boot Application and I am using Angular 2 Single Page Application for the frontend. When I navigate to a specific route, such as localhost:8080/getAccounts, and then refresh the page, I encounter the Whitelabel Error Page. However, ...

I incorporated a CSS file from another HTML document. What do you think about that?

In my work with Ionic 3 and angular 4, each HTML file is accompanied by its own CSS file. There are times when I reference a class in one HTML file that is defined in another HTML file. I have observed that this CSS class gets injected into the main.js He ...

Angular 2 and TypeScript: Mastering Checkbox Data Binding

Below is the HTML view in which user roles are checked. I want to bind a table of modified user roles using the actualizeRoles() method. How can I achieve this? <md-accordion class="example-headers-align"> <md-expansion-panel hideToggle=" ...

Error in Typescript: Property 'timeLog' is not recognized on type 'Console'

ERROR in src/app/utils/indicator-drawer.utils.ts:119:25 - error TS2339: Property 'timeLog' does not exist on type 'Console'. 119 console.timeLog("drawing") I am currently working with Typescript and Angular. I have ...

Tips on deactivating a div when a checkbox is selected

I am currently working with a checkbox element in my code: <md-checkbox checked.bind="addEventCommand.allDay" change.delegate="allday()">All Day</md-checkbox> When the above checkbox is true, I want to disable the following ...

Sass encountered an issue when trying to import using the "~" symbol from the node_modules directory

I am currently developing a single-page web application using Angular 6, and I recently integrated the ngx-toast library into my project. However, I encountered an issue when trying to load the libraries by adding the following Sass code with the "~" symb ...

Terminate all active service requests and retrieve only the outcomes from the most recent request

Is there a way to cancel ongoing requests and only retrieve the result of the latest request triggered by my service on the backend? Here's my current code: this.vehiclesService.getVehiclesByPage(currentState).subscribe(success => { this.c ...

Steps for determining if a string is compatible with a user-defined type in Typescript

Just getting started with Typescript and currently working on a sudoku game. Here are the types and interface I have set up: export type GridCellValue = 1|2|3|4|5|6|7|8|9; export interface GridCell { readonly: boolean, value: GridCellValue|null, } ex ...

Angular - Automatically blur input field in a Reactive Form

I'm encountering a strange problem. Check out the demo .ts import { Component } from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './a ...

Angular: Refresh Mat-Table data following any changes

I'm currently working with a Mat-table that has expandable rows, each containing an update functionality for the data. While the POST and GET requests are functioning properly, I encounter an issue where I need to reload the page in order to see the u ...

Problem with Angular2, NodeJS, and Passport Integration

At the moment, my Angular2 front-end is running on localhost:3000 while the NodeJS back-end (using KrakenJS) is running on localhost:8000. When I input the credentials and make a call to the this.http.post('http://localhost:8000/login', body, { h ...

In TypeScript, the function is failing to retrieve the complete array value

I'm facing an issue with a program that is supposed to piece together all the letters, but it's not functioning correctly. I've tried using the debugger, but it doesn't display any errors. Here's the code snippet: var phrase = [ &a ...

Global Sass variables for responsive styling in Angular

I'm struggling to set up a global sass variable that defines the size of phones and tablets. Despite my efforts, I can't seem to successfully import it into my sass stylesheets. In my angular.json file: "stylePreprocessorOptions": { ...

"TypeScript function returning a boolean value upon completion of a resolved promise

When working on a promise that returns a boolean in TypeScript, I encountered an error message that says: A 'get' accessor must return a value. The code snippet causing the issue is as follows: get tokenValid(): boolean { // Check if curre ...

Modify the code to use a BehaviorSubject subscribing to an Observable

Currently, I am in the process of learning Angular2 and RxJS by studying someone else's application. The application consists of two modules: asObservable.ts export function asObservable(subject: Subject) { return new Observable(fn => subject ...

How to define an index signature in Typescript that includes both mandatory and optional keys

I am on a quest to discover a more refined approach for creating a type that permits certain keys of its index signature to be optional. Perhaps this is a scenario where generics would shine, but I have yet to unlock the solution. At present, my construc ...

Combining marker, circle, and polygon layers within an Angular 5 environment

I am working on a project where I have an array of places that are being displayed in both a table and a map. Each element in the table is represented by a marker, and either a circle or polygon. When an element is selected from the table, the marker icon ...