Do you have a hard name to pronounce? I know I do, and I’m constantly getting asked to say it for people. So much that I decided to add it to my blog. It was pretty easy and I don’t know why I didn’t do it sooner. This is a short post on the why and the how to add an audio clip to your “About” page.

I’ll be the first to admit that I’m awful with names. Dale Carnegie once said:

“Remember that a person’s name is to that person the sweetest and most important sound in any language”

It’s important to me to pronounce other’s names correctly. So while I was looking at Saron’s blog I fell in love with this idea of having a “how to pronounce my name” feature - front and center. Here’s a screenshot:

Great right? While my design chops aren’t really there, I do have a mic and a computer so I decided I could add a soundbite of me saying my own name to my about page.

To get started I used this tutorial on recording an mp3 on a Mac. Alternatively, Google “record an mp3”.

We’ll use the audio tag and while I’m not sure if it supports other audio formats it definitely supports mp3.

If you have a mic, use it. Even if it’s a mic attached to the headphones that came with your phone. Once you’ve got the file saved and exported you’re good to go. I was a bit annoyed by the “hiss” in my recording (the AC was on in the background) so I decided to take it out.

If you’re using garage band you can set the “Noise Gate”:

I listened to my recording on loop and adjusted it until most of the hiss was gone, but none of my voice was cropped.

Now that I had a hiss free recording on my file system, I copied it over to my blog folder. I’m using Jekyll to render my blog and jekyll-assets to manage my assets. I then had to configure those to pick up a new file in a new folder:

# _config.yml
  assets:
    - "*.mp3"
    # ...
  sources:
    - "assets/audio"
    # ...

After that, I needed an audio tag

<audio controls>
  <source src="/assets/say-schneems-417bd7a4f0677cc916dda568ae72e140fc3e51c5637cb003692825535c32d0b22e9ad872787ef4e9ff4efb32f74d18795a93a93ed86a8fff92c8ef3dca409a08.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Note: The fingerprint on the audio file is auto generated by jekyll-assets which uses sprockets, you can see my blog source here.

That’s it! The audio tag automagically gives you a mini player where you can play/pause, adjust volume and download. If you don’t want to click through to my about page here’s what it looks like:

How to say my name

“Schneems” is my webhandle. Start by saying the first half of “schnapps” and end with the last bit of “seems” (Schn-eems). My full name is Richard Schneeman (Shhhh - knee - man). Listen below to hear both pronounced.

Fin

That’s it. Total time: 15 minutes. Maybe 5 minutes if I wasn’t fighting with GarageBand. It’s a pretty lightweight way to make your name and by extension your writing more approachable.

I’m not going to pretend that this will preemptively stop all people from asking me to pronounce my name again, and I frankly don’t mind. But from one awkward person to another, maybe this will help save someone from a mildly awkward social situation.