-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (92 loc) · 3.62 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get lexico.com word sound</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<style>
code {
padding: 10px;
background-color: #eee;
border-radius: 10px;
display: block;
margin: 20px;
min-width: 100px;
max-width: 400px;
}
body {
padding: 20px;
display: grid;
justify-content: center;
align-content: center;
gap: 4px;
grid-auto-flow: row;
}
audio {
max-height: 50px !important;
border-radius: 6px;
}
</style>
</head>
<body>
<input type="text" name="type word" id="search-word">
<input type="button" value="search" id="search-button">
<code>
No links yet
</code>
<audio controls src="https://lex-audio.useremarkable.com/mp3/test_gb_1.mp3"></audio>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.0.6/fetch-jsonp.min.js"></script>
<script>
let btn = document.getElementById("search-button");
let text = document.getElementById("search-word");
let res = document.querySelector("code");
let audio = document.querySelector("audio");
(function () {
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = window.location.protocol + '//' + window.location.host;
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function () {
var args = slice.call(arguments);
var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
targetOrigin[1] !== cors_api_host) {
args[1] = cors_api_url + args[1];
}
return open.apply(this, args);
};
})();
const searchAudio = () => {
let txt = text.value;
let result = getAudio(txt);
}
const getAudio = word => {
const getSrc = new RegExp('<audio.+?src="(.+?)".+?/?>');
console.log(`printint ${word}`)
let site =
fetch(
`https://api.allorigins.win/get?url=${encodeURIComponent('https://www.lexico.com/definition/' + word)}`
)
.then(response => {
if (response.ok) return response.json()
throw new Error('Network response was not ok.')
})
.then(html => {
let page = html.contents;
let link = page.match(getSrc)[1]
res.innerText = link;
audio.src = link;
});
};
btn.addEventListener("click", searchAudio);
</script>
</body>
</html>