Web tools - IPA code generator

Using IPA (International Phonetic Alphabet) symbols

Probably the ideal way of using IPA symbols on a web page is to use images. But that can be a hassle. On Blogger, you would have to upload something like forty images.

For me, at least, the use of special HTML character codes is an acceptable and much more convenient alternative. The only symbol missing is the long vowel sign, but a colon does almost as well. Here's what it looks like:

creation	/krɪ'eɪʃn/
dispatch	/dɪs'pæʧ/
parakeet	/'pærekɪ:t/
agency	/'eɪʤənsɪ/
butter	/'bʌtə/
television	/tele'vɪʒn/
theatre	/'θɪəte(r)/
cure	/'kjʊə(r)/

The only problem is that you have to look up the codes and enter them individually. I can't be bothered with all that, so I devised this keyboard to speed up the process. First type in your symbols, optionally using the apostrophe to show stress. You can also bracket letters which only some people pronounce. There are two keyboards, one by sound type and a sort of (Q)werty one - use the 'Switch keyboard' button to toggle between them.

When you've completed your word, you can add dashes with the '/ add /' button. If you want to style the IPA symbols, you can give them a span class by clicking on the '< span >' button. Clicking a second time on these buttons will undo the action. There's some suggested styling code below the keyboard, but you can always change it.

As far as I can see, you can copy the IPA symbols directly into HTML. But if you want to put it into some Javascript, you'll need the entities code.

When you're done, select, copy and paste the symbols into your page, or insert the code from the edit box into your code.

IPA code generator

 

ɪ	ʊ	ʌ	ɒ	ə	e	æ		short vowels
ɪ:	u:	ɑ:	ɔ:	ɜ:				long vowels
eɪ	əʊ	aɪ	aʊ	ɔɪ	ɪə	eə	ʊə	diphthongs
p	t	ʧ	k	f	θ	s	ʃ	unvoiced consonants
b	d	ʤ	g	v	ð	z	ʒ	voiced consonants
l	m	n	ŋ	r	w	j	h	other consonants

eɪ

əʊ

aɪ

aʊ

ɔɪ

ɪə

eə

ʊə

w

e

r

t

ɪ

ɪ:

ɜ:

ʌ

ʊ

u:

ɒ

ɔ:

p

æ

ɑ:

s

ʃ

d

f

g

h

j

ʒ

k

l

z

v

b

n

ŋ

m

ʧ

ʤ

θ

ð

ə

Suggested CSS styling code

<style type="text/css">
<!-- 

.ipa{
color:gray;
font-size:110%;
font-weight:bold;
}

-->
</style>

Related pages / posts

• Table of IPA symbols
• Game using IPA symbols

Links

• BBC Learning English - Excellent facility - with a sounds chart and short videos for each sound, with tips and examples
• Wikipedia - Help:IPA for English
• Vowels - with links to examples (Univerity of Manitoba)
• Consonants - with links to examples (Univerity of Manitoba)
• Stress - University of Manitoba
• Hints for learning how to hear stress - University of Manitoba
• UCL - Displaying ipa symbols (University College London)
• UCL - downloadable keyboard
• Antimoon - an explanation
• The best free online text-to-speech program I've found seems to be Ivona - it's quick, and can do up to 250 characters. It also has an incredible selection of voices.
• Pronunciation poem 1
• Pronunciation poem 2
• Pronunciation poem 3