For epsilon theme:
css/style.css add:
#voiceSearchButton {
background-color: #f9f9f9;
border: none;
position: absolute;
top: 20%;
right: 16px; /* Increase the distance from the left side of the search field */
transform: translateY(-50%);
padding: 8px;
cursor: pointer;
font-size: 20px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip {
position: absolute;
bottom: calc(100% + 15px); /* Place tooltip above the button */
left: 50%; /* Center the 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 by default */
}
.voice-search-container {
position: relative;
display: inline-block;
}
/* Show tooltip on hover */
#voiceSearchButton:hover .tooltip {
display: 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 met Tooltip -->
<div class="voice-search-container">
<button type="button" id="voiceSearchButton" aria-label="<?php _e('Voice Search', 'epsilon'); ?>"><svg height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512"><g><g><path d="m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z"/><path d="m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z"/></g></g></svg></button>
<div id="tooltip" class="tooltip">Aan het luisteren...</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>
// Controleer of de browser spraakherkenning ondersteunt
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'nl-NL'; // standaardtaal
recognition.continuous = false; // Stop na één zoekopdracht
recognition.interimResults = false; // Geen tussentijdse resultaten
const tooltip = document.getElementById('tooltip');
const voiceSearchButton = document.getElementById('voiceSearchButton');
// Start spraakherkenning bij klik op de knop
voiceSearchButton.addEventListener('click', function () {
tooltip.style.display = 'block'; // Toon de tooltip
recognition.start();
});
// Wanneer spraakherkenning resultaten oplevert
recognition.onresult = function (event) {
const spokenWords = event.results[0][0].transcript;
document.getElementById('searchInput').value = spokenWords;
tooltip.style.display = 'none'; // Verberg de tooltip
document.getElementById('searchForm').submit(); // Automatisch zoeken
};
// Stop de tooltip bij fout of beëindiging
recognition.onerror = recognition.onend = function () {
tooltip.style.display = 'none';
};
} else {
alert('Uw browser ondersteunt geen spraakherkenning.');
}
</script>
<?php eps_get_latest_searches(20) ?>