search

mudigal-technologies / ngx-audio-player

A library for playing audio using HTML 5 audio for Angular 7/8/9/10/11/12/13/14/15/16.
https://mudigal-technologies.github.io/ngx-audio-player/
MIT License
87 stars 68 forks source link

Icons not loading at all #36

Closed Ant-Pinto closed 4 years ago

Ant-Pinto commented 4 years ago

Hello all!

This player is super neat and I would like to use it in a project I'm working on, but for some reason I can't get the player's icons to load. Functionality and all that is there mostly, just the icons keep being stuck on a loading animation, transitioning between a '?' and '!'. I've tried downgrading fortawesome versions & player version to no avail, same issue.

Here's what I'm talking about: image

Clicking the ? ! icon will play and pause the audio, but the icons never load.

Some relevant info that might help debug:

package.json: (trimmed down to relevant packages)

"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/material": "^8.2.3",
"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"font-awesome": "^4.7.0", -- (This is used elsewhere in our app, not sure if this is affecting the player.)
"ngx-audio-player": "^8.0.2",

Usage:

HTML - 

<mat-basic-audio-player [audioUrl]="voicemailAudioUrl" [title]="msbapTitle"
[displayTitle]="msbapDisplayTitle" [displayVolumeControls]="false"></mat-basic-audio-player>

TS - (Testing with example audio from demo)

voicemailAudioUrl = 'https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Broke_For_Free/Directionless_EP/Broke_For_Free_-_01_-_Night_Owl.mp3';
msaapDisplayVolumeControls = true;
msbapDisplayTitle = false;
vmudigal commented 4 years ago

If you are using angular 8, try setting "@fortawesome/angular-fontawesome" version to ~0.4.0. Incase if you are using angular 9, you could use "@fortawesome/angular-fontawesome" version ^0.4.0 which is 0.6.0 (the latest as of today) but make sure to use ngx-audio-player@9.0.3.

Hope this helps.

Ant-Pinto commented 4 years ago

Thanks for the info! I actually decided to just use the simple basic html audio player because I couldn't find a solution to the problem in time, but maybe this'll help someone else in the future!