A minimal audio interface for HTML 5

Small area for language related software developers. If you have a feature request please put in the appropriate place. This area is for developers of language software and forum software development only.
Black Belt - 3rd Dan
Posts: 3019
Joined: Thu Jul 30, 2015 11:04 am
Location: Scotland
Languages: English(N)
Advanced: French,Spanish, Scottish Gaelic
Intermediate: Italian, Catalan, Corsican
Basic: Welsh
Dabbling: Polish, Russian etc
x 7565

A minimal audio interface for HTML 5

Postby Cainntear » Mon Feb 06, 2017 8:20 pm

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

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

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

        <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>

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

        <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>

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.
play.png (641 Bytes) Viewed 19179 times
5 x

Brown Belt
Posts: 1062
Joined: Mon Jul 20, 2015 12:44 am
Languages: English (N), Irish (Teastas Eorpach na Gaeilge B2), French, dabbling elsewhere sometimes
Language Log: viewtopic.php?f=15&t=757
x 3046

Re: A minimal audio interface for HTML 5

Postby galaxyrocker » Tue Feb 07, 2017 12:50 am

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.
0 x

Return to “Development Area”

Who is online

Users browsing this forum: No registered users and 2 guests