mudigal-technologies / ngx-audio-player Goto Github PK

This error comes after Angular 9 update. in angular 8 it was working fine.

ERROR in ngx-audio-player/ngx-audio-player.ts(27,40): Error during template compile of 'NgxAudioPlayerModule'
Could not resolve @fortawesome/angular-fontawesome relative to [object Object]..

I am using the "Advanced Player" and when I push a new track to the msaapPlaylist, the playlist <table> does not get updated. I think this is a bug.

Also, is there a way to get the index of the current song being currently played? maybe it would be great if you could expose AudioPlayerService

1. [email protected]

I have installed all package but it still giving me error.

Is there any way to allow this to be smaller than ~300px? Around that point the player overruns other items on the page instead of being responsive.

Edit: I made a false statement about the volume button. It looked like it was overflowing but it was the effect of the whole player overflowing its bounding area.

I'm building msaapPlaylist with array.push, but I get the cannot read property 'title' of undefined error.
If I leave the track hard coded like it is in the example, it works fine. (not gonna cut it)

• Feature request

Can it be possible to pass extra action buttons like download track, download playlist. It would be helpful if provided so that user can download the file directly.

The player is working but there is no styles. The documentation is horrible.

https://monosnap.com/file/LvHvhphA0Sck570ZzCGPzsIVg81LAv

First, this is a great audio player for Angular!
But, is it possible to implement the repeat function?
Thanks!

Hi,
Using this lib version 9.1.0 in Angular version 9.0.0, the ended event not fired when the player finish playing.

Test done on Chrome and FireFox browsers, *.wav and *.mp3 formats.

<mat-basic-audio-player *ngIf="currentMsg.isAudioCall" [audioUrl]="currentMsg.rawData"
                        [title]="'Audio Message'" [autoPlay]="true"
                        (ended)="playAudioFileEnded($event)"></mat-basic-audio-player>

Thanks for developing this component.

I'm using your ngx-audio-player for streaming audio from URL.
The player is working fine. I need to know how to add authorized token to header for the URL.
This is to stream the audio file which is the response from an API which is authorized.

So it would be great if you address this issue.

I need to implement multiple instances of the basic audio player in a single page, when one audio is playing and I click on another audio player, rest of the audio player should stop playing. How do I achieve this?

After importing NgxAudioPlayerModule to my shared.module.ts, Angular throws this error:

core.js:5847 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

It seems as though it might be conflicting with one of the other modules already imported into shared.module.ts?

imports: [ CommonModule, MaterialModule, ReactiveFormsModule, RouterModule, ImageCropperModule, NgxAudioPlayerModule ]

Thanks for developing this component.

I'm using your ngx-audio-player for streaming audio from url.
The player is working fine but the end time displayed looks like this (-ty:aN).
I think this is because the stream doesn't contain end time.

So it would be great if you consider the situation when the stream url is endless.

Thanks.

Hi and thanks for this cool npm. Love it, and works brilliant on chrome desktop.
But it doesn't play on mobile chrome browers on my phone or tablet. The play button does not appear at all, though the rest of the UI is there.

It seems that the current demo audio files that are used may be pirated which may raise legal concerns.

As a solution to this, I suggest that royalty free music should be used instead from one of the following sources:

• Ben Sound: https://www.bensound.com/royalty-free-music
• Free Music Archive: https://freemusicarchive.org/

I think the volume control present is for mute/ unmute audio. But can we have a volume control for adjusting volume controls as well?

I need a way to detect the current playing song in the advanced player because I want to show it in a different component other than the player title. This just cares about style.

In angular 9 i'm having this issue

On iOS, the loading spinner just spins continuously and the audio can never be played. It works fine on Windows in multiple browsers, but on iOS it never loads using either Safari or Chrome browser.

I am using the and the indicator of the missing seconds updates:

• every time I press play (random values like "-11:98");
• Not every seconds (something like 1 time every 5 sec).
  The console is clear but to me it seems that there's some error that is bugging all the player.

Here is my package.json (the relevant part):
"@angular/material": "^8.2.2",
"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-solid-svg-icons": "^5.11.2",

How can I avoid the CSS CDN in this project is affecting my site style.

DOMException: play() failed because the user didn't interact with the document first.
I faced error in auto play error .
<mat-basic-audio-player [audioUrl]="msbapAudioUrl" [title]="msbapTitle" [autoPlay]="true" muted="muted" (ended)="onEnded($event)" [displayTitle]="msbapDisplayTitle"
[displayVolumeControls]="msaapDisplayVolumeControls" [ngClass]="{ 'hiddenControl': isControl == false } ">

It would be great if the basic player had some form of volume control for users to interact with.

Hello
how can i put to automatically start the audio?

