The Problem

For most non-Pakistani or non-Indian folks, my name is hard to pronounce when they first read it. In kindergarten, it was AY-TIF. Growing up in a rural town in Central New Jersey, I remember my five-year-old self correcting the teacher a few times. Eventually, after needing to continuously correct them, it would revert back to the mispronounced version. So, for many years, I settled with hearing my name pronounced incorrectly.

By elementary school and middle school, it transformed into UH-TEEF. This is the most common pronunciation that I get, because of how the name Atif technically is enunciated in the English language.

I think it’s safe to assume I’m not the only one who deals with this reoccurring issue.

Whether you’re walking into an interview for the first time, or introducing yourself at a new job. There’s always the initial friction of clearing up how to say your name.

Not anymore!

As a solution to this common problem, particularly for when I’m interviewing or meeting someone who knows me through my professional work, I added a sound byte to my homepage next to my name, like this:

My name is Atif.

After receiving questions and interest from folks, I open-sourced this component for anyone to use.

Here’s how you can use it on your website, too.

  1. Include the Vocalizer script on your website:
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vocalizer/1.0.0/vocalizer.min.js"></script>.
  2. Wrap your first name in a span tag like this: <span class="vocalizer" data-source="auto">YOUR NAME</span>.
  3. That’s it!

Note: If you receive a browser error, it might mean that your name doesn’t exist in the Nameshouts API. If that’s the case, no problem. Just record your own audio file and set the data-source attribute to your audio file’s path.

How Does It Work?

It’s pretty simple! Wrapping your name in a span tag allows a Javascript function to store your name in a string. Then, we use that string to generate a xmlHttpRequest and send the request to the Nameshouts API.

Nameshouts’ API returns a JSON object that contains the name of the audio file corresponding to your name. From there, we combine Nameshouts’ base URL (where the audio files are stored) and the audio file’s path.

Finally, we instantiate an Audio object and trigger audio.play() on the click of the button. The button is added by styling the pseudo-element :after on the span tag.

The UX of Names

While I hope this component is helpful for those of you with difficult to pronounce names, I hope it also provides a helpful experience to people who have trouble pronouncing difficult names.

There is a level of anxiety when meeting someone and not knowing how to pronounce their name correctly. Especially, as our industry continues to push forward in being inclusive and diverse, these types of use cases should be brought to the forefront.

So, there we go… a win-win for everyone.

Updated: Stay tuned for the next iteration of Vocalizer, set to launch in the next few weeks at vocalizer.io.

Thanks for reading. Please make sure to or
Share
this post if you found the ideas interesting.

I'm Atif, a software designer and developer based in New York City. I'm currently working as a product designer at Facebook. Sometimes, I like to write out my thoughts on design and technology. Follow me to keep up to date.