For epsilon theme:
css/style.css add:
#voiceSearchButton {
background-color: #f9f9f9;
border: none;
padding: 10px;
cursor: pointer;
font-size: 20px;
margin-right: 15px; /* Add distance between microphone button and search button here */
position: relative;
}
/* Tooltip style */
.tooltip {
position: absolute;
bottom: calc(100% + 15px); /* Place tooltip above button with extra margin */
left: 50%; /* Center tooltip horizontally */
transform: translateX(-50%);
background-color: #00bdd6;
color: #f9f9f9;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
z index: 10;
display: none; /* Hide default */
}
.voice-search-container {
position: relative;
display: inline block;
}
In main.php ad:
<form action="<?php echo osc_base_url(true); ?>" method="GET" class="nocsrf" id="searchForm">
<input type="hidden" name="page" value="search" />
<?php if ($location_cookie['success'] == true) { ?>
<?php if ($location_cookie['fk_i_city_id'] > 0) { ?>
<input type="hidden" class="loc-inp" name="sCity" value="<?php echo osc_esc_html($location_cookie['fk_i_city_id']); ?>" />
<?php } elseif ($location_cookie['fk_i_region_id'] > 0) { ?>
<input type="hidden" class="loc-inp" name="sRegion" value="<?php echo osc_esc_html($location_cookie['fk_i_region_id']); ?>" />
<?php } elseif ($location_cookie['fk_c_country_code'] <> '') { ?>
<input type="hidden" class="loc-inp" name="sCountry" value="<?php echo osc_esc_html($location_cookie['fk_c_country_code']); ?>" />
<?php } ?>
<?php } ?>
<div class="input-box picker pattern">
<input type="text" id="searchInput" name="sPattern" class="pattern" placeholder="<?php _e('Enter keyword...', 'epsilon'); ?>" value="<?php echo osc_esc_html(Params::getParam('sPattern')); ?>" autocomplete="on" />
<i class="clean fas fa-times-circle"></i>
<div class="results">
<div class="loaded"></div>
<div class="default"><?php eps_default_pattern_content(); ?></div>
</div>
</div>
<!-- Voice Search Button with Tooltip -->
<div class="voice-search-container">
<button type="button" id="voiceSearchButton" aria-label="<?php _e('Voice Search', 'epsilon'); ?>">🎤</button>
<div id="tooltip" class="tooltip">Listening...</div>
</div>
<button class="btn" type="submit" aria-label="<?php _e('Search', 'epsilon'); ?>"><i class="fa fa-search"></i><span><?php _e('Search', 'epsilon'); ?></span></button>
</form>
<script>
// Check if the browser supports speech recognition
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US'; // Default language (American English)
recognition.continuous = false; // Stop after one search
recognition.interimResults = false; // No interim results
const tooltip = document.getElementById('tooltip');
const voiceSearchButton = document.getElementById('voiceSearchButton');
// Start speech recognition when clicking the button
voiceSearchButton.addEventListener('click', function () {
tooltip.style.display = 'block'; // Show the tooltip
recognition.start();
});
// When speech recognition returns results
recognition.onresult = function (event) {
const spokenWords = event.results[0][0].transcript;
document.getElementById('searchInput').value = spokenWords;
tooltip.style.display = 'none'; // Hide the tooltip
document.getElementById('searchForm').submit(); // Automatically submit the form
};
// Hide the tooltip on error or when recognition ends
recognition.onerror = recognition.onend = function () {
tooltip.style.display = 'none';
};
} else {
alert('Your browser does not support speech recognition.');
}
</script>
<?php eps_get_latest_searches(20) ?>