前端字转语音

最新推荐文章于 2024-04-25 15:31:33 发布

星染夜空

最新推荐文章于 2024-04-25 15:31:33 发布

阅读量468

点赞数 6

文章标签：前端 javascript html5 css vscode

本文链接：https://blog.csdn.net/hexuhui0920/article/details/134919500

版权

一、创意效果介绍

在输入框内输入字（中文、英文等）它会朗读出来，它还会调节速度，声音的高度，选择微软的朗读效果等。

二、效果图片

三、设计代码

（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);
}