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.

Getting started

Install the module:

bower install --S g-audio

Load the JS:

const GAudio = require('g-audio');


Load the CSS:

@import 'g-audio/main';

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


Copyright (c) 2016 Financial Times Ltd. All rights reserved.

This software is published under the MIT licence.

Switch component view

GitHub Repository

Install g-audio

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

If running a Manual Build, run bower install --save "g-audio@^1.0.5".

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: #graphics-dev
Email: ig.developers@ft.com