I'm making a chat application and one of the features is sending a sound. The HTML that gets sent is the following:
<p>
<audio autoplay>
<source src="sounds/lol.mp3" type="audio/mpeg">
</audio>
LOL
Stop
Play
</p>
The 'autoplay' works fine when it is sent the first time. So now i need a play/stop link to hear the sound again as many times as you want. I have the following Javascript:
$(document).on('click', '#soundStop', function(e) {
$(this).hide();
$(this).next("a").show();
$('audio').each(function(){
this.pause();
this.currentTime = 0;
});
e.preventDefault();
});
$(document).on('click', '#soundPlay', function(e) {
$(this).hide();
$(this).prev("a").show();
$(this).closest("audio").play();
//alert("play sound again!");
e.preventDefault();
});
The stop function works (although I'm not sure targeting all 'audio' elements is a good idea). But I'm stuck at how to target the audio element to .play() in the second function. I might be going at this the completely wrong way?
Any help or advice is appreciated.
EDIT: Just to clarify, there might be multiple instances of these sounds that get sent which is why I need a way to only target that specific 'audio' for each.
Why dont you use the Ready to Use Controls of audio tag. It'll serve your purpose.
Try this code :
<!DOCTYPE html>
<html>
<body>
<audio autoplay controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
</body>
</html>
Customer Controls
<!DOCTYPE html>
<html>
<body>
<audio id="player" src="horse.ogg"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
</body>
</html>
Related
I am working on creating a google sheet that has a series of embedded audio tracks in the sidebar. The goal is to have people listen to various audio tracks and code the interviews in the spreadsheet.
It would be awesome if I could include a button in the spread sheet that when clicked will open the sidebar and play a specific audio track?
Thanks in advance!
Here is what I have so far:
CODE:
function onOpen(e) {
SpreadsheetApp.getUi()
.createAddonMenu()
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function onInstall(e) {
onOpen(e);
}
function showSidebar() {
var ui = HtmlService.createTemplateFromFile('Sidebar')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(ui);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- Use a templated HTML printing scriptlet to import common stylesheet -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<div class="sidebar branding-below">
<audio id="player" controls>
<source src="https://docs.google.com/uc? export=download&id=0BzdQx2zfyYbTUmNWd3M3MF80bGs" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player" controls>
<source src="https://docs.google.com/uc? export=download&id=0BzdQx2zfyYbTVWI2V2JXRGRoMVE" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player" controls>
<source src="https://docs.google.com/uc? export=download&id=0BzdQx2zfyYbTdW9YelZfYS1vTlU" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player" controls>
<source src="https://docs.google.com/uc?export=download&id=0BzdQx2zfyYbTX1RiWE43UVhPN0E" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="sidebar-status"></div>
</div>
<div class="sidebar bottom">
<span class="gray branding-text">Docs Add-on Sound Demo</span>
</div>
</body>
</html>
I am using materializecss in my app script add-on, When I try and add a tooltip dynamically the tip does not update with the new label. I have tried several variations and even double-checked that the tip was being changed, which it was. The problem is that it does not seem to reinitialize with the updated text.
Here is a jfiddle: https://jsfiddle.net/edlisten/grafo4su/1/
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
$(function() {
$('.tooltipped').tooltip({delay: 50,tooltip:"new",position:"bottom"});
});
</script>
</head>
<body>
<div class="container">
<a class="btn tooltipped">Hover me!</a>
</div>
</body>
</html>
What you can do is set an id to the anchor.
Lets say <a class="btn tooltipped" id="tooltip">Hover me!</a>
Now we can find easily the element with jquery.
var anchorElement = $('#tooltip');
Materialize has an atribute data-tooltip you need to have on the element so that the tooltip will pop out.
anchorElement.attr('data-tooltip', 'New tooltip value');
And finally we need to initialize the materialize tooltip on the element
anchorElement.tooltip();
You can play around with it and put it in a function.
Trying to implement Worldpay integration. The docs at https://online.worldpay.com/docs/take-card-details-templates mention a token. I have tested the page and I dont get any token. Wandering how i can get this token.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="payment2.aspx.cs" Inherits="payment2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src= "https://cdn.worldpay.com/v1/worldpay.js">
</script>
<script type='text/javascript'>
window.onload = function () {
Worldpay.setClientKey('T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04');
Worldpay.reusable = false;
Worldpay.useTemplate('payment-form', 'my_payment_section', 'inline');
}
</script>
</head>
<body>
<form action="/complete" id="payment-form" method="post">
<!— all other fields you want to collect, e.g. name
and shipping address -->
<div id='my_payment_section'></div>
<div>
<input type="submit" value="Place Order" />
</div>
</form>
</body>
</html>
When the window.onload executes, it puts the WorldPay card capture form on your page. By the looks of it, you haven't disabled their Save Payment button, so are you trying to use your own submit button?? If you are trying to use your submit button, then you should add the onclick attribute to submit the worldpay template.
<input type="submit" value="Place Order" />
<form action="/complete" id="payment-form" method="post">
<div id="my_payment_section"></div>
<div>
<input id="submitCard" onclick="Worldpay.submitTemplateForm()" value="Confirm Payment" />
</div>
</form>
Once the form submits, worldpay.js takes over, and it will handle the sensitive card information, validate it and if all is ok, it will replace the cardDetails div with a single hidden input field which is the token.
If that all happens correctly, with no errors, after the token input has been placed in the DOM, the form will submit to your action "/complete", and the token will be part of the submitted values of the form.
Hope that helps.
Your script is missing the callback to generate the token in useTemplate()
See: https://developer.worldpay.com/jsonapi/docs/template-form
The callback generates the hidden input with the token value for you which posts to worldpay.
your script should be:
<script type='text/javascript'>
window.onload = function() {
Worldpay.useTemplateForm({
'clientKey':'T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04',
'form':'paymentForm',
'paymentSection':'paymentSection',
'display':'inline',
'reusable':false,
'callback': function(obj) {
if (obj && obj.token) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('paymentForm').appendChild(_el);
document.getElementById('paymentForm').submit();
}
}
});
}
</script>
You also need the onclick="Worldpay.submitTemplateForm()" attribute on your submit too.
I create this code.
Dim msg, sapi
msg=InputBox("Enter your text","Talk it")
Set sapi=CreateObject("sapi.spvoice")
sapi.Speak msg
and now i want to convert this into the website.
how it possible??
Purely speculation (untested as I have currently no access to a suitable environment), but you might be able to do something like accept the text from a form and process it on the server using classic ASP and then the HTML5 <audio> tag for playback:
your form:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="speak.asp" method="get">
<fieldset>
<legend>Enter your text</legend>
<input type="text" placeholder="Enter text..." name="line" ><br>
<input type="submit" value="Talk it" >
</fieldset>
</form>
</body>
</html>
your asp and output HTML:
<%# language="vbscript" %>
<%
Dim msg, sapi, output
msg = Request.QueryString("line")
Set sapi = CreateObject("sapi.spvoice")
' save the speech to file
set output = CreateObject("SAPI.SpFileStream")
output.Format.Type = 8 'SAFT11kHz8BitMono
output.Open "output.wav", 3, false
set sapi.AudioOutputStream = output
sapi.Speak msg
sapi.WaitUntilDone -1
output.Close
%>
<!DOCTYPE html>
<html>
<head></head>
<body>
<audio controls>
<source type="audio/wav" src="output.wav">
</audio>
</body>
</html>
This assumes your web server has the speech API installed, of course.
The including of this code is quite simple. Using the the popular <script> tag for this task:
<html>
<head>
</head>
<body>
<input type="text" name="textinput" size="30">
<script type="text/vbscript">
Sub SpeakIt
Dim msg, sapi
msg= textinput.Value
Set sapi=CreateObject("sapi.spvoice")
sapi.Speak msg
End Sub
</script>
<input type="button" value="speak" onClick="SpeakIt">
</body>
</html>
Take an eye on the mentioned script tag, especially on the additional type attribute.
Keep also in mind, this code will be only executed in very few browsers. One of the most famous is the Internet Explorer.
Okay, im a total noob at these..but I need to open the search result with the iframe in a different page of my site. Anyone have already done this?
sample, when you hit go it will redirect to different page of my site and the search results in an iframe.
code is something like this:
<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
<input type="submit" value="Go">
</form>
<script>
try {
document.write('<iframe name="results"></iframe>');
} catch (e) {
alert(e);
}
</script>
</body>
</html>
Thanks in advance!
Personally, I would simplify this behavior by writing the iframe (with no src) first, and just hiding it, and then change the source to whatever you want when an action occurrs and then unhide it.
Note that google doesn't allow their results to be used in an iframe, for competitive reasons.