Skip to content

Make Your Own Audiograms

  • by

Modern podcasting best practices, especially in marketing state that you must promote on all platforms. We found an elegant solution in Audiograms, here’s how to make your own.

We’ve found the best performing audiograms we’ve made are short and poignant. Making long audiograms might work for the fans who will always enjoy your content. However, we are making content to engage the new viewer. For that, give them everything that can read immediately, and let them hear after their interest is piqued!

Table of Contents:

What is an Audiogram?

An audiogram, much like a telegram of the past, is a piece of media content that moves, but showcases audio on visual/text based platforms. Creators of the audiogram concept say that engagement with the content increases when something moves around the text. We have found that to be true. We use audiograms on Instagram to promote our sister podcast Jìgìjìgì: Africulture Podcast.

By the end of this tutorial you should be able to make and save your own custom branded audiograms and be able to load them up again with a shell script.

What tools will I need?

This resource will help you if you have something other than a Mac, so the rest of this tutorial will be mac specific. This is easiest to use with the container-tool Docker.

  • Tools needed:
    • Docker
    • Comfort with the Terminal
    • Transcript for your podcast
    • Appropriate Brand Imagery
    • Any text editor

How do I get started?

Install Docker and peruse this installation guide. It may seem complicated at first, but don’t worry, you’ll get it. I’ll try to simplify that link here. In short, Docker creates Containers, which are like separate, ephemeral instances of another computer within your computer. The file that you will download below is of an Image, which is like an install CD. You are effectively downloading the ability to create another computer on your computer, then run software in that “digital” computer.

If you are confused or have any questions, email me. I took the extra precaution and installed Git. I recommend the Docker installation because it is the only piece of software that you have to install. It also fulfills my ~shell access h4XoRz~ nostalgia. Just an itch that needs to be scratched from time to time.

After Docker is installed, open up the Terminal and copy this code below:

docker build -t audiogram https://github.com/brizandrew/audiogram.git

This will tell your computer to tell docker to “build” the container image “audiogram” from the url above. Your Terminal will keep you informed of the process and once it stops and shows you the root ~ % again you are ready to enter the next code:

docker run -p 8888:8888 audiogram

You should get a prompt from the Terminal that looks like this:

> audiogram@0.9.5 start /home/audiogram/audiogram
> npm run postinstall && bin/server

> audiogram@0.9.5 postinstall /home/audiogram/audiogram
> mkdir -p editor/js && browserify client/index.js > editor/js/bundle.js
info: Listening on 8888

Once that’s done and listening you navigate in your browser of choice to this url: http://localhost:8888/

You should be greeted by this wonderful screen. Everything works!

Success!

Here’s an example of one of our customized audiogram templates. Take note of the two spaces I highlighted. This is a good way to make line breaks. You can fiddle around with the customization (next picture) but I’ve found this to be a simple solution.

Here’s what the full customization page looks like. This is zoomed out so you can get a feel for how much customization is possible.

How do I save?

Now that you have created your ideal audiogram theme(s) it’s time to save the entire project. Don’t do what I did and create two new themes and then close Docker and expect it to be saved because you saved it within the docker image. You must save the Docker Image to save the changes within the Docker Image.

This is where I might lose you, so be patient with me, and yourself! What we are going to do is commit(save) the changes that we made within the docker image to a new docker image and then export that new image as a file you can load at will.

Let’s begin. First open up a new Terminal window and type this code:

docker ps

This will list the running containers:

CONTAINER ID        IMAGE                          
49857887259b        jigi/audiogram:v3

There will be more information in your terminal, but these two pieces of information is what you will need to continue.

The CONTAINER ID is what your Terminal has name the “new computer” container that has been created. The IMAGE is the “CD software” that is running the audiogram.

To commit the changes we’ve made to a new docker image, type this code (make sure to paste in your container ID number and make up some names you will remember and make the version number special to you):

docker commit 49857887259b YOURNAME/audiogram:vYOURNUMBER

You should get an sha256 key as an output (SUCCESS!):

