-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (51 loc) · 2.24 KB
/
index.html
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
<html>
<style>
@font-face {
font-family:"ProvidentPali";
src: local("ProvidentPali"), url("ProvidentPaliSegoe.otf")
}
.playing {border-bottom:2px solid brown;color:red;transition: color 0.5s}
.stopping {border-bottom:none;color:black;transition: color 0.5s}
#input {font: 2rem "ProvidentPali"}
#output {height:4em; ; vertical-align: baseline;display: inline-block;font: 2em "ProvidentPali";}
</style>
<script src="pali-speak.js"></script>
<script defer>
const test='';
function playogg(url) {
return new Promise(function(resolve, reject) { // return a promise
var audio = new Audio(); // create audio wo/ src
audio.preload = "auto"; // intend to play through
audio.autoplay = true; // autoplay when loaded
audio.onerror = resolve; // on error, reject
audio.onended = resolve; // when done, resolve
audio.src = url
});
}
async function play() {
const input=document.querySelector("#input")
const output=document.querySelector("#output")
const syls=paliSpeak.syllablify(input.value);
output.innerHTML='';
for (let i=0;i<syls.length;i++) {
const ele=document.createElement('span');
ele.innerText=syls[i][1]||' ';
ele.id='syl'+i;
output.appendChild(ele);
}
for (let i=0;i<syls.length;i++) {
if(i)document.querySelector('#syl'+(i-1)).className='stopping';
document.querySelector('#syl'+i).className='playing';
if (!syls[i]||!syls[i][0].trim()) await new Promise( resolve=>setTimeout(resolve,150));
else await playogg('ogg/'+syls[i][0]+'.ogg')
}
document.querySelector('#syl'+(syls.length-1)).className='stopping';
}
</script>
<textarea id='input' cols=40 rows=10>
evM mE sUtM – ekM smyM BgvA sAvtVTIyM vIhrtI jEtvnE anATpINVFIksVs aArAmE.
</textarea>
<button onclick="play()">play</button>
<div id='output'>
</div>
</html>