I would be awesome if you could submit this library to cdnjs (https://cdnjs.com/) or a similar JavaScript library CDN, so that people can just enqueue the library from such a CDN instead of hosting it themselves.

Thanks for a useful but of code! :)

#Hello,

I have JavaScript error when I use CDN or local files

TypeError: document.body is null
e()
vocalizer.min.js:1

vocalizer.min.js:1

vocalizer.min.js:1

Never mind, after I place reference to js at the bottom of the page it works.

Hello,

It seems to be a great light-weight plugin that we would like to use, but when I follow the steps on getting it to work, it's giving me a lot of errors.
Please find the error messages below and a screenshot attached.
==============ERRORS=============
Access to XMLHttpRequest at 'https://www.nameshouts.com/api/names/naureenanwar' from origin 'https://XXXXX' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
at vocalizer.min.js?ver=20151215:1:681
at a.onerror (vocalizer.min.js?ver=20151215:1:467)

Failed to load resource: net::ERR_FAILED www.nameshouts.com/api/names/naureenanwar:1

==============ERRORS=============

When I tried using this method:
Naureen Anwar
or just this simple name
John

this gives me the errors mentioned above. But when I tried this method (custom mp3 audio):

John

This works and plays the audio. This doesn't give me any errors.

How can I fix this?

Thank you!

The name Thierry, in French, is a male name, not a female name as shown here (the female counterpart of Thierry is Thérèse).

Hi,
Could you make it possible to somehow load new instances dynamically, instead of only on page load? For example, by exposing a function that accepts an element.

A person should be able to specific a data-button-color attribute on the <span> and provide a hex code color to override the default button color.

Example:
<span class="vocalizer" data-source="auto" data-button-color="#cc000">$NAME$</span>

Any takers?

Hello,

A few things:

1. Is there a way to have the script work with compound names? For example mine: ricardo zea.
2. Also, it would be nice to be able to select the language in which we want the name to be pronounced in.
3. In this Pen you can test how the same name (mine in this case) is pronounced differently, with a different voice and a different tone. Is there a way to make the script use a specific tone and pronunciation? I assume that's something related to the language, but I'm not entirely sure.

Anyhow, this is a GREAT script, Thanks for sharing it :) 👍

I have received error when adding my own audio file

Error is audioPath.map is not a function

I love the idea, getting the error of "TypeError: Cannot read property '0' of null" upon basic installation.

Nice module
I suggest distribute it in bower, what you think?

Thank you for building this. This is awesome!

Would you be open to using an SVG icon instead of loading a icon font library? It is a bit much to download an additional ~50kb of assets just to display one icon. Here is the SVG code for the actual material icon:

<svg width="24" height="24" viewBox="0 0 24 24" id="ic_volume_up_24px" x="120" y="192">
  <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
</svg>

I can submit a PR but, it seems the repo only has minified code.

When a name being used is not present in the Nameshouts API, it should do two things:

1. console.log and error message saying, "Name not found on Nameshouts.com"
2. display:none the audio button

After a quick scan of the minified code and the documentation, I don't seen any way to change the NameShouts API key without changing the source. Should this be a <meta> (to continue with the pure markup theme of the API) or should it be part of a new API (e.g. new Vocalizer(apiKey))?

Many names have recordings from different countries (e.g. Michael). Is there a way to specify the preferred country?

I just found:

https://www.vocalizer.io/

Is that the same as what's in this repo? If it is, you might want to include a link to the website from the repo, and vice-versa. Thanks.

I tried making the exact demo in the screenshot:
http://codepen.io/chriscoyier/pen/XNmzga?editors=1000

Looks like 2 of them work and 2 of them don't. The two that don't still put the icon on the page, and throw an error:

Just a heads up! Awesome thing!

Hi, i have been triying to make it work on my little site but it only works on my local wamp server why is that?