A minimal audio interface for HTML 5

[Cainntear]

If you're building a website for language, it's likely that at some point you'll want a really minimal audio player interface for playing single words and short sentences. Personally, I'm very surprised that HTML5 didn't specify a controls="play" option (or similar) to give a one-button version of the player for this purpose, and as soon as you put in a visible audio player, you're forced to see the whole thing, sliders and all.

So here's what's probably the simplest and most straightforward one-button (play only) audio interface: (obviously replace "audio_name_goes_here.mp3" with your filename/URL)

Code: Select all

    <span>
        <audio><source src="audio_name_goes_here.mp3" type="audio/mpeg"></audio>
        <img src="play.png" onclick="this.parentElement.firstElementChild.play()"></input>
    </span>

There's an image "play.png" attached that you're free to use, or make your own if you prefer.

I've used an image, as the unicode symbols for play, pause etc haven't been implemented widely enough yet. The other option is something like fontawesome or Google Fonts, but to be honest I don't see the point.

You can implement other features of the HTML5 audio object by copying the img line and changing the image file it points to, as well as the command .play() to the appropriate method, e.g.:

Code: Select all

    <span>
        <audio><source src="audio_name_goes_here.mp3" type="audio/mpeg"></audio>
        <img src="play.png" onclick="this.parentElement.firstElementChild.play()">
        <img src="pause.png" onclick="this.parentElement.firstElementChild.pause()"></input>
    </span>

A stop button is slightly more complicated, as HTML5 audio doesn't have a built in stop function. Instead you have to pause the audio, then rewind the file by setting the current time to zero

Code: Select all

    <span>
        <audio><source src="audio_name_goes_here.mp3" type="audio/mpeg"></audio>
        <img src="play.png" onclick="this.parentElement.firstElementChild.play()"></input>
        <img src="pause.png" onclick="this.parentElement.firstElementChild.pause()"></input>
        <img src="stop.png" onclick="this.parentElement.firstElementChild.pause();this.parentElement.firstElementChild.currentTime=0"></input>
    </span>

The only thing to watch for is that the whole thing stays within a single <span> and that you don't add anything between the opening <span> tag and the <audio> element. If you do, the firstElementChild won't be the audio, and it won't play. (e.g. if you want to start on a new line, put the <br> tag before the span.)

I realise that this is pretty simple stuff, but it had escaped me for quite some time, and I had wasted a lot of time using (and debugging) more complicated options, so I thought I'd share it here.

[galaxyrocker]

I actually built a minimal pair tester in Irish a couple of weeks ago (I'd like to expand it to other dialects/languages, but need natives and minimal pair lists) based on a list I had (sadly, I'm pretty sure it's not a complete one, in that a few subtle ones are missed, and only distinguishes broad/slender and same point of articulation), and I used this:

Code: Select all

  cell1.innerHTML = `${element.sound1} (${element.word1}) <audio id='${element.word1.split(' ').join('')}'
  src=${element.source1}></audio><button onclick=document.getElementById('${element.word1.split(' ').join('')}').play()>&#9658;</button>`;

Really, it's basically what you did, except I was populating a table with the pairs from another Javascript file (forEach loop) and had to split and rejoin it if it was more than one word (the file name was one word, but the actual pair only occurred after a mutation, for example, so needed to be split). So it's the same implementation, but taken a bit farther if anyone wants to make some tables with it.