<div class="container">
   <textarea id="textToConvert" placeholder="Nhập nội dung để chuyển văn bản thành giọng nói">Fox Theme đã tối ưu rất tốt từ mã nguồn code, bao gồm một số chức năng được tích hợp độc quyền, bạn không cần sử dụng bất cứ plugin tối ưu nào vì điểm số luôn xanh
   </textarea>
   <button id="chuyen">Chuyển ngay</button>
</div>

<style>
.container {
  font-family: arial;
  position: relative;
  background: linear-gradient(8deg, rgb(198 163 255) 0%, rgb(74 179 211) 100%);
  border-radius: 10px;
  padding: 20px;
  font-size:18px;
}
.container textarea {
    font-family: arial;
    width: 100%;
    height: 180px;
    border-radius: 8px;
    padding: 10px 15px;
    resize: none;
    outline: none;
    background: #0000001f;
    border: 1px solid #ffffff63;
    color: #fff;
    font-size: 16px;
    margin-bottom:20px;
}
.container textarea::placeholder {
  color: fff;
}
.container button {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: #b6a5f7ba;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #ffffff75;
}
.container button:hover {
  	opacity:0.5;
}
</style>
<script>
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");
let isSpeaking = true;
const textToSpeech = () => {
  const synth = window.speechSynthesis;
  const text = textarea.value;

if (!synth.speaking && text) {
    const utternace = new SpeechSynthesisUtterance(text);
    synth.speak(utternace);
  }

if (text.length > 50) {
    if (synth.speaking && isSpeaking) {
      button.innerText = "Dừng";
      synth.resume();
      isSpeaking = false;
    } else {
      button.innerText = "Tiếp";
      synth.pause();
      isSpeaking = true;
    }
  } else {
    isSpeaking = false;
    button.innerText = "Chuyển ngay";
  }

setInterval(() => {
    if (!synth.speaking && !isSpeaking) {
      isSpeaking = true;
      button.innerText = "Chuyển ngay";
    }
  });
};
button.addEventListener("click", textToSpeech);
</script>

<div class="container">
   <textarea id="textToConvert" placeholder="Nhập nội dung để chuyển văn bản thành giọng nói">Fox Theme đã tối ưu rất tốt từ mã nguồn code, bao gồm một số chức năng được tích hợp độc quyền, bạn không cần sử dụng bất cứ plugin tối ưu nào vì điểm số luôn xanh
   </textarea>
   <button id="chuyen">Chuyển ngay</button>
</div>

<style>
.container {
  font-family: arial;
  position: relative;
  background: linear-gradient(8deg, rgb(198 163 255) 0%, rgb(74 179 211) 100%);
  border-radius: 10px;
  padding: 20px;
  font-size:18px;
}
.container textarea {
    font-family: arial;
    width: 100%;
    height: 180px;
    border-radius: 8px;
    padding: 10px 15px;
    resize: none;
    outline: none;
    background: #0000001f;
    border: 1px solid #ffffff63;
    color: #fff;
    font-size: 16px;
    margin-bottom:20px;
}
.container textarea::placeholder {
  color: fff;
}
.container button {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: #b6a5f7ba;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #ffffff75;
}
.container button:hover {
  	opacity:0.5;
}
</style>
<script>
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");
let isSpeaking = true;
const textToSpeech = () => {
  const synth = window.speechSynthesis;
  const text = textarea.value;

if (!synth.speaking && text) {
    const utternace = new SpeechSynthesisUtterance(text);
    synth.speak(utternace);
  }

if (text.length > 50) {
    if (synth.speaking && isSpeaking) {
      button.innerText = "Dừng";
      synth.resume();
      isSpeaking = false;
    } else {
      button.innerText = "Tiếp";
      synth.pause();
      isSpeaking = true;
    }
  } else {
    isSpeaking = false;
    button.innerText = "Chuyển ngay";
  }

setInterval(() => {
    if (!synth.speaking && !isSpeaking) {
      isSpeaking = true;
      button.innerText = "Chuyển ngay";
    }
  });
};
button.addEventListener("click", textToSpeech);
</script>

Mã nhúng & chia sẻ

Code chuyển văn bản thành giọng nói