This post is about building ‘IPA online‘ – a site designed to help students learn to use of the symbols in the International Phonetic Alphabet (IPA) to visually represent the range of the sounds produced by the human vocal tract. The main challenge was to find a way to present hundreds of very short video clips of male and a female speakers producing the same individual sound segments from the IPA chart in a logical and usable way. We also built a range of self-text exercises where the same speakers produce a range of nonsense words for students to transcribe.
A portion of one of the IPA chart pages is shown in the image above.
Well, I say ‘simply’, but in practice it never is. One of the first complications we met was the need to display the rather unusual symbols of the IPA chart. These are not the typical characters you find on a web page, but rather an unusual set of characters and annotations. To display these consistently in browsers required encoding these characters as HTML entities, which meant an extra level of illegibility in the code (such as &x6D;) and threw up the challenge of forcing the server to deliver pages with UTF-8 encoding with an .htaccess file.
If I sound a little vague about this, it’s not to protect my methods, but rather because I am by no stretch of the imagination a programmer. With a bit of crude hacking of the examples on the JWplayer site I managed to find a way to get most of this to work, but it’s with thanks that I acknowledge the help of my colleague Carl Vincent, a proper programmer, who helped find a more elegant way to do this.
We used similar approach for the self-test units, but with a bit of added jQuery to allow students to reveal the answer as work though each of the transcription questions.
Hopefully, the end product is one that will be useful for students and teachers of phonetics. It’s still a work-in-progress and expect to get some suggestions for improvement when its piloted with students next term. One thing I’m hoping they suggest is that they want a mobile version, because I would love to find a reason to try that.