Audio Player

Although all modern browsers support audio, the player does not have an entirely consistent look across all browser types. To avoid this, an audio player library is used to give a consistent appearance to the player across the various browser families.

The player is also 'responsive design' aware so that it adjusts its width depending upon the available space on all devices; mobiles, tablets and desktop PCs. An example is shown below.

Sample WebShell Implementation
A Walk on the Wildside

You can insert a relevant image for the audio track above the player and some  summary text here for the audio itself, e.g. topic, participants, etc. Spot the wildlife car alarm in this music clip...

WebShell Used With a Facebook Portal
Support Signpost

This is arguably the most famous single sequence in any of the classic Goon Shows. In The Mysterious Punch-up-the-Conker (s7, e18), Bluebottle and Eccles are in "the ground floor attic" of a clock repairers...

Sample Player

The player can be placed anywhere within the content area of the page, either within the body text or in the Box-out column.

The controls are simple: A 'Play-Pause' button to start and pause playback and a 'progress' bar which shows how much of the track has played.

To jump to a different part of the audio track, simply click or tap on the desired point in the progress bar and playback will jump to that point and continue playing from there onwards.

Multiple Instances

It's quite possible to have multiple players in a single page. The system takes care of ensuring that each instance is automatically given its own reference.

Having several players on a page can be useful for episodes of audio blogs, Q&A topics, music tracks or similar.

You can even play them simultaneously, although unless you are deliberately using them to generate a soundscape, that's not really recommended!

Using the Player

To use the player, it's simply a matter of inserting the required library and initialising script, then choosing an .mp3 audio track and an image (which should be 600px wide for WebShell) to go with it.

Then simply compose your preamble text and insert it and the relevant URLs into the page code and that's it!

In the majority of modern browsers, the player will use HTML5 audio. If this is not supported, for example in older browsers, then it will fall back to using the Flash™ embedded audio player.