<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>文字转语音</title>
<link href="//lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
<!--[if lt IE 9]>
<script src="//lib.baomitu.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//lib.baomitu.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 center-block" style="float: none;">
<br>
<div class="panel panel-primary">
<div class="panel-heading" style="background: linear-gradient(to right,#b221ff,#14b7ff,#8ae68a);"><h3 class="panel-title">文字转语音</h3>
</div>
<div class="panel-body" style="text-align: center;">
<div class="list-group">
<div class="list-group-item">
<div class="input-group">
<div class="input-group-addon" >要转换的文字</div>
<input type="text" id="文字" class="form-control" required="">
</div>
<br>
<div class="input-group">
<div class="input-group-addon" >选择声音性别</div>
<select class="form-control" id="声音">
<option value="女">女</option>
<option value="男">男</option>
</select>
</div>
</div>
<div class="list-group-item" id="qrLogin">
<a href="#" onclick="转换()" class="btn btn-block btn-primary" style="background: linear-gradient(to right,#b221ff,#14b7ff);">转换</a>
</div>
</div>
<div class="list-group">
<div class="list-group-item list-group-item-info" style="font-weight: bold;" id="login">
<span id="结果">您还没有转换呢</span>
</div>
</div>
<div class="list-group" id="Main" style="display: none;">
<div class="list-group-item">
<img src="https://q4.qlogo.cn/headimg_dl?dst_uin=2633479934&spec=100" width="80" style="border-radius: 50%;opacity: 0.80;" id="avatar">
</div>
</div>
</div>
</div>
<div class="panel panel-default text-center">
<div class="panel-body">
© 2017-2021 文字转语音
<b style="color: #ff4425;">♥</b> &
Design by <a href="http://blog.dzzui.com" title="AEINK" rel="link" target="_blank">独醉博客</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//
function 转换() {
$.post('https://api.dzzui.com/api/dwz?', {format: 'json',token:'debc0bbad45fbcf357ac6c836af53941',url:'https://api.dzzui.com/api/tts?txt='+encodeURI($('#文字').val())+encodeURI('&')+'type='+encodeURI($('#声音').val())}
, function(data, textStatus, xhr) {
$('#结果').html(data.dz_url);
console.log(data);
},'json');
}
</script>
</body>
</html>
