Dear ionic users,
I am completely new to coding and to ionic. Willing to reproduce an app, available at this link: How to Build a Simple Ionic 4 Audio Player - YouTube, I have some errors. Introducing the codes from this video until the minute 11:30, the app should show three buttons such as “skip-backward, pause, skip-forward”. However, my app shows me only two buttons and those without icons. How could I fix this issues?
Here you have the picture of the app with errors:
Here you have the html, ts, scss codes:
Thank you for solution !
Welcome to our forum. You can always update your question instead of adding a reply.
As for your issue, it didn’t find the skip-backward.svg and skip-forward.svg files.
Do you have those files?
Yes, it was the problem, I fixed it. In ionic 6 these icons have different names. Now, I have another issue. The toggleplayer button doesn’t appear in the app. Here you have the codes:
HTML Code:
<ion-footer *ngIf="activeTrack">
<ion-toolbar color="dark">
<ion-row>
<ion-col size="12" class="ion-text-center">
{{ activeTrack.name }}
</ion-col>
<ion-col size="12">
</ion-col>
<ion-col size="12" class="ion-text-center">
<ion-button fill="clear" (click)="prev()" color="light">
<ion-icon slot="icon-only" name="play-skip-back"></ion-icon>
</ion-button>
<ion-button fill="clear" (click)="togglePlayer(false)" *ngIf="!isPlaying" color="light">
<ion-icon slot="icon-only" name="play"></ion-icon>
</ion-button>
<ion-button fill="clear" (click)="togglePlayer(true)" *ngIf="!isPlaying" color="light">
<ion-icon slot="icon-only" name="pause"></ion-icon>
</ion-button>
<ion-button fill="clear" (click)="next()" color="light">
<ion-icon slot="icon-only" name="play-skip-forward"></ion-icon>
</ion-button>
TS code:
import { Howl } from 'howler';
import { Component } from '@angular/core';
export interface Track {name: string; path:string;}
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage { playlist: Track[] = [
{name: 'cand oceanele',
path: './assets/mp3/cand.oceanele.mp3'},
{name: 'Doamne vreau',
path: './assets/mp3/Doamne vreau.mp3'},
{name: 'zideste in mine',
path: './assets/mp3/zideste in mine.mp3'} ];
activeTrack: Track = null;
player: Howl = null;
isPlaying = false;
constructor() {}
start (track: Track) {
if (this.player) {
this.player.stop();
}
this.player = new Howl ({
src: [track.path],
onplay: () => {
this.isPlaying = true;
this.activeTrack = track;
},
onend: () => {console.log('onend'); }});
this.player.play();
}
togglePlayer(pause) {this.isPlaying = !pause;
if (pause) {this.player.pause(); } else {this.player.play();}}
next () {}
prev () {
let index = this.playlist.indexOf(this.activeTrack);
}
seek () {}
updateprogress () {}
}
The app image:
Thank you !
Welcome to ionic. first of all you get to know the ionic framework ui kit then it will be very easy to go ahead.
I would suggest adding the following options to the compilerOptions stanza of your tsconfig.json:
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
Specifically, strictNullChecks will flag things like:
activeTrack: Track = null;
…as the errors that they are. If a property can be null, its type should declare that explicitly:
activeTrack: Track | null = null;
…or, what would be better in this case IMHO:
activeTrack?: Track;
…which is equivalent to:
activeTrack: Track | undefined = undefined;
Next, I would recommend using an Angular-aware library for any dependencies you may have. Specifically, it appears that there is ngx-howler for your audio library. Generally speaking, you do not want to be typing the word new in your code. Angular has a powerful dependency injection system, and you should use it whenever possible.
All that being said, if you’re still reading, both your play and pause buttons have the same ngIf condition of !isPlaying, which is likely the cause of your problem.
