Provides responsive styling for HTML5 audio elements with automatic figure integration and speaker icon indicators. Audio elements are automatically styled to be responsive and work well within figure containers.
Usage
Use standard HTML5 <audio> elements. For enhanced styling, wrap them in <figure class="audio"> containers with optional captions.
Available Options
CSS Classes:
figure.audio - Container for audio with speaker icon
Automatic Features:
Responsive width (100% of container)
Proper margins and spacing
Speaker icon in captions (FontAwesome)
Block-level display
Examples
Basic Audio Element
This is a basic HTML5 audio element with responsive styling.
Audio with Figure Container
Introduction to Occupational Health and Safety
Multiple Audio Sources
Audio with multiple format support for better browser compatibility
Audio with Additional Content
Safety Training Audio
This audio covers the fundamental principles of workplace safety.
Duration: 5 minutes
Format: MP3
Quality: High
Notes
Audio elements automatically get responsive styling (100% width)
Use figure.audio for enhanced styling with speaker icon
Captions can contain any HTML content including headings and lists
Provide multiple source formats for better browser compatibility
Always include fallback text for browsers that don't support audio
Audio elements work well in side-by-side layouts
Consider file size and loading times for audio content