Sound Resources
Available Sounds
Located at: /sounds/
Sound Files
- click.mp3 - UI click/tap sound effect
- analog.mp3 - Analog/vintage sound effect
Format: MP3 (universally supported)
Usage Example
<!-- Preload sounds for instant playback -->
<audio id="clickSound" preload="auto">
<source src="https://cdn.ttmenus.com/sounds/click.mp3" type="audio/mpeg">
</audio>
<audio id="analogSound" preload="auto">
<source src="https://cdn.ttmenus.com/sounds/analog.mp3" type="audio/mpeg">
</audio>
<script>
// Play sound on button click
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('clickSound').play();
});
</script>
JavaScript Integration
Using the TT Menus sound.js module:
<script src="https://cdn.ttmenus.com/js/sound.js"></script>
<script>
// Sound.js handles sound management automatically
// Sounds play on UI interactions
</script>
Use Cases
- click.mp3: Button clicks, menu selections, navigation
- analog.mp3: Special interactions, confirmations, notifications
Browser Support
MP3 format is supported by all modern browsers:
- Chrome/Edge: ✓
- Firefox: ✓
- Safari: ✓
- Mobile browsers: ✓
Best Practices
- Preload sounds for instant playback
- Respect user preferences - check if user has audio enabled
- Volume control - keep UI sounds subtle (0.3-0.5 volume)
- Accessibility - provide visual feedback alongside audio cues
// Example: Respectful sound playback
function playClickSound() {
const sound = document.getElementById('clickSound');
sound.volume = 0.4; // Subtle volume
// Only play if user hasn't muted
if (!localStorage.getItem('soundsMuted')) {
sound.play().catch(e => {
// Handle autoplay restrictions
console.log('Sound playback failed:', e);
});
}
}
Cache Headers
Sound files are cached for 1 year with immutable flag for optimal performance.
File Sizes
- click.mp3: ~15-30KB
- analog.mp3: ~20-40KB
Small file sizes ensure quick loading and minimal bandwidth usage.