Maison >interface Web >js tutoriel >Comment convertir du texte en son à l'aide de JavaScript
Comment convertir du texte en son à l'aide de JavaScript
- 藏色散人original
- 2021-07-13 16:00:194133parcourir
Comment convertir du texte en son à l'aide de JavaScript : créez d'abord un exemple de fichier HTML ; puis ajoutez du code js et enfin utilisez l'interface SpeechSynthesisUtterance pour synthétiser le texte spécifié dans le discours correspondant ;
L'environnement d'exploitation de cet article : Système Windows7, javascript1.8.5, ordinateur Dell G3.
Comment convertir du texte en son en JavaScript ?
Lecture de synthèse vocale js
SpeechSynthesisUtterance
SpeechSynthesisUtterance est une nouvelle API en HTML5, utilisée pour synthétiser le texte spécifié dans le texte correspondant Voix. Il contient également quelques éléments de configuration pour spécifier comment lire (langue, volume, tonalité), etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="textMsg" value="有新的订单，请及时处理">
<button onclick="speak()">播放</button>
<button onclick="pause()">暂停</button>
<button onclick="resume()">继续播放</button>
<button onclick="cancel()">取消播放</button>
<script>
var speech = new SpeechSynthesisUtterance();
// 播放
function speak() {
// speech.pitch = 1 // 获取并设置话语的音调(值越大越尖锐,越低越低沉)
// speech.rate = 5 // 获取并设置说话的速度(值越大语速越快,越小语速越慢)
// speech.voice = 10 // 获取并设置说话的声音
// speech.volume = 1 // 获取并设置说话的音量
// speech.lang = speechSynthesis.getVoices()[0] // 设置播放语言，测试没效果
// speech.cancel() // 删除队列中所有的语音.如果正在播放,则直接停止
speech.text = textMsg.value // 获取并设置说话时的文本
speechSynthesis.speak(speech);
}
// 暂停
function pause() {
speechSynthesis.pause()
}
// 继续播放
function resume() {
speechSynthesis.resume()
}
// 取消播放
function cancel() {
speechSynthesis.cancel()
}
</script>
</body>
</html>astuces : S'il n'y a pas de son pendant la lecture, vous pouvez essayer de redémarrer le navigateur pour jouer
Apprentissage recommandé : "tutoriel avancé javascript》
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!