Partial Component
Audio
The Audio partial provides a standard HTML5 audio player with support for multiple audio formats and optional background imagery. It ensures cross-browser compatibility by including both OGG and MPEG audio sources.
Manifest
{
"name": "audio",
"type": "_partials",
"styles": ["audio.css"],
"scripts": [],
"requires": []
}
Configuration
audio:
ogg: '/assets/audio/shattered-reflections.ogg'
mpeg: '/assets/audio/shattered-reflections.mp3'
bgImage: '/assets/images/sample12.jpg'
title: 'Shattered Reflections'
alt: 'Album cover art'
Configuration Options
| Property | Type | Required | Description |
|---|---|---|---|
ogg | string | Yes | Path to OGG audio file |
mpeg | string | Yes | Path to MP3 audio file |
title | string | No | Audio title for accessibility label |
bgImage | string | No | Background image path |
alt | string | No | Alt text for background image |
Example
0:00 0:00
Usage in Templates
{% from "components/_partials/audio/audio.njk" import audio %}
{{ audio(section.audio) }}
Features
- HTML5 Audio: Native browser controls for consistent playback
- Multi-Format: Support for both OGG and MP3 formats
- Background Images: Optional album art or visual accompaniment
- Accessible: Proper ARIA labels and keyboard controls
- Responsive: Adapts to container width