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.

The videos are embedded in a customised version of the excellent JW Flash Video Player, which is open source, free for non-commercial use, has a well-documented API and is supported by a fantastic community. Using this allowed us to control the video through the JWplayer API. So instead of requiring a seperate page for every one of the hundreds of videos, we could simply change the video being played through a bit of javascript called from linked symbols in the chart.

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.

Once we’d cracked that, we could focus on linking the chart symbols to the videos, which works something like this. Clicking on a linked symbol in the chart calls a javascript function, passing a parameter linked to the symbol name. This looks up the appropriate values for that symbol in an array containing the path to the appropriate videos (for male & female) and descriptive information about the symbol. The script then uses the sendEvent() call to the JWplayer API to change the video loaded in each of the two players.

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.

Related posts: