In many browsers which does not support html5 will definitely will not support audio. In this blog we are going to see two methods to play audio file in blog posts.
1) Audio tag
In html5 audio tag was introduced which plays audio file but it does not support in browsers which does not have html5 compatibility.
Below is the code for playing audio files in blog posts
<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>
Now Lets see how to play a audio in blog post which is in google drive
To play a audio outside google drive we need to make the url public
Right click on the audio file in the drive -> select get link option. You can see this.
https://docs.google.com/uc?export=open&id=fileid
You should replace the fileid with your id.
<audio controls>
<source src="https://docs.google.com/uc?export=open&id=1NwwOdF7olfPLSDp-FeH-DDmb_jsF3vYT" type="audio/mp3">
</audio>
Also you can convert the audio to ogg format to reduce the size of the audio, its also a good format reduces the storage compared to mp3. You can convert using online tools and upload it to the drive. For that you have to change the type from audio/mp3 to audio/ogg.
2) Using Iframe tag
Make the link public as mentioned above. Then double click the audio file.
Find the three dots and click on it and select open in new window option. It goes to new tab
Again you can find three dots in the top right corner. Click on it, you will find Embed Item... click on it. A pop up will be displayed. You can find the <iframe> code. Copy that and paste it in your blog. You can customize the height and width of <iframe>
Conclusion
The above two ways plays audio file in blog post, but audio tag view looks good compared to iframe. Audio tag comes with download option but in iframe you have to open in new tab and download the file.
Hope this post is useful!
0 Comments