NewsKit Mobile Logo

Audio Player

Overview

The Audio Player component is a collection of custom features and elements built around the native <audio> element.

Usage

The Audio Player requires a source stream to be passed in as a prop. This will then be loaded into the internal <audio> element for playback.

Props

srcstring
URL of the audio source to be played.
liveboolean
If true will display the controls for live player.
autoplayboolean
Even though the feature is supported in most browser but the browser will only follow this setting if:
  • you are on a desktop browser. it will not work on mobile browsers to prevent users from eating into their mobile data allowance
  • it can't happen on page load, the user has to interact with the site for it to work: navigating inside an SPA seems to satisfy the browser as there was no page refresh.
In Summary autoplay will work in some scenarios, this is expected. It's best thought of as a suggestion for the browser: play the audio automatically if it's acceptable from a usability perspective
captionSrcstring
Source for audio transcription generally provided in web vtt format.
onPreviousTrackfunction
This function defines the callback of the previous track button for the first 5 secodns of the track. If onPreviousTrack is not provided, the previous track button will be disabled for the first 5 seconds of the track. After the first 5 seconds the button's functionality is overridden to go to the start of the track.
onNextTrackfunction
Will display the next track button, provided function is executed on click.
disableNextTrackboolean
Disable the next track button.
disablePreviousTrackboolean
Disable the previous track button.
popoutHrefstring
Url to player hosted by itself on page. Will open in a new window and pause current instance.
ariaLandmarkstring = audio-player
The aria-label attribute for the audio player. It is recommended that you set this for screen readers to be able to explain the audio player purpose. If left undefined it is simply set to "audio-player". ariaLandmark should be unique, so the same value should not appear on the same page more than once.
overridesobject
seekBarobject
sliderSliderOverrideProps
If provided overrides the styles of the seek bar slider. The slider overrides structure can be found in the slider documentation page. If player is in live mode, the seek bar slider is not shown and this override is ignored.
bufferingobject
stylePresetMQ<string>
Overrides the stylePreset of the buffering section of the seek bar. If player is in live mode, the seek bar slider is not shown and this override is ignored.
controlsControlsOverrideProps
This prop is an object containing the following optional button style presets.
spaceMQ<string>
Setting the space between the control buttons.
previousButtonobject
stylePresetMQ<string>
Preset for previous track button.
replayButtonobject
stylePresetMQ<string>
Preset for skip replay button.
playPauseButtonobject
stylePresetMQ<string>
Preset for play / pause button.
forwardButtonobject
stylePresetMQ<string>
Preset for skip forward button.
nextButtonobject
stylePresetMQ<string>
Preset for next track button.
popoutButtonobject
stylePresetMQ<string>
Preset for popout button.
volumeControlVolumeControlOverrideProps
If provided overrides the styles of the slider that builds the VolumeControl. The volume control overrides structure can be found in the volume control documentation page.
{
  seekBar: {
    slider: {
      track: {
        stylePreset: "audioPlayerSeekBarTrack",
        size: "sizing020"
      },
      indicator: {
        stylePreset: "audioPlayerSeekBarIndicator"
      },
      thumb: {
        stylePreset: "audioPlayerThumb",
        size: "sizing040"
      },
      thumbLabel: {
        stylePreset: "audioPlayerLabels"
      },
      labels: {
        stylePreset: "audioPlayerLabels"
      }
    },
    buffering: {
      stylePreset: "audioPlayerSeekBarBuffering"
    }
  },
  controls: {
    space: "space030",
    previousButton: {
      stylePreset: "audioPlayerControlButton"
    },
    replayButton: {
      stylePreset: "audioPlayerControlButton"
    },
    playPauseButton: {
      stylePreset: "audioPlayerPlayPauseButton"
    },
    forwardButton: {
      stylePreset: "audioPlayerControlButton"
    },
    nextButton: {
      stylePreset: "audioPlayerControlButton"
    },
    popoutButton: {
      stylePreset: "audioPlayerControlButton"
    }
  },
  volumeControl: {
    slider: {
      track: {
        stylePreset: "volumeControlTrack",
        size: "sizing010"
      },
      indicator: {
        stylePreset: "volumeControlIndicator"
      },
      thumb: {
        stylePreset: "audioPlayerVolumeControlThumb",
        size: "sizing040"
      },
      thumbLabel: {
        stylePreset: "volumeControlLabels"
      },
      labels: {
        stylePreset: "volumeControlButtons"
      }
    }
  }
}

Playground - Live Player

Use the arrow keys to adjust volume
Props
Auto Play
import React from 'react';
import { AudioPlayer } from 'newskit';

export default () => (
  <AudioPlayer
    src="https://radio.talkradio.co.uk/stream"
    captionSrc="captionsSrc.vtt"
    ariaLandmark="live audio player"
  />
);

Playground - Recorded Player

Use the arrow keys to adjust volume
00:00
Use the arrow keys to fast forward or rewind
Props
Auto Play
Disable Previous Track
Disable Next Track
import React from 'react';
import { AudioPlayer } from 'newskit';

export default () => (
  <AudioPlayer
    src="https://extras.thetimes.co.uk/web/public/2018/world-cup-alexa-breifing/assets/latest-briefing.mp3"
    captionSrc="captionsSrc.vtt"
    ariaLandmark="recorded audio player"
    disablePreviousTrack
    popoutHref="https://newskit.co.uk"
  />
);

Rationale

Styling

The Audio Player's internal components can be styled as required.

Accessibility

The controls of the Audio Player are fully accessible with the keyboard.