There’s a chance that NameShouts’ library does not have the pronunciation for your name,and in that event,you should use your own audio recording or Vocalizer won’t be doing its job!
How It WorksLink
The actual source code for Vocalizer.js is about eighty lines of code.Let me explain exactly what’s happening under the hood.
When the user wraps his or her name within the
tag with the class
var name=document.getElementsByClassName('vocalizer');var names=;for(var i=0;i
We perform this inside of a loop in case there are multiple usages of Vocalizer on the page.
Next,a conditional checks the
data-source attribute to see if you’re opting to use the NameShouts API to source the pronunciation or if you’re using your own audio file:
buildRequest() function that we call inside that loop returns the path for the endpoint based on the user’s name.
function buildRequests(n)return request='https://www.nameshouts.com/api/names/'+n;
From there,we pass the request to the
fetchAudio() function and make our
xmlHttpRequestto the NameShouts API.
var xhr=new XMLHttpRequest();xhr.open('GET',request,true);xhr.onload=function(e)if(xhr.readyState===4)if(xhr.status===200)var audioPath=JSON.parse(xhr.responseText).message[names[i]]["path"];var audio=new Audio(BASE_URL+audioPath+'.mp3');audio.playbackRate=0.75;name[i].addEventListener('click',function()audio.play();,false);else console.error(xhr.statusText);xhr.onerror=function(e)console.error(xhr.statusText);;xhr.send(null);
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.
In the event the name you are targeting does not exist within the NameShouts API,the plugin will throw an error.
A solution to this situation would be to record and link your own audio file.Setting the
data-source attribute to a file path designates your own audio file. In that case, we just create an
Audioelement based on the file path from
var audioPath=sourceType;var btn=document.getElementsByClassName('vocalizer');var audio=new Audio(audioPath,function()'Error!';);
On the front end,an audio button appears after the targeted name.The cosmetics are added with CSS styles on the pseudo-element
:after on the
Finally,we add a click event to the audio button:
Other Use CasesLink
Example:Blogs and News PublicationsLink
Vocalizer’s use case can extend beyond just personal websites.I can see blogs and digital news publications begin to adopt the plugin,as well.
An example of how Vocalizer could be used by news publications, such as Vox.com (Vox.com10 and you see the name of a political figure or a region of the world with a name in which you are unfamiliar. In that situation, Vocalizer could educate you on its pronunciation. In theory, this would better equip you to discuss these current events and issues. No one wants to sound uninformed.
With every potential solution,there are problems.Vocalizer faces issues of its own.The main issue is that two people with the same name do not always pronounce their name in the same way.
Often,a person’s origin language dictates the pronunciation of their name.For example,the name José in Spanish is pronounced HOH-SEH.In French,the same name is pronounced JOO-ZE.Vocalizer’s current implementation does not cater to these circumstances unless you opt to use a custom recording.
Pushing Accessibility FurtherLink
In the last few years,web evangelists have emphasized the importance of web accessibility.Most accessibility functions cater to people with physical and cognitive disabilities.I believe there is a lack of attention in regards to inclusion and cross-cultural accessibility.
Though unintentional,in a way,Vocalizer seeks to enable cultural accessibility. Technology companies continually strive to diversify their workforces. We’re seeing heightened mobility in our professional lives. As a result, multiculturalism is becoming more and more prevalent.
For what it is — I hope Vocalizer helps familiarize people with names from other cultures or ethnicities.
The Future Of VocalizerLink
There are a few features and improvements I would like to make on future versions of Vocalizer.js:
- Language support for names with alternate pronunciations
- More graceful handling of implementation errors
- Adding a fallback for the situations when a name is not in NameShouts’ API
- Ability to easily customize audio buttons styles
To further expand on the idea,I launched a free,web-based version of Vocalizer atVocalizer.io.17
The web tool allows you to record your name in the browser. Then, it generates the code snippet required to add Vocalizer to your website.
Conclusion 2014 study18 found that people with easier-to-pronounce names are deemed “more trustworthy”. I built Vocalizer to solve a problem that has persisted all my life. Now, I hope this will prove useful to others, helping them solve the same problem.