0:00
Hello everyone, welcome to GitHub blogging and in this video I will show you how you can
0:03
add a custom HTML audio player to your blogger website. So previously I made a video on how to add audio file in Blogger
0:12
As you know, there is no way to add audio file in Blogger
0:16
So for this you have to host the audio file in some other places like Google Drive and then
0:21
embed it in the HTML section. So here this is the same but here I have added the song image and the song names and the song
0:29
name to this player. So let's check how you can add audio player like this, where you can add
0:36
a paragraph like this about the audio. And you can add a link to the audio file so that when
0:42
a user click on the file name, it will redirect to the original source. And here you can embed
0:49
the audio player. Or you can even display the audio player like this in the grid format. And
0:55
let me just inspect in a mobile view. And as you can see, it is looking quite
0:59
good in mobile devices also. So let's check how you can add this audio player to your blogger website
1:07
So for this you have to go to the blogger dashboard and here let me just open a new post here
1:15
Now you have to add a title like I will type Audio Player 1 and let's switch to the HTML view
1:26
Now clear all and let me just go. copy the Audio Player 1 code. So let's copy all code and paste it here. Now you have to change
1:41
the image URL in this position and then you have to change the link of that audio file name
1:51
And then you have to change the audio file name and you can also add a artist name here and add a link in the has value And then you have to add the Google Drive link
2:06
But make sure to add the Google Drive link in this format
2:10
And if you don't know how to convert a Google Drive link to a direct download link, then you
2:15
can simply search for Google Drive direct download link. And here click on any of the website that you like
2:25
And here you have to enter the Google Drive link and it will create a direct download link
2:32
Now you have to add that Google Drive link in this position
2:37
Or you can replace your Google Drive ID in this position. So this is the Google Drive ID
2:44
Just replace the ID of your own file and it will work perfectly fine
2:49
Now let's publish this from here. Let me just close this Alt tab and let's open this
3:00
And as you can see, the audio player is added. And when I click on this button, it will start playing the audio in the background
3:09
And here user can easily download this file or control the playback speed
3:14
Or you can mute this or control the volume from here. And it would also add a hover effect to the power effect to the
3:24
image and when I click on this audio link it will redirect me to the original file
3:32
So let's check how you can add the second audio player. For this, click on new post again and let me just set it like audio player too
3:45
And let me just copy the second audio player file. Here the HTML and CSS code is almost same with little modification
3:55
Here the image will show at the top and then it will show the audio file name and then show the paragraph and then it will show the audio player So here you can change the image file URL and here you can change the URL of that original
4:12
file and change the audio file name and then you can add a short description and if you don't
4:18
want to add the description then simply delete this code and then you have to add the Google Drive link
4:26
So let me just publish it. Now let's open it and as you can see the audio player is added and suppose you want to delete
4:39
this paragraph. So for this go to the HTML section and then just delete P2 closing P tag
4:50
Now let's update this. Now let's refresh this. And as you can see, the paragraph is gone
4:59
Now let's check how you can add the third audio player. So for this, click on new post and let me just copy the audio player 3 code
5:12
And here in the HTML view section, paste the code. So this is a grid audio player
5:18
So you can add multiple audio file and add multiple images in this grid
5:24
So let me just name it to audio grid and here you can change the image URL and then the audio
5:33
file name and then you have to add the audio source URL
5:38
So let me just publish this and let's open it in a new tab
5:45
Now as you can see the grid audio file is added and let me just open it in a mobile view
5:51
And as you can see it will automatically adjust the size in mobile view So let check how we can add a paragraph in this grid So for this you have to go to the audio file and then add the paragraph after the A tag
6:15
Like this and let me just update this. And as you can see, the paragraph is added
6:29
So let's make it center align and add a left and right padding
6:34
So for this you have to add a style tag here. So this is the P tag
6:40
So let me just add the style tag. Now I have to add the margin from the left and right so I will type margin and
7:06
I will add a margin of 0 px from top and bottom and 10 px from the left and right
7:17
Now let's hit the update button. Now let's refresh this. And as you can see, the paragraph is moved to the center
7:28
So in this way you can add a paragraph to this grid
7:32
I hope you got the idea how to add a HTML audio player to your blogger website
7:37
So you can either use the audio player one, audio player two or audio player three, whichever
7:42
is best suited for you. And if this video helps then make sure to hit the like button which motivates me to make
7:49
more such videos like this. And if you are new to this channel, then consider subscribing
7:55
to Key to Blogging for more upcoming videos like this. I will see you in the next video. Thank you
