Set-up an audio version of your blog articles [Works Automatically]

Setup audio version of your articles for free.

Featured on Hashnode
Listen to this article

If you like the kind of articles I publish and follow my weekly machine learning issues subscribe to my newsletter.

If you want to listen to this article as audio while you read you can do it here

If you want your blog articles as audio and make them available at the top of your post you can follow my steps. Currently, Hashnode has no support for audio embedding but we'll make it work. If you host your blogging in WordPress or Ghost you can embed an HTML5 Audio player directly into a post. Let's first generate all the audios.

image.png

Last week I came across a platform called Send As A Podcast. It creates an audio version of the podcast and stores it in an amazon s3 bucket. Now once you've set up your audiblogs account, you need to do these steps to add the audio to your blog post.

  • First create a public link for the draft of the blog. Here's how to do this Screen Shot 2021-02-10 at 12.13.34 PM.png
  • Then you need to open the link and send this as a podcast via the audiblogs chrome extension.
  • Remember when you set up the audiblogs platform for your chrome you got a link that looks like this https://rebrand.ly/.......
  • Now open a chrome tab and go to that website. Now you have access to all the articles you've saved with this platform that will look like this Screen Shot 2021-02-10 at 12.06.50 PM.png
  • Now look for the enclosure URL tag in the XML file. Screen Shot 2021-02-10 at 12.09.13 PM.png
  • Copy that mp3 link, and with that create an HTML5 Widget like this
    <audio controls>
    <source src="https://s3.us-west-2.amazonaws.com/audiblogs/613be84b-99a8-48e1-864d-0e75fbd74eda.mp3" type="audio/mpeg">
    </audio>
    
    For hashnode users, until hashnode supports audio embedding in articles you have to create new custom widgets every time and embed the HTML in them or you can just add a link to the audio file at the top of the post. Now enjoy.

But why tho?

A natural-sounding audio experience can help your blog readers to engage more with a post. If you listen to a post while reading it, your mind can not be distracted from the around the world and you would engage more with the post. An audio experience for an engaging article engages people more with the blogs.

Sandeep Panda's photo

This is very clever! Internally, we are discussing if we can support this out of the box for all Hashnode articles. :)

theroyakash's photo

Oh my god that would be so great.

Mohd Shad Mirza's photo

Very cool theroyakash

Edidiong Asikpo's photo

You didn't just identify an issue, you also created a solution for it. This is so cool! Thank you. ๐Ÿ’›

Lincoln Pires's photo

That's cool, indeed. Promising. ๐Ÿ˜€๏ธ

But I guess would be more suited to all-text content - like stories or so ๐Ÿ˜‰๏ธ
... or maybe have it following the scroll of the user so to have the option to pause/play as needed.

Just to back up my comment a bit, the experience I had here was cool, but I wanted to pause as soon as this part:

First create a public link for the draft of the blog. Here's how to do this

And I already had to scroll up and lost some of the next content the guy was narrating.
Because there's no pausing in the speech, it sounded like "here's how to this ... Then you need (...)"

And it was also a bit funny to hear the widget part (especially the guid) ๐Ÿ˜‚๏ธ

I think you get what I mean, since this article is very informative, our attention is caught by it and we want to learn, then, the images and code get a bit lost in the speech/narration.

Still, that's quite cool! It's perfect for my wife that writes fiction ๐Ÿ‘๐Ÿฟ๏ธ
Thank you very much for sharing. ๐Ÿš€๏ธ

theroyakash's photo

Thank you so much for the feedback. I guess the scrolling feature would require access to the hashnodeโ€™s internal tools and apis, they are thinking of an internal implementation. Stay tuned for that.

Tapas Adhikary's photo

This is super awesome theroyakash. Thanks for sharing.

Apoorv Tyagi's photo

This is so cool. Thanks for sharing!

Marko Denic's photo

This is a very interesting approach. Thanks, theroyakash!

Gourav Khunger's photo

Wow!! This is something I was looking for. Thank you for sharing!

Emil Moe's photo

theroyakash It's great. However, can it skip code blocks? ๐Ÿ˜…

dhanushka madushan's photo

I had the same question. If we can remove some of the unnecessary scripts from the audio, this would be really great.

Olubisi Idris Ayinde's photo

interesting