I was trying to use ng-waveform
in my ts file
included
import { ITimeUpdateEvent, NgWaveformComponent, IRegionPositions } from 'ng-waveform';
export class soundComponent implements OnInit {
counter: number = 0;
@ViewChild('waveform', { static: false }) waveform: NgWaveformComponent;
src_s='http://127.0.0.1:8000/storage/uploads/83316135.wav';
play = false;
isLoaded = false;
trackLoadTime: number;
renderingTime: number;
duration: number;
currentTime: ITimeUpdateEvent;
regionPositions: IRegionPositions;
isSrcError = false;
isAudioQueried = false;
isRegionCtrl = true;
regionStartCtrl = 0;
regionEndCtrl =80.08;
useRegion = true;
src: string;
onPlayButtonClick() {
this.waveform.play();
}
onPauseButtonClick() {
this.waveform.pause();
}
onTrackLoaded(time: number) {
this.trackLoadTime = time;
}
onTrackRendered(time: number) {
this.renderingTime = time;
this.isLoaded = true;
}
onDurationChange(duration: number) {
this.duration = duration;
}
onTimeUpdate(event: ITimeUpdateEvent) {
this.currentTime = event;
}
onPaused() {
this.play = false;
}
onRegionChange(region: IRegionPositions) {
this.regionPositions = region;
this.regionStartCtrl=this.regionPositions.start;
this.regionEndCtrl=this.regionPositions.end;
}
html Component
added
<ng-waveform #waveform class="waveform"
[src]="src_s"
[height]="150"
[useRegion]="true"
backgroundColor="#d3d3d3"
regionBackgroundColor="rgba(255, 255, 255, 0.7)"
regionStartStickColor="#21f032"
regionEndStickColor="red"
regionTextColor="#09417e"
[withRegionLabels]="true"
waveColor="#ff11ff"
(trackLoaded)="onTrackLoaded($event)"
(rendered)="onTrackRendered($event)"
(durationChange)="onDurationChange($event)"
(timeUpdate)="onTimeUpdate($event)"
(paused)="onPaused()"
(regionChange)="onRegionChange($event)"
>
but getting this error:
Access to XMLHttpRequest at
‘http://127.0.0.1:8000/storage/uploads/83316135.wav’ from origin
‘http://localhost:4200’ has been blocked by CORS policy: Response to
preflight request doesn’t pass access control check: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.
Any solution to resolve this issue Thanks