docker commit 49857887259b jigi/audiogram:v4    
sha256:af401d3b42xxx6419010da0fe29f3a238xxxeb73914f6da583068a4206975a2

Now we can save the new Docker Image to a file that will be stored in the main or root directory of your computer. Copy this code:

docker save jigi/audiogram:v4 | gzip > olonademo.tar.gz

Hit enter and nothing will happen. This is good! It’s making your file. Go take a break from this wizardry and when you come back, check your root folder and you should see a new file:

How do I make more, at a later date?

First, let’s make sure your changes were propagated. For this we will stop the old docker container from running:

docker stop 49857887259b

It’ll take a bit to respond, but when it is finished it will display the stopped CONTAINER ID as a response. From there you can type:

docker ps

Now that you have verified that you have no previous audiogram containers running, we can load the old file.

We don’t have to run the docker build code anymore, we can run this instead:

docker load < olonademo.tar.gz

after a bit you’ll get something similar to this with your filenames:

Loaded image: jigi/audiogram:v4

Excellent. Now we just execute the same piece of code from earlier, but with our filenames:

docker run -p 8888:8888 jigi/audiogram:v4

If you get an error like this, it is because you have the previous audiogram container running:

docker: Error response from daemon: driver failed programming external connectivity on endpoint jolly_vaughan (d3f4814f97f9bee0c16d1d93b0220b53a30bf51e2cd29218c10806a465c1b020): Bind for 0.0.0.0:8888 failed: port is already allocated.

If you get a response like the one below, great job! Navigate down the theme list and you should see your custom themes.

> audiogram@0.9.5 start /home/audiogram/audiogram
> npm run postinstall && bin/server

> audiogram@0.9.5 postinstall /home/audiogram/audiogram
> mkdir -p editor/js && browserify client/index.js > editor/js/bundle.js
info: Listening on 8888

Can we speed the loading up any?

Alright, you’re a pro now. Let’s make this process a little bit faster.

Let’s make a shell script that we can run that will have the type up docker build and docker run commands, and it’ll open up our browser of choice (firefox) automatically to localhost:8888

Open up your text editor and type this:

#!/bin/bash
Docker load < olonademo.tar.gz
open -a/Applications/Firefox.app http://localhost:8888
docker run -p 8888:8888 jigi/audiogram:v4

Save it as something short, we are saving time after all. We named our jigram.sh. Make sure you save it as YOURFILENAME.sh

Now all that is left to do is make this an executable bash script. For that we will type up this command in the terminal.

chmod 755 YOURFILENAME.SH

Now your bash script is an executable. To launch it from the Terminal put a ./ before the filename:

./jigram.sh

If you stare at it after it presses enter you’ll see it flash “Loaded image: jigi/audiogram:v4” before Firefox opens up to localhost:8888. The page will show an error page, but do not worry! Refresh the page and your own saved audiogram file will have loaded! You’re Done!

How is this relevant to ߐߟߐ߫ߣߊ߬ߘߋ߫?

We encourage creative expansion! Podcasts are one way to do that. We do that through Jìgìjìgì. We are very excited to be learning this technology and wanted to share it. The saving and committing and all of that within docker was the one thing that was holding us back from really being able to fully utilize this tech. Once we figured it out we had to share with you!

On the other hand, let’s get real. This took a long time to learn, and although it was gratifying, it may be similar to the ordeal we went through trying to get transcripts for our podcast. There is a really good lesson there and we’ll save it for another day.

Ultimately, we want to empower you to create to your fullest potential, and to do that in the most cost-effective way possible. There are plenty of services out there for the podcaster to be able to create more visual audiograms, with sleek web2.0 vectorized graphics, some rotate the text, some have very long transcripts (minutes!) and the text constantly advances. Those are all fine, and if you have the money you should pay for them. We wonder if that is missing the point. We are all combating for eyes. Something like this is short and sweet.

Let us know what podcast you’ve made audiograms for! We are always looking for good information to learn from! I am excited to see what Comes Forth By Day when Your Artist Arrives.

Tags: