Create a decentralized podcast on IPFS with an ENS name

20 Jul 2023 •

In this example, we will learn how to create a decentralized podcast using ENS and IPFS. You’ll be able to store and stream your podcast content from IPFS. Because IPFS is peer to peer, the hosting for your podcast will utilize decentralized storage instead of traditional web server storage solutions. In this way your podcast will not have any bandwidth or monthly download limits. You will also be able to give your users a podcast subscription feed link, so that they can listen through podcast apps like Apple Podcast. When a new episode is uploaded the podcast player and feed will automatically detect the new episodes.

How does this work?

This is a project uses javascript, so it’s purely frontend code. Because of that, you can point your ENS name’s contenthash record to the location of the content on IPFS. The javascript looks at your IPFS directory using its contenthash saved in the ENS records. It then populates a list of episodes and episode descriptions it finds in the directory structure. As long as the episodes are uploaded using a naming convention like, episode1.mp3 and episode1.txt, the podcast content and data will show up in the web app audio player so your episodes can be played from a browser. Optionally you can generate an RSS podcast feed file which can be used to subscribe in a podcast player like Apple Podcast.

The script also works without using an ENS name, and instead can use an IPFS gateway you specify. However, it’s easier with an ENS name and the links structured better.

Working demo

Podcast Web Player - podcast.showmehow.eth

IPFS CID: QmQW316xfuubnkwfZXynh6MQVsYwsS4q1Jx2mheXTax72s

Podcast Subscription RSS Feed (you can add this to Apple Podcast to subscribe) - feed.podcast.showmehow.eth

IPFS CID: QmaR1NKFxqP3kN9SSKdbVj3p8revjh3qDAQLw9dvfGwqdA

Podcast RSS Feed Generator (works with ENS names or public IPFS gateways - podcast.showmehow.eth/generator

IPFS CID: QmZ9A88gpJvvutMcnMpMhxfJACXQhceyoXGN2g7a6GtyHS

GitHub: https://github.com/zadok7/ipfs-ens-podcast/

Setting up the podast content

First download the /mypodcast folder. You can find this on the GitHub repo. You can also download the zip file which is hosted on IPFS. This will have the example folder structure and files for the podcast episodes. We will be running IPFS Desktop to upload the modified /mypodcast folder. Additionally we’ll use Lighthouse.storage to upload the same files for duplicate pinning. This way the podcast does not rely on your local IPFS gateway (via IPFS Desktop) to stay up.

Adding your own episodes, images, and descriptions

On your local computer, go into the directory structure of /mypodcast. There you will see some folders which will contain your episode audio files, episode images, descriptions, and main podcast image and description.

Add the audio files (.mp3) for your episodes

Look in the folder /mypodcast/podcast_content/episodes. You’ll notice 3 episodes there. episode1.mp3, episode2.mp3 and episode3.mp3. Just replace these with your own audio files. You can even add episode4.mp3 5, etc. The script will end up querying all that exist (as long as this naming convention is followed).

Add the episode images

Look in the folder /mypodcast/podcast_content/episode_images. You’ll notice 3 image filers there. episode1.png, episode2.png and episode3.png. Just replace these with your image files. The script hard codes .png, so be sure to use that format. Of course the script could be updated to look for any image type.

Add the episode descriptions

Look in the folder /mypodcast/podcast_content/episode_descriptions. You’ll see three text files there; episode1.txt, episode2.txt, episode3.txt. Edit each of these with a text editor so they have the episode’s title, description, and release date. The screenshot below is of the content view in IPFS Desktop. You won’t be able to edit there so use any text editor or a development environment like VSCode.

Edit the main podcast image and description

Go into the folder the folder /mypodcast/podcast_content and replace podcast.png with your own podcast image. This will be displayed on the podcast web player and when you subscribe to the podcast in apps. We’ll generate the RSS subscription file/link later. Also, edit podcast.txt with your podcast’s title, description, and author.

Setting up an ENS name for your podcast

The podcast player is purely Javascript. We can use meta tags in the section of the code in index.html. Open this file in a text editor or VSCode and add your ENS name there.

Edit index.html and add your ENS name to the meta tag

Look for this line:

<meta name="ensName" content="podcast.showmehow.eth"> 

Replace podcast.showmehow.eth with the ENS subname you want to use for the podcast.

Optionally, use another ENS subname for the podcast subscription feed location

Look for this line:

<meta name="feedName" content="feed.podcast.showmehow.eth"> 

Replace feed.podcast.showmehow.eth with the ENS subname you will use to allow people to subscribe to your podcast. For instance https://feed.podcast.showmehow.eth.limo can be used to subscribe in Apple Podcast player. Since we are letting the script know we are using an ENS name, it will automatically use the .limo resolver to fetch the IPFS content.

Point your ENS name’s `contenthash` record to the IPFS location

First get the IPFS CID of the /mypodcast folder. You can easily find this in IPFS Desktop by right clicking on “mypodcast” then “Copy CID”. If you’re using an IPFS uploading service like Lighthouse or Pinata, you can easily find the CID there as well. Be sure that you’ve made all the changes to //mypodcast folder first before getting it’s CID hash. If you add or edit any files in /mypodcast the CID will change!

Use the ENS Manager App to point to the IPFS locations for the podcast web player and podcast RSS feed location for subscriptions.

Be sure the place ipfs:// before the CID you copied so it looks like this in the ENS records (but with your own CID):

ipfs://QmQW316xfuubnkwfZXynh6MQVsYwsS4q1Jx2mheXTax72s

If you need help editing the contenthash record, see the ENS Support Guide: Building a Website. You should now be able to visit your ENS name, in this example, podcast.showmehow.eth.limo in your browser and play your podcast episodes but by using your very own ENS name!

You can now play the decentrally hosted podcast on IPFS right in your browser. However, if we’ve setup an ENS name for the podcast feed and set the meta tag variable for feedName we need to generate a feed file. You can do this using the included generator in /mypodcast/generator/index.html. You can also reach the podcast feed file generator script from podcast.showmehow.eth/generator. Just input the ENS name you used for the meta tag variable ensName in index.html.

Once you download podcast.rss, simply upload this file to IPFS, then grab its CID like you did to get the CID of /mypodcast.

Now, go to the ENS Manager App and point the contenthash record to the podcast.rss IPFS hash.

Now in a podcast player like Apple Podcast you can subscribe to the podcast using feed.podcast.showmehow.eth.limo but of course with your very own ENS name.

Optional - Use an IPNS location instead of IPFS

If you don’t want to update your ENS content records each time you use IPFS Desktop to publish an IPNS location. For a guide on that, see Setting up a customizable decentralized blog with an ENS name and IPFS desktop.

Optional also - Use an IPFS public gateway instead of an ENS name and the .limo resolver

You can choose to use a public IPFS gateway you specify instead of an ENS name and the default .limo resolver. To do this, leave the meta tag variables of ensName and feedname empty. The <head> would look something like this:

<meta name="directoryHash" content="QmfHWotD3BNryxBQcbKxsZfvfRytGewo779C1iWScALQGJ">  <meta name="feedHash" content="QmaR1NKFxqP3kN9SSKdbVj3p8revjh3qDAQLw9dvfGwqdA">  <meta name="ensName" content="">  <meta name="feedName" content=""> 

For a more technical explanation on how this works see the GitHub repo.