Volume Control Component

A comprehensive, framework-agnostic volume control component for web applications. Provides seamless integration with HTML5 audio elements and Web Audio API, featuring accessibility support, localStorage persistence, and event-driven architecture.

Features

• Framework Agnostic: Works with vanilla JavaScript, React, and other frameworks
• HTML5 Audio Integration: Direct control of <audio> elements
• Web Audio API Support: Connect to GainNodes for advanced audio processing
• Accessibility: Full ARIA support and keyboard navigation
• Persistence: Automatically saves volume preferences to localStorage
• Event System: onVolumeChange and onMuteToggle callbacks
• Customizable: Configurable range, steps, and default values
• Responsive: Works on desktop and mobile devices

Installation

No installation required! Just include the JavaScript and CSS files:

<link rel="stylesheet" href="volume-control.css">
<script src="volume-control.js"></script>

Quick Start

Vanilla JavaScript

// Create volume control
const volumeControl = new VolumeControl();

// Add to DOM
document.body.appendChild(volumeControl.getElement());

// Connect to audio element
const audio = new Audio('audio.mp3');
volumeControl.connectAudioElement(audio);

// Listen for events
volumeControl.on('onVolumeChange', (volume, muted) => {
    console.log('Volume:', volume, 'Muted:', muted);
});

React Usage

import VolumeControlReact from './volume-control-react';

function AudioPlayer() {
    const audioRef = useRef(null);

    return (
        <div>
            <audio ref={audioRef} src="audio.mp3" />
            <VolumeControlReact 
                audioElement={audioRef.current}
                onVolumeChange={(volume, muted) => console.log(volume, muted)}
            />
        </div>
    );
}

API Reference

VolumeControl Class

Constructor Options

new VolumeControl({
    min: 0,           // Minimum volume (0-100)
    max: 100,         // Maximum volume (0-100)  
    step: 1,          // Step increment
    defaultValue: 70, // Initial volume
    storageKey: 'volume-level' // localStorage key
});

Methods

• getElement(): Returns the DOM element
• connectAudioElement(audioElement): Connect to HTML5 audio
• connectGainNode(gainNode): Connect to Web Audio API GainNode
• setVolume(volume, silent): Set volume programmatically
• toggleMute(): Toggle mute state
• on(event, callback): Add event listener
• off(event, callback): Remove event listener
• destroy(): Clean up

Events

• onVolumeChange(volume, muted): Volume changed
• onMuteToggle(volume, muted): Mute state changed

React Component Props

<VolumeControlReact
    min={0}
    max={100}
    step={1}
    defaultValue={70}
    storageKey="volume-level"
    audioElement={audioElement}
    gainNode={gainNode}
    onVolumeChange={(volume, muted) => {}}
    onMuteToggle={(volume, muted) => {}}
    className="custom-class"
    style={{ margin: '10px' }}
/>

Keyboard Controls

• Arrow Keys: Adjust volume (←/↓ decrease, →/↑ increase)
• M Key: Toggle mute (when slider focused)
• Enter/Space: Toggle mute (when mute button focused)

Accessibility

• Full ARIA attributes support
• Screen reader compatible
• Keyboard navigation
• High contrast mode support
• Reduced motion support

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Examples

See the example.html file for a complete demo with:

• Vanilla JavaScript usage
• HTML5 audio integration
• Event logging
• Programmatic control examples

Building from Source

No build process required! The component works as standalone JavaScript.

License

MIT License - feel free to use in your projects.

Changelog

v1.0.0 (2024-01-01)

• Initial release
• Framework-agnostic volume control
• HTML5 audio integration
• Web Audio API support
• Accessibility features
• localStorage persistence
• Event system
• React wrapper component

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions, please open an issue on GitHub.