Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add files via upload #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add files via upload #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 18 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke Teller</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button id="button">Tell Me A Joke</button>
<audio id="audio" controls hidden></audio>
</div>
<!-- Script -->
<script src="voiceRSS.js"></script>
<script src="script.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke Teller</title>
<link rel="icon" type="image/png" href="favicon-32x32.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button id="button">Tell Me A Joke</button>
<audio id="audio" controls hidden></audio>
</script>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
162 changes: 127 additions & 35 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,139 @@
const button = document.getElementById('button');
const audioElement = document.getElementById('audio');

/* var promise = document.querySelector('audio').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
} */

// VoiceRSS Javascript SDK
const VoiceRSS = {
speech: function(e) {
this._validate(e),
this._request(e)
},
_validate: function(e) {
if (!e)
throw "The settings are undefined";
if (!e.key)
throw "The API key is undefined";
if (!e.src)
throw "The text is undefined";
if (!e.hl)
throw "The language is undefined";
if (e.c && "auto" != e.c.toLowerCase()) {
var a = !1;
switch (e.c.toLowerCase()) {
case "mp3":
a = (new Audio).canPlayType("audio/mpeg").replace("no", "");
break;
case "wav":
a = (new Audio).canPlayType("audio/wav").replace("no", "");
break;
case "aac":
a = (new Audio).canPlayType("audio/aac").replace("no", "");
break;
case "ogg":
a = (new Audio).canPlayType("audio/ogg").replace("no", "");
break;
case "caf":
a = (new Audio).canPlayType("audio/x-caf").replace("no", "")
}
if (!a)
throw "The browser does not support the audio codec " + e.c
}
},
_request: function(e) {
var a = this._buildRequest(e)
, t = this._getXHR();
t.onreadystatechange = function() {
if (4 == t.readyState && 200 == t.status) {
if (0 == t.responseText.indexOf("ERROR"))
throw t.responseText;
/* new Audio(t.responseText).play() */
audioElement.src = t.responseText;
audioElement.play();
}
}
,
t.open("POST", "https://api.voicerss.org/", !0),
t.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"),
t.send(a)
},
_buildRequest: function(e) {
var a = e.c && "auto" != e.c.toLowerCase() ? e.c : this._detectCodec();
return "key=" + (e.key || "") + "&src=" + (e.src || "") + "&hl=" + (e.hl || "") + "&r=" + (e.r || "") + "&c=" + (a || "") + "&f=" + (e.f || "") + "&ssml=" + (e.ssml || "") + "&b64=true"
},
_detectCodec: function() {
var e = new Audio;
return e.canPlayType("audio/mpeg").replace("no", "") ? "mp3" : e.canPlayType("audio/wav").replace("no", "") ? "wav" : e.canPlayType("audio/aac").replace("no", "") ? "aac" : e.canPlayType("audio/ogg").replace("no", "") ? "ogg" : e.canPlayType("audio/x-caf").replace("no", "") ? "caf" : ""
},
_getXHR: function() {
try {
return new XMLHttpRequest
} catch (e) {}
try {
return new ActiveXObject("Msxml3.XMLHTTP")
} catch (e) {}
try {
return new ActiveXObject("Msxml2.XMLHTTP.6.0")
} catch (e) {}
try {
return new ActiveXObject("Msxml2.XMLHTTP.3.0")
} catch (e) {}
try {
return new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {}
try {
return new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
throw "The browser does not support HTTP request"
}
};

// Disable/Enable Button
function toggleButton() {
button.disabled = !button.disabled;
button.disabled = !button.disabled;
}

// VoiceRSS Speech Function
function tellMe(joke) {
const jokeString = joke.trim().replace(/ /g, '%20');
// VoiceRSS Speech Parameters
VoiceRSS.speech({
// Normally, don't write out API Keys like this, but an exception made here because it's free.
key: 'e985f868e96c46d9b0789c3855350152',
src: jokeString,
hl: 'en-us',
r: 0,
c: 'mp3',
f: '44khz_16bit_stereo',
ssml: false,
});

// Passing Joke to VoiceRSS API
function tellMe(joke){
VoiceRSS.speech({
key: '108e0fd9249e4b8db2840b300950c58d',
src: joke,
hl: 'en-us',
r: 0,
c: 'mp3',
f: '44khz_16bit_stereo',
ssml: false
});
}

// Get jokes from Joke API
async function getJokes() {
let joke = '';
const apiUrl = 'https://sv443.net/jokeapi/v2/joke/Programming?blacklistFlags=nsfw,racist,sexist';
try {
const response = await fetch(apiUrl);
const data = await response.json();
// Assign One or Two Part Joke
if (data.setup) {
joke = `${data.setup} ... ${data.delivery}`;
} else {
joke = data.joke;
}
// Passing Joke to VoiceRSS API
tellMe(joke);
// Disable Button
toggleButton();
} catch (error) {
// Catch Error Here
}
// Get Jokes from Joke API
async function getJokes(){
let joke = '';
const apiUrl = 'https://v2.jokeapi.dev/joke/Programming?blacklistFlags=nsfw,religious,political,racist,sexist,explicit';
try {
const response = await fetch(apiUrl);
const data = await response.json();
if (data.setup){
joke = `${data.setup} ... ${data.delivery}`;
} else {
joke = data.joke;
}
// Text-to-Speech
tellMe(joke);
// Disable Button
toggleButton();
} catch (error) {
// Catch Errors
console.log('whoops,', error); }
}

// Event Listeners
Expand Down
90 changes: 45 additions & 45 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,59 +4,59 @@ html {
box-sizing: border-box;
}

body {
margin: 0;
background: #45badd;
}

.container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url('./robot.gif');
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
}

button {
cursor: pointer;
outline: none;
width: 200px;
height: 50px;
font-family: Courier, monospace;
font-size: 20px;
color: white;
background: #ff3482;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
body{
margin: 0;
background: #45badd;
}

.container{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url('./robot.gif');
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
}

button{
cursor: pointer;
outline: none;
width: 200px;
height: 50px;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
color: white;
background: #ff3482;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 20px 10px rgba(0,0,0,0.2);
}

button:hover {
filter: brightness(95%);
filter: brightness(105%);
}

button:active {
transform: scale(0.98);
transform: scale(0.98)
}

button:disabled {
cursor: default;
filter: brightness(30%);
button:disabled{
cursor: default;
filter: brightness(30%)
}

/* Media Query: Tablet or Smaller */
@media screen and (max-width: 1000px) {
.container {
background-position: center center;
background-size: cover;
}
/* media Query: tablet or smaller */
@media screen and (max-width:1000px){
.container {
background-position: center center;
background-size: cover;
}

button {
box-shadow: 5px 5px 30px 20px rgba(0, 0, 0, 0.5);
}
}
button {
box-shadow: 5px 5px 30px 20px rgba(0,0,0,0.5);
}
}