-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.pug
executable file
·158 lines (129 loc) · 6.33 KB
/
index.pug
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
- var link = 'letswrite-speech_synthesis_utterance-api'
- var title = 'SpeechSynthesisUtterance 讓瀏覽器說話'
- var description = '本篇大綱：瀏覽器本身就可以發音、頁面製作、SpeechSynthesisUtterance、第一坑 拿瀏覽器支援的所有語音、第二坑 調整速度倍率、第三坑 Chrome的Google語音、原始碼、筆記後心得。原本以為照著用，然後用vue.js把參數接一接，馬上就可以完成的，但一接參數就踩坑了。'
<!DOCTYPE html>
html(lang="zh-TW")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title #{title} - August - Let's Write
link(rel="canonical", href=`https://letswritetw.github.io/${link}/`)
meta(property="og:url", content=`https://letswritetw.github.io/${link}/`)
meta(property="fb:app_id", content="2435108729902508")
meta(property="og:type", content="website")
meta(property="og:site_name", content="Let's Write")
meta(property="og:title", content=`${title} - August - Let's Write`)
meta(itemprop="name", content=`${title} - August - Let's Write`)
meta(name="description", content=description)
meta(property="og:description", content=description)
meta(itemprop="description", content=description)
meta(itemprop="image", content=`https://letswritetw.github.io/${link}/fb.jpg`)
meta(property="og:image", content=`https://letswritetw.github.io/${link}/fb.jpg`)
meta(property="og:image:width", content="1200")
meta(property="og:image:height", content="630")
meta(property="og:image:alt", content=title)
link(rel="shortcut icon", href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png")
//- css
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css")
link(rel="stylesheet", href="dist/vendor/material-kit.min.css?v=2.0.6")
//- link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.css")
link(rel="stylesheet", href="dist/style.min.css")
//- 頁面用的 style，可刪
style.
body {
background: #F5F5F5;
}
// Google Tag Manager
script.
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
body
// Google Tag Manager (noscript)
noscript
iframe(src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT", height="0", width="0", style="display:none;visibility:hidden")
#app.container
.row.text-center
.col
h1.h2 SpeechSynthesisUtterance 讓瀏覽器說話
h5 筆記文：
a.text-info(href="https://letswrite.tw/speech-synthesis-utterance/", target="_blank") Let's Write
hr
.row
// 左側主要功能
main.col-md-7
section.row
.col-md-12
.card
.card-header.card-header-text.card-header-info
.card-text
h2.card-title 範例一：字典
.card-body
p 點選下列字即可發音（僅支援中文語音）
.dictionary
a.btn.btn-default(v-for="n in dictionary", href="#", @click.prevent="sound(n)") {{ n }}
section.row
.col-md-12
.card
.card-header.card-header-text.card-header-info
.card-text
h2.card-title 範例二：輸入框
.card-body
p 輸入框裡輸入文字即可發音
.textarea
.form-group.has-info
textarea#textarea.form-control(rows="5", v-model="textarea")
.text-center
a.btn.btn-rose.m-0.pr-5.pl-5(href="#", @click.prevent="sound(textarea)") 講話
// 右側控製選單
aside.col-md-5
section.row
.col-md-12
.card
.card-header.card-header-text.card-header-success
.card-text
h2.card-title 控製項目
.card-body
p 調整下列項目，即可改變發音
.row
.col-md-3
p.badge.badge-pill.badge-default 速度
.col-md-7
#speedSlider.slider.slider-info(ref="speed")
.col-md-2
.option
small {{ speed }}
.row
.col-md-3
p.badge.badge-pill.badge-default 聲調
.col-md-7
#pitchSlider.slider.slider-info(ref="pitch")
.col-md-2
.option
small {{ pitch }}
.row
.col-md-3
p.badge.badge-pill.badge-default 音量
.col-md-7
#volumeSlider.slider.slider-info(ref="volume")
.col-md-2
.option
small {{ volume }}
.row
.col-md-3
p.badge.badge-pill.badge-default 語音
.col-md-9
select.form-control.has-info(v-model="voice")
option 請選擇語音
option(v-for="v in voices", :value="v.name") {{ v.name }}（{{ v.lang }}）
script(src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js")
script(src="https://code.jquery.com/jquery-3.2.1.min.js")
script(src="dist/vendor/popper.min.js")
script(src="dist/vendor/bootstrap-material-design.min.js")
script(src="dist/vendor/nouislider.min.js")
script(src="dist/vendor/material-kit.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js")
script(src="dist/main.min.js")