Audio player

Notes for developers

A transcript is required for all audio and video files and should contain a transcript of any audio and text contained within the media.

Adobe Analytics (H code) tracking of audio and video files is included by default with the media player. The media file will be recorded within reports using the heading with the itemprop="name" attribute.

Changing locale settings

Default text for the video controls can be changed for a particular locale.

en: {
	mMediaPlayer : {
		progress : 'played',
		progressTime : 'time',
		restart : 'Restart',
		rewind : 'Rewind',
		play : 'Play',
		playVideo : 'Play video',
		playAudio : 'Play audio',
		pause : 'Pause',
		forward : 'Forward',
		mute : 'Mute',
		volume : 'Volume',
		captions : 'Captions',
		fullscreen : 'Fullscreen',
		seconds : 'seconds',
		on : 'on',
		off : 'off',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

Subtitle or closed captions

To include subtitles/closed captions with a video use the track tag within the video element with an appropriate transcript in WebVTT format. The file must have the MIME type set correctly to text/vtt at the server.

Multiple subtitle tracks can be added to offer subtitles in multiple languages however the JavaScript audio player will currently only offer the one marked as the default.

Visible labels and accessible names

An extra span with the class u-hidden--visually is required within the a-button--download to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:

<a href="..." class="a-button a-button--download">Download MP3 audio file<span class="u-hidden--visually"> for [ audio title  as specified in h3 one level up the DOM ]</span></a>

Note that the audio file format should be included as part of the visible label, as it is not permitted to add extra visible text after the hidden part.

Extension component

This component forms part of the 'extension-media' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/extension-media.css" rel="stylesheet" />

Controling show/hides programatically

The media player can be controlled programatically to play, pause, mute, set and get volume, set and get captions and their settings and set and get a particular point within a media file. The following methods are available for use:

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-media-player' ], function ( mMediaPlayerModule ) {
		var mediaPlayerEl = document.querySelector( '#mediaPlayerTest' ),
			mediaPlayerInstance = mMediaPlayerModule.initInstance( mediaPlayerEl );			mediaPlayerInstance.play();
			mediaPlayerInstance.setCaptions( 'on' );
	});
});

---

Notes for testers

• Ensure that all audio files have a fallback included for when they can't be played or loaded.
• Ensure there are controls which enable users to be in charge of the media and which can be accessed via the keyboard.
• Ensure that all audio files have a full text transcript.
• Length of playback time should be included for audio files.
• Older browsers which do not support HTML5 audio, such as IE8, should be presented with a download link for the audio file.
• Some browsers, including IE9, iPhone, etc, may play the audio file with the native player.

Known accessibility issue

A user can gain focus of the progress bar for the audio player, but they are unable to adjust where they are in the audio using the keyboard.

---

Keyboard operations

TAB

Tabbing to an video or audio control will make it clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on play, pause, mute or full screen, pressing SPACE or ENTER will trigger the relevant behaviour.

Known accessibility issues

A user can gain focus of the progress bar for the audio or video player but they are unable to adjust where they are in the video using the keyboard.