@vmudigal Hi!
I have a project of learning management in which I made tutorials ( there are lessons in the tutorial ). Admin is uploading the audio in lesson and the student would listen that audio. I am going to enforce my students to listen full audio lesson before navigating to the next one so I need the feature to know if the audio is finished or not. If there would be the event that will be trigered on finishing the audio, that would handle my scenario. If the player emits percentage of audio being played that would be great as well.
Seeking for your reply.
Thanks.

Hi there,

This is a feature request.

First, thank you for this library!

I'd like to be able to use the "ended" event at the end of a basic audio stream, like in:

Ended event
Can i Use

The API the library provides doesn't seem to expose this one.

Would be great to be able to have this event as an output.

I am getting an error when I have two instances of mat-advanced-audio-player per page. When one gets loaded after another one, the first one's data such as Title and Link get over rode.

Any idea why this would happen, or how to fix it?

Hi,

I was wondering if the player can play an audio retrieved from URL automatically when ready?

My Setup:

1. ngx-audio-player is enclosed inside a parent div which is by default. (visibility:hidden)

2. I have created a custom "Play" button on home.component.html and when the user clicks it, the audioUrl is set to a URL with audio file.

Problem:
So, once the Url is set, I would like the audio to start playback automatically so I can hide the player in plain sight to the user.

Code:

HTML

<div id="players" style="visibility:hidden">
      <div class="field">
        <div class="control">
        <!-- `sampleSrc` is my variable. -->
          <mat-basic-audio-player [audioUrl]="sampleSrc" autoplay></mat-basic-audio-player>
        </div>
      </div>
</div>

TS

playSample() {
    // set the sample url for the file.
    this.sampleSrc = 'http://www.example.com/audio.mp3';
    // need to play audio now!
}

Currently, the initial media request to populate the SRC url is triggered on page load. HTML Audio Element has a function preload="none" which prevents this. I am trying to display many audio play buttons in a table and would prefer they not automatically all populate.
Providing a comparable preload="none" would allow me to use this in my project, thanks.

the duration of the player include minus (-) sign in front of it.

I want to hide or disable moving forward and backward. How can I do?

I hided some buttons like forward button and backward button, and all was working fine, but when i updated the version of fontawsome to the last version 5, the icon not showing correctly, i tried updating and reinstalling ngx-audio-player, but didn't solve it, any help will be appreciated

If you hide the playlist and then try to skip a song, an exception is thrown.

I found this library very useful however when I started the implementation in my application I lost how to implement the play action on click of URL dynamically.

Use case

I have multiple cards of some information like (songName, songURL, scope, rating) like

{
 "songName":"The Dark Kight Theme",
 "songURL":"http://oliverspost.com/Batman%20The%20Dark%20Knight%20Theme%20-%20Hans%20Zimmer.mp3",
 "scope":"Online",
 "Rating":4.5
}

I have multiple cards like this and a play button on it. When I click it I want to initiate the play on the ngx-audio-player component. [SCREENSHOT ATTACHED]
Any help and ideas will be appreciated.

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:

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;

Wonderful audio player for ng7+
But I got some errors after finishing build --prod then,

this.bindPlayerEvent is not a function
at e.ngOnInit ........

How can I fix this issue?

Is it possible to get the current played song of the player? I want to add an image above the player but it should switch when another song is played. I could not find out how to get the current song.

Hi,

I know I can use the trackEnded event for auto-replay the track, but It will be more beautiful if this option added to the library, especially if you could also add a button toggle or checkbox control to control this option from the UI, the toggle button could be added besides the volume mute button.

Regards.

I'd like to create a PR for this if that is okay, I don't have permission to create a branch.

Closing https://github.com/vmudigal/ngx-audio-player/issues/59 (duplicate).

I have an Angular component with the player in it. I pass to it - via the audioUrl attribute - a value.
Then on some user input I change the audioUrl to a different value.

If this happens while the player is playing the playback then:

1. The timeline will not reset - it shows the previuse timeline value (I found a work around, by setting the startOffset value to 0 each time the playback is changed).
2. The play/pause button is stack on pause (as if the player in play state) although the player is in pause state - The button should be "play"

Could you please provide a way to handle change events on the audioUrl. Or maybe allow the developer the control the play/puase state via the TS code.

Failed to compile.

./node_modules/ngx-audio-player/fesm2015/ngx-audio-player.js
Module not found: Error: Can't resolve '@fortawesome/angular-fontawesome' in '/Users/user/angular/my-app/node_modules/ngx-audio-player/fesm2015'

Both of the audio players should be integrated into one single component in order to remove the additional duplicated code.

As a suggestion, you could allow the internationalization of fixed texts such as:

• "Items per page"
• "Playlist"
• "Tile"
  Making values dynamic would also be interesting

My playlist does not automatically play the next song after the end of the previous one. Any tips?