videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Angular Audio Player From URL With Controls Using ngx-audio-player in Browser Using TS
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/build-a-angular-audio-player-from-url-with-controls-using-ngx-audio-player-in-browser-using-ts/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a angular
0:04
package which allows you to play your
0:06
audio files right in the browser itself
0:09
using a nice little advanced audio
0:11
player so you can see on your page we
0:15
are having displaying a audio player so
0:18
the audio is playing we have the
0:20
controls all these controls are there we
0:22
can pause the audio we can play it it
0:25
also shows the total length of the audio
0:27
inside the timeline so you can see the
0:30
you can move the Seeker in the timeline
0:32
to move to any location in the audio so
0:34
we are displaying it these are the
0:36
playlist of songs that we are playing
0:38
right here in the browser itself you can
0:39
play multiple songs you can navigate to
0:41
the second song and then it will load
0:44
properly
0:46
so these are coming from a URL you can
0:49
even play your local audio as well if
0:52
you have a file so this is essentially
0:54
this package which is ngx audio player
0:58
this is the package I'm talking about
1:00
out so if you go to npmjs.com just
1:02
search for this package and it works
1:05
with all the versions of angular the
1:07
command is simple you install this
1:09
package first of all and it's a fairly
1:11
new package almost only 700 downloads
1:14
are there so it has a nice little
1:16
documentation as well so I have written
1:19
a stepbystep blog post on my website you
1:21
can check it out alongside with watching
1:24
the videoos so now to get started here
1:27
first of all you need to include this
1:29
module so go to your app. module.
1:31
typescript file and just include the
1:35
this line here at the very top which is
1:38
import ngx audio player module and it
1:42
will be coming from this package ngx
1:44
audio player so you import this line
1:47
here you write this line and then move
1:49
into the Imports areay and just add this
1:52
module ngx audio player
1:55
module so that's all the configuration
1:58
which is needed now you can close this
1:59
file
2:01
and then we come to the app.
2:04
component.ts file and let me also delete
2:07
this as well start from scratch so you
2:10
will need to have a playlist of public
2:13
URLs that you want to play so you can
2:16
play from the URL as well if you know a
2:19
URL that is hosted publicly you can
2:22
simply paste
2:24
it the link of that song and it will
2:27
play
2:28
it so in this way you can create an
2:30
array of objects each object
2:32
representing one single song and then
2:35
you can play these songs one by one in
2:37
the form of a playlist we have created
2:40
this playlist array and it contains two
2:42
songs right here each object containing
2:44
two properties first of all the title of
2:46
the song and then the link of the song
2:48
same goes with the second object as well
2:51
so if you want to now play this you come
2:53
to the app. component. HTML file and
2:57
right here to embed this audio audio
3:00
player we simply write the div
3:04
Tab and we just give it an ID uh class
3:08
here of player and inside this we use
3:11
this directive it's a material audio
3:14
player so material advanc audio
3:18
player so we put an opening and closing
3:21
tag and then it takes the playlist of
3:23
songs that you want to play as a
3:26
argument here playlist so I will
3:28
directly attach this VAR
3:30
so as soon as you attach it you will see
3:32
it will fetch the playlist and one by
3:35
one it will play this songs you will see
3:42
that so that's all that we need to do
3:45
and apart from that it also have some
3:48
call back functions when the
3:50
track ends when the song ends then it
3:53
also contains a call back function which
3:56
will trigger automatically when the song
3:59
ends if you want to do some kind of
4:00
thing you can execute this
4:04
function and it also have autop playay
4:07
option as well so if you want to
4:08
autoplay your songs you can put it to
4:13
true so that's all that we have for this
4:16
package it's a very simple package which
4:18
allows you to play audio in the
4:20
browser it can even play local MP3 files
4:23
if you have you can directly play it
4:25
using this module so they do offer a
4:27
nice little documentation you can read
4:29
more about it and the full example code
4:31
is given in the description you can read
4:33
my blog post where I was given this
4:35
example so thank you very much for
4:37
watching this video and also check out
4:39
my website as well uh free mediat
4:42
tools.com uh which contains thousands of
4:44
tools regarding audio video and image
4:47
and I will be seeing you guys in the
4:49
next video
#Music & Audio
#Music Streams & Downloads
#Religious Music