一、创意效果介绍
在输入框内输入字(中文、英文等)它会朗读出来,它还会调节速度,声音的高度,选择微软的朗读效果等。
二、效果图片
三、设计代码
(1)HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>星染夜空字转语音</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<label for="text">Text to speak:</label>
<textarea id="text">星染夜空的字转语音</textarea>
<div class="properties">
<label for="voice">Voice:</label>
<select id="voice"></select>
<div></div>
<label for="pitch">Pitch:</label>
<input id="pitch" type="range" min="0.1" max="2" step="0.1" value="1" />
<output for="pitch">1</output>
<label for="rate">Rate:</label>
<input id="rate" type="range" min="0.1" max="2" step="0.1" value="1" />
<output for="rate">1</output>
<label for="volume">Volume:</label>
<input id="volume" type="range" min="0" max="1" step="0.1" value="1" />
<output for="volume">1</output>
</div>
<button id="speak">Speak Text</button>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
(2)CSS
*, *::before, *::after {
box-sizing: border-box;
}
body {
display: grid;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
color: #fff;
/* background-image: linear-gradient(45deg, #4158d0, #c850c0, #ffcc70); */
background-color: #c850c0;
font: 1.25rem/1 'Poppins', sans-serif;
}
.wrapper {
display: grid;
gap: 20px;
width: 600px;
max-width: calc(100vw - 40px);
padding: 30px;
border-radius: 10px;
background-color: #0003;
}
#text {
display: block;
height: 100px;
padding: 20px;
border: none;
font-size: inherit;
font-family: inherit;
resize: vertical;
border-radius: 10px;
}
.properties {
display: grid;
grid-template-columns: max-content minmax(0, auto) 40px;
gap: 20px;
padding: 20px;
background-color: #0003;
border-radius: 10px;
}
#voice {
font-size: 0.875rem;
font-family: inherit;
}
#speak {
padding: 10px;
border: 1px solid #fff;
color: #fff;
background-color: #0009;
font-size: inherit;
font-family: inherit;
cursor: pointer;
appearance: none;
border-radius: 10px;
}
(3)JavaScript
// grab the UI elements to work with
const textEl = document.getElementById('text');
const voiceInEl = document.getElementById('voice');
const pitchInEl = document.getElementById('pitch');
const rateInEl = document.getElementById('rate');
const volumeInEl = document.getElementById('volume');
const pitchOutEl = document.querySelector('output[for="pitch"]');
const rateOutEl = document.querySelector('output[for="rate"]');
const volumeOutEl = document.querySelector('output[for="volume"]');
const speakEl = document.getElementById('speak');
// add UI event handlers
pitchInEl.addEventListener('change', updateOutputs);
rateInEl.addEventListener('change', updateOutputs);
volumeInEl.addEventListener('change', updateOutputs);
speakEl.addEventListener('click', speakText);
// update voices immediately and whenever they are loaded
updateVoices();
window.speechSynthesis.onvoiceschanged = updateVoices;
function updateOutputs() {
// display current values of all range inputs
pitchOutEl.textContent = pitchInEl.value;
rateOutEl.textContent = rateInEl.value;
volumeOutEl.textContent = volumeInEl.value;
}
function updateVoices() {
// add an option for each available voice that isn't already added
window.speechSynthesis.getVoices().forEach(voice => {
const isAlreadyAdded = [...voiceInEl.options].some(option => option.value === voice.voiceURI);
if (!isAlreadyAdded) {
const option = new Option(voice.name, voice.voiceURI, voice.default, voice.default);
voiceInEl.add(option);
}
});
}
function speakText() {
// Stop other speaking progress
window.speechSynthesis.cancel();
// Create new utterance with all the properties
const text = textEl.value;
const utterance = new SpeechSynthesisUtterance(text);
utterance.voice = window.speechSynthesis.getVoices().find((voice) => {
return voice.voiceURI === voiceInEl.value
});
utterance.pitch = pitchInEl.value;
utterance.rate = rateInEl.value;
utterance.volume = volumeInEl.value;
// Speak the utterance
window.speechSynthesis.speak(utterance);
}