👷🏼👷🏻‍♀️ Inserting audio players for audio links into a page on the web

Technology
1

After the little thread on Uralic Languages, I went looking (randomly) for information on Nganasan. (Hey, it starts with a velar nasal. Who can resist?)

I found this page:

At the end of the page there are two texts, with audio recordings (mp3s) and transcriptions. Awesome.

However, the audio files are only linked to, rather than made playable within the page itself. That’s kind of a bummer, since the web fully supports inline audio players.

So I thought I’d share a little Javascript what I do in such situations. I just threw it together, but I think it’s worth while in that it helps to lift the veil a little bit on what is actually going on inside a browser.

(Hosted at the internet archive)

Here’s the outline I worked from:

CSS

  • Select links
  • Select links to mp3s

Javascript

  1. Get the link to the audio

    • Select links to mp3s
    • Access each link’s href attribute

  2. Create an audio player to play that link

    • How to create an audio player
    • How to set the audio player’s src attribute

  3. Step through all the links and create an audio player for each one

    • Iterate through each link
    • Carry out steps 1 and 2 to create an audio player for that link
    • Place the audio player after the link in the DOM

If anyone actually finds this interesting, I’d be happy to go through what’s going on in more detail.

1 Like
2

Nice! My first thought was “and then I want the audio player to be a web version of Praat!”, and apparently a version of this already exists as Praat on the Web. It doesn’t look like it has support for spectrograms and a few other things, but it’s a good start.

image
image1700×873 153 KB

1 Like
3

Also, a small web utility for easily creating nice-looking interlinearized texts for the web , shared by Hugh Paterson.

1 Like