Origami Frontend Components & Services

Readme: g-audio

g-audio is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

g-audio has a support status of "experimental". This means that the component's API may change without notice, and there is no guarantee that the component is ready for production use.

This is an origami component to help create styled audio players for IG pages. This is currently experimental.

Check out how to include Origami components in your project to get started with g-audio.

Getting started

Install the module:

npm install @financial-times/g-audio

Load the JS:

import GAudio from '@financial-times/g-audio';


Load the CSS:

@import '@financial-times/g-audio/main';

@include gAudio();

Copy markup from one of the following demos:

To create an audio player inline with text:

<span class="g-audio">
  Bring to the table win-win survival
  <audio controls>
    <source src="demo.mp3" type="audio/mpeg">

To create an audio player between paragraphs of text (in development):

<span class="g-audio g-audio--block">
  Podcasting operational change management
  <audio controls>
    <source src="demo2.mp3" type="audio/mpeg">


State Major Version Last Minor Release Migration guide
✨ active 2 N/A migrate to v2
⚠ maintained 1 1.0.7 N/A


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub: g-audio@2.0.2

Install g-audio

If using the Build Service, add g-audio@^2.0.2 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/g-audio@^2.0.2".

Help & Support

g-audio is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #djd-comms
Email: data.journalism.development@ft.com