我们将从添加项目的结构开始,但首先我们需要在链接中包含某些项目,例如我们使用了多个 CSS 和 javascript 文件,我们需要将它们链接到我们的 HTML 中 文件。
- //Head Section
- <link rel="stylesheet" href="style.css">
- //Body Section
- <script src="script.js"></script>
现在我们将文本到语音转换器的结构放在 body 标签中。<div> 标签将用于为我们的文本到语音转换器构建一个容器。
7 a4 Y0 F! P1 w$ ?使用 <h1> 标签,我们将在我们的 div 中为我们的文本到语音转换器添加一个标题。
8 {# o- r" W. o/ t) T8 F0 k: f我们将向我们的文本到语音转换器添加大量语音,并使用 <select> 元素为不同的语音生成备选列表。
; n8 u8 `/ a' _+ j% C0 i
现在我们将使用类型设置为范围的 <input> 标签添加两个滑块。第一个滑块将用于更改语速。我们可以通过拖动滑块来改变声音的速度。第二个滑块将用于在高音和低音之间调整声音的音调。
$ S1 }( u7 }: H: Z, z1 g1 c# V4 c现在,我们将利用 <textarea> 元素构建一个文本区域,用户可以在其中编写文本,画外音艺术家将阅读它。现在,我们将使用按钮标签制作两个按钮:停止和开始说话。
s. y6 K6 y% N6 K: A
我们不需要任何其他东西来开发文本到语音转换器的结构。既然我们已经学会了如何使用 CSS,我们就可以为 TTS 设置样式了。但首先,让我们看一下我们的框架。
' q2 R- m' J8 k$ N8 ~7 V第 2 步:添加 CSS 代码4 C3 g% Z" S6 U g" Z% N% U
层叠样式表 (CSS) 是一种标记语言,用于描述以 HTML 或 XML 编写的文档的呈现方式。CSS 与 HTML 和 JavaScript 一样,是WEB开发的重要组成部分。创建一个名为 style.css 的 CSS 文件,并将以下代码粘贴到其中。始终使用 .css 扩展名保存文件。
v- F: t! X7 I4 L. e3 a- html {
- font-size: 10px;
- box-sizing: border-box;
- }
- *,
- *:before,
- *:after {
- box-sizing: inherit;
- }
- body {
- margin: 0;
- padding: 0;
- font-family: "PT Sans", sans-serif;
- background-color: #d5d9e5;
- color: #292b2c;
- display: flex;
- min-height: 100vh;
- align-items: center;
- }
- .voiceinator {
- padding: 2rem;
- width: 50rem;
- margin: 0 auto;
- border-radius: 1rem;
- position: relative;
- background: #fff;
- overflow: hidden;
- z-index: 1;
- box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
- }
- h1 {
- width: calc(100% + 4rem);
- margin: 0 0 2rem -2rem;
- padding: 0.5rem;
- text-align: center;
- font-size: 4rem;
- font-weight: 100;
- font-family: "PT Sans", sans-serif;
- }
- .voiceinator input,
- .voiceinator button,
- .voiceinator select,
- .voiceinator textarea {
- width: 100%;
- display: block;
- margin: 10px 0;
- padding: 10px;
- font-size: 2rem;
- background: #fbfbfc;
- outline: 0;
- font-family: "PT Sans", sans-serif;
- border: 1px solid #c8c7cb;
- border-radius: 2px;
- }
- label {
- font-size: 2rem;
- }
- textarea {
- height: 20rem;
- }
- .voiceinator button {
- background: #72a3da;
- color: #fff;
- border: 0;
- width: 49%;
- float: left;
- font-family: "PT Sans", sans-serif;
- margin-bottom: 0;
- font-size: 2rem;
- cursor: pointer;
- position: relative;
- }
- .voiceinator button:active {
- top: 2px;
- }
- .voiceinator button:nth-of-type(1) {
- margin-right: 2%;
- }
- input[type="range"] {
- -webkit-appearance: none;
- border: 1px solid transparent;
- padding-top: 8px;
- background: #fff;
- }
- input[type="range"]::-webkit-slider-runnable-track {
- height: 5px;
- background: #e1e1e3;
- border: none;
- }
- input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- border: none;
- height: 14px;
- width: 14px;
- border-radius: 50%;
- background: #72a3da;
- margin-top: -4px;
- }
- input[type="range"]:focus {
- outline: none;
- }
- input[type="range"]:focus::-webkit-slider-runnable-track {
- background: #ccc;
- }
- input[type="range"]::-moz-range-track {
- height: 5px;
- background: #e1e1e3;
- border: none;
- }
- input[type="range"]::-moz-range-thumb {
- border: none;
- height: 14px;
- width: 14px;
- border-radius: 50%;
- background: #72a3da;
- }
- input[type="range"]:-moz-focusring {