0:00
Hello everyone, welcome to Key to Blogging and in this video I will show you how you can add
0:04
a audio file to your blogger website and you can easily embed a audio file in Blogger by adding
0:12
a simple HTML code to the code editor. So let's check how you can do that
0:19
First of all, you have to upload the audio file to the Google Drive
0:24
So here click on new and click on file upload and you can upload the upload the file
0:29
Audio file, then right click on it and click on get link
0:37
Now by default it will set to restricted. So you have to change this restricted to anyone with this link and then copy the file link
0:50
Now you have to add this file URL in this format. default it will show view so you have to change this view to preview
1:05
Now copy this code and go to the blogger dashboard and here open the blog post and click
1:16
on HTML view. Now paste this iFrame code here and make sure to change the URL from view to preview view Now hit the publish button Let open the blog post in a new tab
1:40
And here as you can see the audio player is embedded. But it doesn't look good but it will
1:48
play the audio file and you can control the audio or video from here
1:54
So you can add the audio file in this format. So you have to choose the method too
2:03
So here you will use the HTML audio tag. So just copy this code from here and here makes you to change the ID of your MP3 file
2:19
And then copy the whole code and go to the blog post
2:24
Let's just remove the previous code from here and paste the new code
2:35
And let's update the blog post. Now refresh this page and as you can see the audio player is added
2:47
And you can set this to auto play and to do this just have to do this just have a little Add AutoPlay right after the controls and click on update
3:05
So by default Chrome block the auto play features in some cases
3:13
So let's check if it is working or not. And as you can see the auto play is working
3:20
Chrome browser sometimes block the auto play features. But when a user click on a link and then land on this page, then the auto play features will work
3:33
So let's check how you can further customize the audio player. So you can set the width like this
3:41
So just add a style tag just after the auto play. So let's just copy this code and then add the width
3:54
Here I will set this width to 70%. Let's update this post and let's refresh this page
4:05
And as you can see, the width of this audio player is increased
4:11
And in this way you can easily increase the width of the audio player and user can also download
4:18
this audio file from your blog post. you can also add a subtitle to the audio player like this just add this figure tag above the audio tag so let just
4:36
copy this code and here replace this code again and as you can see the figure tag is added
4:49
and here you can change the caption of this audio player and let's just update this page and let's refresh this page again
5:02
So as you can see the subtitle is added just above the audio player
5:09
So in this way you can customize the audio player in your blogger website and you can choose
5:14
the best suitable code from this blog post. I will leave the link in the description
5:23
If you have any doubt regarding adding audio file to the blogger website, then you can ask me
5:29
in the comment section. And if you like this video, then hit the like button and subscribe to my channel for more upcoming
5:36
videos like this. Thank you. You know
