基於html環境
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>百度語音測試</title>
<meta content="webkit" name="renderer">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="https://cdn.90so.net/layui/2.4.5/css/layui.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body class="layui-container">
<div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>文字轉語音播放Demo</legend>
</fieldset>
<form class="layui-form" id="ttsFrom">
<div class="layui-form-item">
<label class="layui-form-label">語音文案：</label>
<div class="layui-input-block">
<input class="layui-input" id="ttsText" name="title" placeholder="請輸入待轉換的語音文案" type="text"
value="hello 小姐姐.">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">情感聲音：</label>
<div class="layui-input-block">
<select id="sound_type">
<option selected value="0">女聲</option>
<option value="1">男聲</option>
<option value="3">度逍遙</option>
<option value="4">度丫丫</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">情感語速：</label>
<div class="layui-input-block">
<select id="sound_speech">
<option value="0">極慢</option>
<option value="1">超慢</option>
<option value="3">中慢</option>
<option value="4">微慢</option>
<option selected value="5">適中</option>
<option value="6">稍快</option>
<option value="7">快</option>
<option value="8">中快</option>
<option value="9">超快</option>
</select>
</div>
</div>
</form>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" onclick="tts()">立即播放</button>
<button class="layui-btn layui-btn-primary" onclick="function resetTts() {
const ttsFrom = document.getElementById('ttsFrom');
ttsFrom.reset();
}
resetTts()">重置
</button>
</div>
</div>
</div>
<div id="tts">
<audio autoplay="autoplay" id="tts_audio_id" src=""></audio>
</div>
</body>
<script charset="utf-8" src="https://cdn.90so.net/layui/2.4.5/layui.all.js"></script>
<script charset="utf-8" src="//www.layuicdn.com/layer/layer.js"></script>
<script type="text/javascript">
function tts() {
const ttsAudio = document.getElementById('tts_audio_id');
const ttsText = document.getElementById('ttsText').value;
if (ttsText == "" || ttsText == null) {
layer.msg("請輸入待轉換的文案.");
return;
}
const soundType = document.getElementById("sound_type");
const soundIndex = soundType.selectedIndex;
let soundValue = soundType.options[soundIndex].value;
const soundSpeech = document.getElementById("sound_speech");
const soundSpeechIndex = soundSpeech.selectedIndex;
let soundSpeechValue = soundSpeech.options[soundSpeechIndex].value;
// spd：語速，取值0-9，默認爲5中語速
const src = 'http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&spd=' + soundSpeechValue + '&per=' + soundValue + '&tex=' + ttsText;
ttsAudio.src = src;
ttsAudio.play();
}
</script>
</html>