Page Reader : Demo, With icon
Page Reader: Demo, With icon
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Reader Feature</title>
<style>
#content {
font-size: 16px;
font-weight: bold;
margin: 20px;
}
.highlight {
background-color: lightyellow; /* Highlight color for selected text */
}
/* Speaker button style */
#page-reader {
position: fixed;
top: 10px;
right: 70px;
display: flex;
align-items: center;
cursor: pointer;
background-color: royalblue;
color: white;
padding: 10px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- Speaker Icon and Text -->
<div id="page-reader" onclick="readContent()" style="top: 70px;">
<span class="speaker-icon" style="font-size: 24px; margin-right: 5px;">🔊</span>
<span class="speaker-text" style="font-size: 16px; font-weight: bold;">Listen</span>
</div>
<!-- Sample Text -->
<div id="content">
<h1>Welcome to Our Website</h1>
<p>This is an example page with a page reader feature. When you click on the speaker icon, the text on the page will be read aloud to you.</p>
</div>
<!-- Inline JavaScript -->
<script>
function readContent() {
const content = document.getElementById('content');
const pageReader = document.getElementById('page-reader');
// Highlight the content
content.classList.add('highlight');
// Get the text content to read
const textToRead = content.innerText;
// Change the button color to green on click
pageReader.style.backgroundColor = 'green';
// Check if the browser supports speech synthesis
if ('speechSynthesis' in window) {
const speech = new SpeechSynthesisUtterance(textToRead);
speech.lang = 'en-US';
speech.pitch = 1;
speech.rate = 1;
window.speechSynthesis.speak(speech);
// Reset highlight after reading
speech.onend = function() {
content.classList.remove('highlight');
pageReader.style.backgroundColor = 'royalblue'; // Reset button color
};
} else {
alert('Sorry, your browser does not support speech synthesis.');
}
}
</script>
</body>
</html>
Output:
Listen
Welcome to Our Website
This is an example page with a page reader feature. When you click on the speaker icon, the text on the page will be read aloud to you.
Comments
Post a Comment