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.
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:
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.
- Include the Vocalizer script on your website:
- Wrap your first name in a
spantag like this:
<span class="vocalizer" data-source="auto">YOUR NAME</span>.
- 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
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
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.