How to make array length equal to music duration

Question

Im using Angular 8 and Typescript

Problem: i want an array to have the same length as the music source of an audio tag, to enable comments that are synchronized with the intended location in the track. Similar as soundcloud.

Technical approach:

I have an audio tag with one audiofile in it. this got a duration i can access with this.audioplayer.duration

now i have an array, public comments = [] which i want to be the same length as the track duration

<div *ngFor="let comment of comments">
  </div>

to sync them, i tried

 ngAfterViewInit() {
this.comments.length= this.audioplayer.duration  }

but im getting invalid array length. Is there a way to make this work?

I'm inclined to close this issue as a duplicate of the other one unless you can articulate a meaningful difference between them. — jcalz, Sep 16 '20 at 20:03
this question is targeted at angular specifically, the other thread is general and not suitable to my problem — DuB loxx, Sep 16 '20 at 20:04
The general answer does answer your specific issue, though, right? `this.comments = new Array(this.audioplayer.duration)` or `this.comments = Array.from({length: this.audioplayer.duration})` or any of the other suggestions there. How, specifically, is the other answer not suitable? — jcalz, Sep 16 '20 at 20:06
The `duration` property returns a double-precision floating-point value, which means your duration could be `189.21` which should be rounded to a whole number. — Emiel Zuurbier, Sep 16 '20 at 20:12
this.comments = Array.from({length: this.audioplayer.duration}) this one worked, thread can be closed but may be still relevant for some due to specific issue — DuB loxx, Sep 16 '20 at 20:14

score 0 · Answer 1 · answered Sep 16 '20 at 20:03

0

You need to initialize the array with the correct amount of elements:

comments = new Array(this.audioplayer.duration);

answered Sep 16 '20 at 20:03

I wrestled a bear once.

22,983
19
69
116

score 0 · Answer 2 · answered Sep 16 '20 at 20:07

Even if you make an array the same music duration you don't get the thing that you want. Because as you see SoundCloud music bar UI there are a constant number of bars with different heights.

but if you want to know how you can get audio duration in angular all you need to do is making @ViewChild() of that audio tag and then in ngAfterViewInit() get the audio duration like this:

this.bars = new Array(this.audioplayer.duration);

How to make array length equal to music duration

2 Answers2