How to Get Progress Outside of Audio Component

[TimeTravelersHackedMe]

Hey, this isn't really an issue but I didn't know where to ask this...

How can I get the current audio progress outside of the currently playing audio component?

[arielfaur]

You could do that with a template variable or with the ViewChild API:

<audio-track #audio *ngFor="let track of myTracks"  [track]="track" (onFinish)="onTrackFinished($event)">
...
</audio-track>
<div>{{ audio.progress }}</div>

import { AudioTrackComponent } from 'ionic-audio';

@Component({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
  @ViewChild(AudioTrackComponent) audioTrack: AudioTrackComponent;

  ionViewDidLoad() {
     let progress: number = audioTrack.progress;
  }
}

Let me know if it works. The AudioTrackComponent class exposes all audio properties as public.

[tanvishah-syn]

Hi, @arielfaur I also want check audio is playing or not outside component scope. I have tried your above solution but I am getting an undefined object

My Code: home.html

<ion-content class="page-background" *ngFor="let track of myTracks">
    <ion-row class="htm-last-played">
        <marquee>{{currentTrack.title}}</marquee>
    </ion-row>
    <ion-row>
        <ion-col col-6 class="htm-audio-name">{{currentTrack.htmTitle}}</ion-col>
        <ion-col col-6 style="background-color: #FFD744">
            <ion-row>
                <ion-col col-3>
                    <button class="htm-background">
                        <ion-icon class="htm-icon-font" ios="ios-add" md="md-add"></ion-icon>
                    </button>
                </ion-col>
                <ion-col col-3>
                    <button class="htm-background">
                        <ion-icon class="htm-icon-font" ios="ios-remove" md="md-remove"></ion-icon>
                    </button>
                </ion-col>
                <ion-col col-3>
                    <button class="htm-background">
                        <ion-icon class="htm-icon-font" ios="ios-bookmark" md="md-bookmark"></ion-icon>
                    </button>
                </ion-col>
                <ion-col col-3>
                    <button class="htm-background">
                        <ion-icon class="htm-icon-font" ios="ios-star-outline" md="md-star-outline"></ion-icon>
                    </button>
                </ion-col>
            </ion-row>
        </ion-col>
    </ion-row>
    <div class="htm-audio-container">
        <ion-row>
            <ion-col>
                <button class="htm-background">
                    <ion-icon class="htm-icon-player" ios="ios-rewind" md="md-rewind"></ion-icon>
                </button>
            </ion-col>
            <ion-col *ngIf="showPlayButton">
                <button (click)="onPlayMusic(audio, track)" class="htm-background">
                    <ion-icon class="htm-icon-player" ios="ios-play" md="md-play"></ion-icon>
                </button>
            </ion-col>
            <ion-col *ngIf="!showPlayButton">
                <button class="htm-background" (click)="onPauseMusic(audio)">
                    <ion-icon class="htm-icon-player" ios="ios-pause" md="md-pause"></ion-icon>
                </button>
            </ion-col>
            <ion-col>
                <button class="htm-background">
                    <ion-icon class="htm-icon-player" ios="ios-fastforward" md="md-fastforward"></ion-icon>
                </button>
            </ion-col>
            <ion-col>
                <button (click)="onForward(audio)" class="htm-background">
                    <ion-icon class="htm-icon-player" ios="ios-return-right" md="md-return-right"></ion-icon>
                    30S
                </button>
            </ion-col>
            <ion-col>
                <button (click)="onRewind(audio)" class="htm-background">
                    <ion-icon class="htm-icon-player" ios="ios-return-left" md="md-return-left"></ion-icon>
                    30S
                </button>
            </ion-col>
        </ion-row>
        <audio-track #audio [autoplay]="true" [track]="currentTrack" (onFinish)="onTrackFinished($event)">
            <ion-row>
                <ion-spinner *ngIf="audio.isPlaying && !audio.progress > 0"></ion-spinner>
            </ion-row>
            <ion-row>
                <ion-col col-2 class="htm-time htm-col-item">
                    <time>
                        <span *ngIf="audio" [style.opacity]="audio.duration > 0 ? 1 : 0">
                        {{audio.progress | audioTime}}
                        </span>
                    </time>
                </ion-col>
                <ion-col col-8 class="htm-col-item">
                    <ion-item class="htm-background htm-col-item" no-lines>
                        <ion-range #seeker [(ngModel)]="audio.progress" color="dark" [min]="0"
                                   [max]="audio ? audio.duration:0"
                                   (ngModelChange)="changeSeekTo(audio, seeker.value)"></ion-range>
                    </ion-item>
                </ion-col>
                <ion-col col-2 class="htm-time htm-col-item">
                    <time>
                        <span *ngIf="audio" [style.opacity]="audio.duration > 0 ? 1 : 0">
                        {{audio.duration | audioTime}}
                        </span>
                    </time>
                </ion-col>
            </ion-row>
        </audio-track>
    </div>
</ion-content>

[arielfaur]

@tanuShah Where are you getting the undefined object?

[leoohee]

192

[rajm]

@arielfaur I am getting viewChild is undefined error...

[rajm]

sorry got it fixed... i did not import viewchild from the angular core... after import it works fine.