Sound Mute Tool

Overview

The Sound Mute tool automatically detects and mutes all audio and video elements on the page to prevent unexpected sounds. This tool is essential for users with sensory sensitivities, autism, or those in quiet environments where sudden audio could be disruptive.

Features

• Universal Audio Control: Detects and mutes all HTML5 audio and video elements
• External Player Support: Controls YouTube and Vimeo embedded players when APIs are available
• Automatic Detection: Finds existing media and monitors for dynamically added content
• Non-Destructive: Preserves original volume settings for restoration when disabled
• Real-time Monitoring: Uses MutationObserver to detect new media elements
• Volume Lock: Prevents media elements from unmuting themselves

Settings

Level	Description
Disabled	Audio and video elements play normally
Enabled	All audio and video elements are automatically muted

Usage

1. Click the Sound Mute button in the accessibility toolbar
2. All audio and video elements on the page are immediately muted
3. New media elements that load are automatically detected and muted
4. Original volume levels are preserved for restoration
5. Click the button again to restore original audio settings

Accessibility Benefits

• Sensory Processing: Prevents overwhelming auditory stimuli for sensitive users
• Autism Support: Reduces sensory overload from unexpected sounds
• ADHD Assistance: Eliminates audio distractions that can break concentration
• Hearing Sensitivity: Protects users with hyperacusis or sound sensitivity
• Environmental Control: Allows browsing in quiet environments
• Surprise Prevention: Eliminates startling sounds from auto-playing media

Media Detection

Supported Elements

• HTML5 Audio: <audio> elements with any source format
• HTML5 Video: <video> elements including embedded videos
• YouTube Embeds: iframe elements with YouTube URLs (when YouTube API is loaded)
• Vimeo Embeds: iframe elements with Vimeo URLs (when Vimeo API is loaded)

Detection Method

• Initial Scan: Searches for all existing media elements on activation
• MutationObserver: Monitors DOM changes for dynamically added media
• Volume Lock: Prevents media from changing mute state while tool is active
• Original State Preservation: Stores original volume and mute settings using data attributes
• External API Integration: Attempts to control YouTube and Vimeo players when their APIs are available

Technical Details

• Uses data-ada-original-volume and data-ada-original-muted attributes to store original settings
• Applies ada-sound-muted class to HTML element for CSS styling
• Handles iframe delays with setTimeout for external player initialization
• Gracefully handles API unavailability with warning logs

API Usage Example

The Sound Mute tool can be programmatically controlled using the widget API:

// Basic activation
window.BrowseAidWidget.api.enableTool('sound-mute');

// Enable with settings (only 'enabled' setting is supported)
window.BrowseAidWidget.api.enableTool('sound-mute', {
  enabled: true
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('sound-mute', {
  enabled: true
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('sound-mute');
console.log('Sound Mute is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('sound-mute');
console.log('Current Sound Mute settings:', settings);
// Returns: { enabled: true/false }

// Disable the tool
window.BrowseAidWidget.api.disableTool('sound-mute');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'sound-mute') {
    console.log('Sound Mute settings changed:', settings);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the sound mute tool

Usage Examples

// Enable sound muting for sensory-friendly browsing
window.BrowseAidWidget.api.enableTool('sound-mute', {
  enabled: true
});

// Check if any media elements were detected and muted
function checkMutedMedia() {
  const audioElements = document.querySelectorAll('audio[data-ada-original-volume]');
  const videoElements = document.querySelectorAll('video[data-ada-original-volume]');
  const youtubeIframes = document.querySelectorAll('iframe[src*="youtube"][data-ada-original-volume]');
  const vimeoIframes = document.querySelectorAll('iframe[src*="vimeo"][data-ada-original-volume]');

  const mediaCount = {
    audio: audioElements.length,
    video: videoElements.length,
    youtube: youtubeIframes.length,
    vimeo: vimeoIframes.length,
    total: audioElements.length + videoElements.length + youtubeIframes.length + vimeoIframes.length
  };

  console.log('Currently muted media elements:', mediaCount);
  return mediaCount;
}

// Automatically enable on pages with auto-playing content
function enableOnAutoPlay() {
  // Listen for any media that starts playing
  document.addEventListener('play', (event) => {
    if (event.target instanceof HTMLMediaElement) {
      console.log('Media started playing, enabling sound mute');
      window.BrowseAidWidget.api.enableTool('sound-mute');
    }
  }, true);
}

// Smart activation based on page content
function smartSoundMuting() {
  const hasVideo = document.querySelectorAll('video, iframe[src*="youtube"], iframe[src*="vimeo"]').length > 0;
  const hasAudio = document.querySelectorAll('audio').length > 0;
  const hasAutoplay = document.querySelectorAll('[autoplay]').length > 0;

  // Enable if there's autoplay content or multiple media elements
  if (hasAutoplay || (hasVideo && hasAudio)) {
    window.BrowseAidWidget.api.enableTool('sound-mute', {
      enabled: true
    });
    console.log('Auto-enabled sound mute due to detected media content');
  }
}

// Monitor for external player API availability
function waitForExternalAPIs() {
  // Check for YouTube API
  if (typeof window.YT === 'undefined') {
    console.log('YouTube API not available - embedded YouTube videos may not be controllable');
  }

  // Check for Vimeo API
  if (typeof window.Vimeo === 'undefined') {
    console.log('Vimeo API not available - embedded Vimeo videos may not be controllable');
  }
}

Integration Notes

• External APIs: YouTube and Vimeo player control requires their respective APIs to be loaded
• Iframe Limitations: Cross-origin iframe content may not be controllable without API access
• Performance: Uses efficient MutationObserver for minimal performance impact
• State Preservation: Original audio settings are preserved and restored when tool is disabled
• CSS Integration: Adds ada-sound-muted class to HTML element for styling purposes