There is a really old blog entry from Twilio about testing the TTS in browser:
https://www.twilio.com/blog/2011/08/testing-twilios-text-to-speech-engine-using-twilio-client.html
Unfortunately it doesn't contain enough information to put a test together. It also contains a number of dead links and mentions a Github project that I can't find.
I'd really like for users to have the ability to hear what their announcement will sound like prior to firing off the form and starting the phone calls.
I use Lasso (which fires off CURL requests to the Twilio REST API), but any kind of tutorials or hints would be appreciated.
If you set up a demo account on Twilio and use Glitch online php tester (https://glitch.com/edit/#!/php-poc) or a local environment you can create a workable example like I did. You will need to fill in the empty strings to correspond to your app name. Search for TwiML in the website to get to the right section to set the right url of your server that TWilio will call upon request to read content (xml). In my case url was http://<server>/?incoming-call.php tested on Glitch.
You need to grab the Twilio PHP SDK and include the Services/Twilio/Capability.php from https://github.com/twilio/starter-php in your server code.
<?php
require __DIR__ . '/../vendor/autoload.php';
$url = [];
$url = explode('?', $_SERVER['REQUEST_URI']);
if (count($url) == 2 && $url[1] == 'incoming-call.php')
{
header('Content-type: text/xml');
$response = new Twilio\Twiml;
$dialogue = trim($_REQUEST['dialogue']);
$voice = (int) $_REQUEST['voice'];
if (strlen($dialogue) == 0)
{
$dialogue = 'Please enter some text to be spoken.';
}
if ($voice == 1)
{
$gender = 'man';
}
else
{
$gender = 'woman';
}
$response->say($dialogue);
echo $response;
exit;
}
require_once('Services/Twilio/Capability.php');
$accountsid = ''; // YOUR TWILIO ACCOUNT SID
$authtoken = ''; // YOUR TWILIO AUTH TOKEN
$fromNumber = ''; // PHONE NUMBER CALLS WILL COME FROM
$APP_SID = '';
$token = new Services_Twilio_Capability($accountsid, $authtoken);
$token->allowClientOutgoing($APP_SID);
?>
<html>
<head>
<title>Text-To-Speech</title>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"
src="//media.twiliocdn.com/sdk/js/client/v1.5/twilio.js"></script>
<script type="text/javascript">
Twilio.Device.setup("<?php echo $token->generateToken();?>",{"debug":true});
$(document).ready(function() {
$("#submit").click(function() {
speak();
});
});
function speak() {
var dialogue = $("#dialogue").val();
var voice =
$('input:radio[name=voice]:checked').val();
Twilio.Device.connect({ 'dialogue' :
dialogue, 'voice' : voice });
}
</script>
</head>
<body>
<p>
<label for="dialogue">Text to be spoken</label>
<input type="text" id="dialogue" name="dialogue"
size="50">
</p>
<p>
<label for="voice-male">Male Voice</label>
<input type="radio" id="voice-male" name="voice"
value="1" checked="checked">
<label for="voice-female">Female Voice</label>
<input type="radio" id="voice-female" name="voice"
value="2">
</p>
<p>
<input type="button" id="submit" name="submit"
value="Speak to me">
</p>
</body>
</html>
Related
I am creating a webworks application, so my code is not being placed on a server. The youtube data api does not work when accessing from your local file system, but that it how my application works. I need a work around, or a way to make a local private web server with pure js, no command line tools.
html
<!DOCTYPE HTML>
<html>
<head>
<title>add song</title>
<link type="text/css" href="../css/AS_Style.css" rel="stylesheet">
</head>
<body>
<div id="main">
<p id="response">a</p>
<form action="#">
<p><input type="text" id="search" placeholder="Type something..." autocomplete="off" class="form-control" /></p>
<p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
</form>
<div id="results"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../js/AS.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
function init() {
gapi.client.init({
'apiKey':'key here',
});
search();
}
gapi.load('client',init);
</script>
</body>
</html>
JavaScript
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
function search() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3,
order: "viewCount",
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
};
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
Can you show the code you're using to call Youtube's API? You can get the API data with pure javascript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=CHANNEL_ID&maxResults=1&fields=items&order=date&key=API_KEY", false);
xhr.send();
document.write(xhr.responseText);
Did you try triggering a shell script via javascript, and making the shell script run the API code?
Apparently this worked: https://stackoverflow.com/a/21484756/7922428
Youtube API doesnt work without connection to the internet, which when your locally testing, is done through local servers.
Here are my suggestions:
Use Nodejs
Use python -m SimpleHTTPServer
Can any one help me to integrate a form with PHPMailer. I have following form.
<form method="POST">
<p>Name:<input type="text" name="name" size="30"></p>
<p>Email Address:<input type="text" name="email" size="30"></p>
<input type="submit" name="submit" value="Submit">
</form>
I just need to display POST variables in my receiving email's body. I have search and refer alot and spend hours in it, everyone clarifies it with high level explanation. As i am not a programmer can anyone explain me how can i do this with simple explanation. I just done a method as follows but it did'nt work.
$name = $_POST['name'];
$email = $_POST['email'];
$mail->Body = "
<html>
<h2><b>".$name." ".$email."</b></h2>
</html>";
When i tried the above method i am getting error in this line '$name = $_POST['name'];'. The error message is: Notice: Undefined index:' I think i am wrong with my placing order of codes.
Thanks in advance!
<?php
if(array_key_exists("name",$_POST) && $_POST["name"] != "" && array_key_exists("email",$_POST) && $_POST["email"] != ""){
require 'mailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
//$mail->SMTPDebug = 3; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'mail#gmail.com'; // SMTP username
$mail->Password = 'mypassword'; // SMTP password
$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 587; // TCP port to connect to
$mail->setFrom('mail#gmail.com', 'Manager');
$mail->addAddress('mail#gmail.com', 'Administrator'); // Add a recipient
$name = $_POST['name'];
$email = $_POST['email'];
$mail->Body = "<h2><b>".$name." ".$email."</b></h2>";
if(!$mail->send()) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;
} else {
echo 'Message has been sent';
}
} else {
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST">
<p>Name:<input type="text" name="name" size="30" required></p>
<p>Email Address:<input type="email" name="email" size="30" required></p>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
<?php
}
?>
Basically i want to automatically POST content to a form without using XMLHttpRequest.
The site works fine but there is a problem with the browser history when getting back to the page by clicking the browser back button.
My site looks like this:
<!DOCTYPE html>
<html>
<head runat="server">
<title>History Problem</title>
<script>
window.onload = function () {
try {
if ("<%= Request.Form["hiddenField1"] == null %>" == "True") {
var theForm = document.getElementById("myForm");
var theIframe = document.createElement('iframe');
theIframe.id = theIframe.name = "myIframe";
document.body.appendChild(theIframe);
theForm.hiddenField1.value = "SomeValue";
theForm.submit();
}
}
catch (e) {
var x = e;
}
};
window.onunload = function () { };
</script>
</head>
<body>
<form runat="server" id="myForm" action="" target="myIframe" method="post">
<input type="hidden" id="hiddenField1" name="hiddenField1" />
</form>
<br />
External Link
</body>
</html>
The trace shows that there is a GET and a POST request. everything is fine so far. But if you click on "External Link" (google.com) and then back to the site, you'll see two history entries for the test site. Also the google.com history entry seems to be gone.
This happens only in Internet Explorer.
Any ideas?
I want to insert data into my fusion table which is public . I looked out at https://developers.google.com/fusiontables/docs/sample_code for help specifically http://code.google.com/p/fusion-tables-client-php/source/browse/trunk/samples/form_example.php . I downloaded the necessary files for this script to run i.e. downloaded clienlogin.php , file.php , sql.php and constants.php. The script is running but rows are not getting inserted and I am not able to find the reason . I have pasted my code ( its a small code .. please have a look at it and let me know the error I am commiting). Essentially I want to insert data into my fusion table after collecting user info through user forms . I don't want to use google forms. Any kind of help / pointers in this direction would be helpful.
<html>
<?php
include('D:\xampp\htdocs\itpold\clientlogin.php');
include('D:\xampp\htdocs\itpold\sql.php');
include('D:\xampp\htdocs\itpold\file.php');
// Table id
$tableid = 3544282;
//Enter your username and password
$username = "ABCD#gmail.com";
$password = "XYZ";
$token = ClientLogin::getAuthToken($username, $password);
$ftclient = new FTClientLogin($token);
// If the request is a post, insert the data into the table
if($_SERVER['REQUEST_METHOD'] == 'POST') {
// Insert form data into table
$insertresults = $ftclient->query(SQLBuilder::insert($tableid,
array('Name'=> $_POST['Name'],
'Location' => $_POST['Location'])));
$insertresults = explode("\n", $insertresults);
$rowid1 = $insertresults[1];
echo $rowid1 ;
}
?>
<head>
<title>Simple Form Example</title>
<style>
body { font-family: Arial, sans-serif; }
</style>
<script type="text/javascript">
// Simple form checking.
function check_form() {
if(document.getElementById('Name').value == '' ||
document.getElementById('Location').value == '') {
alert('Name and location required.');
return false;
}
return true;
}
</script>
</head>
<body >
<h1>Simple Form Example</h1>
<h2>Insert data</h2>
<form method="post" action="forms.php" onsubmit="return check_form();">
Name: <input type="text" name="Name" id="Name" /><br />
Result: <input type="text" name="Location" id="Location" /><br />
<input type="submit" value="Submit" />
</form>
<h2>Table data</h2>
<p>
<?php
// Show the data from table
$table_data = $ftclient->query(SQLBuilder::select($tableid));
$table_data = explode("\n", $table_data);
for($i = 0; $i < count($table_data); $i++) {
echo $table_data[$i] . '<br />';
}
?>
</p>
</body>
</html>
Often, the server is not able to send requests to secure URLs. See the following StackOverflow post for some ideas on how to fix the problem:
Can't connect to HTTPS site using cURL. Returns 0 length content instead. What can I do?
I suspect that this is a permissions problem with your table. Have you made sure that the account your are logging in with is set up as an editor for this table? The easiest way to check this is to go into Fusion Tables as the owner for the table, and click the share link in the upper right hand corner.
I've created an order form, of which has a large array of fields. I'm now adding coupon functionality so that we can start to give customers discount codes etc.
What's the best way of submitting a single field (the coupon code) using ajax after a "apply coupon" button has been clicked so that the price can be updated on the front end probably using UJS(?) - obviously the final price calculation would happen on the backend?
Cheers.
I would recommend using a JS framework to do Ajax requests. If you JQuery, then you can use the example given to understand how to do a simple post.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search..." />
<input type="submit" value="Search" />
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
term = $form.find( 'input[name="s"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$.post( url, { s: term },
function( data ) {
var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );
}
);
});
</script>
</body>
</html>