text2voice-web/index.html at main · bestZwei/text2voice-web · GitHub

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>文本转语音</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container-fluid d-flex flex-column justify-content-center align-items-center mt-5" style="min-height: 90vh;">

<div class="row w-100 justify-content-center">

<div class="col-md-8 col-lg-6 mb-3">

<div class="card shadow-sm h-100">

<div class="card-header text-center">

<h2>文本转语音</h2>

</div>

<div class="card-body">

<form id="text2voice-form">

<div class="form-row">

<div class="form-group col-md-6">

<label for="api">选择API：</label>

<select class="form-control" id="api" required>

<option value="voice-api">Voice API</option>

<option value="lobe-api">Lobe API</option>

</select>

</div>

<div class="form-group col-md-6">

<label for="speaker">选择讲述人:</label>

<select class="form-control" id="speaker" required></select>

</div>

</div>

<div id="commonParams">

<div class="form-group d-flex justify-content-between">

<label for="text">输入文本:</label>

<span id="charCount">字符数统计：0/3600</span>

</div>

<textarea class="form-control" id="text" rows="3" required maxlength="3600"></textarea>

</div>

<div id="voiceapiParams">

<div class="form-group">

<label for="rate">语速: <span id="rateValue">0</span></label>

<input type="range" class="form-control-range" id="rate" name="rate" min="-100" max="100" value="0">

</div>

<div class="form-group">

<label for="pitch">语调: <span id="pitchValue">0</span></label>

<input type="range" class="form-control-range" id="pitch" name="pitch" min="-100" max="100" value="0">

</div>

</div>

<button type="button" class="btn btn-info btn-block mb-3" id="previewButton">试听前20个字</button>

<button type="submit" class="btn btn-primary btn-block" id="generateButton">生成语音</button>

</form>

<div class="mt-4" id="result" style="display: none;">

<audio id="audio" controls class="w-100"></audio>

<a id="download" class="btn btn-success btn-block mt-3" href="#" download="voice.mp3">下载语音文件</a>

</div>

<div class="mt-4 text-center" id="loading" style="display: none;">

<i class="fas fa-spinner fa-spin"></i> 正在生成语音，请稍候...

</div>

</div>

</div>

</div>

<div class="col-md-8 col-lg-6 mb-3">

<div class="card shadow-sm h-100">

<div class="card-header text-center">

<h2>历史记录</h2>

</div>

<div class="card-body history-container">

<button class="btn btn-warning btn-block mb-3">清除历史</button>

<div id="historyItems"></div>

</div>

</div>

</div>

</div>

</div>

<footer class="text-center mt-5">

<p><a href="https://zwei.de.eu.org" target="_blank">Zwei</a> | <a href="https://github.com/bestZwei/text2voice-web" target="_blank">Github</a></p>

</footer>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="script.js"></script>

</body>

</html>