This is for a mobile only site:
I want to have a button on my page, when pressed the user can speak into their phone and when they finish talking a random mp3 file is triggered. Is this possible in JQuery?
This page demonstrates how you can do it.
http://www.phpied.com/x-webkit-speech-input-and-textareas/
Here are some other JS libraries specifically built for speech recognition.
http://jqueryhouse.com/5-voice-control-javascript-libraries-for-developers/
I used the Speech Recognition API once and used Annyang.
annyang is a tiny javascript library that lets your visitors control
your site with voice commands. annyang supports multiple languages,
has no dependencies, weighs just 3kb and is free to use.
It's as simple as:
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
<script>
if (annyang) {
// set your commands here, as many as you need
var commands = {
'play mp3': function() {
// change this to your own play MP3 method
audioElement.play();
},
'put the kettle on': function() {
console.log("You wish!");
}
};
// add commands
annyang.addCommands(commands);
// start listening
annyang.start();
}
</script>
Annyang is a library to make the setup of voice commands easy. However, it's not the quickest solution in the world, as I think (people with knowledge please chip in here) the library just calls and external service (Google, I think) and has to wait for response before running your code. It's only a second or two, but it's there.
The Speech Recognition API also requires permission to use user's the microphone. When the page loads, a little popup will appear automagically and asking permission. If a user chooses 'no', your speech feature won't work.
As I said earlier, browser support is looking rather dim, still. At the time of writing this, only Chrome, Chrome for Android and Opera can use it: caniuse.com/#feat=speech-recognition
It's a hell of a lot of fun playing with speech, so have a play regardless of your decison to use it or not. I used it alongside ResponsiveVoice to speak back to me. I built a little page that sits on my desktop and I can ask her things like "What is the weather?" and she reads my local weather report to me. I ask "What's the latest?" and she reads 10 news items from my local news agency's RSS feed. I also turned it into a speech calculator. So, yeah, have a play - one day it could be widely supported.
Read more here:
https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html
https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API?hl=en
http://shapeshed.com/html5-speech-recognition-api/
http://www.sitepoint.com/introducing-web-speech-api/
Related
I'm trying to build an app that will take mic input, modulate it, and then broadcast it as an audio source that my web browser can then use.
Use cases for this would be like on a video call. If I need to change my voice to artificially make it louder or perform other modulations, I would use this app.
Right now I have the first 2 steps of getting the mic input and modulating it done, but I'm stuck on the third. How do I broadcast it back to the system as a viable audio source (or in the terms of the app, how to do I get the video call to pick up the sound I'm outputting)?
Some of the ideas I've seen so far have been trying to play the modulated sound back into the microphone object but I don't see a reliable way to do that.
In summary: Is there any way with Javascript (in the browser) or NodeJS to take a sound and register or broadcast it as an audio source that the browser can use?
I don't even know if this is possible and if the answer is "no", then please answer that. There might be some security issues with this that I am totally overlooking. In the end, this question is if nothing, conceptional.
I have made something like a mod for the Chrome offline T-rex game and I want to turn it into an extension so others can use for free
some of the features are more and bigger obstacles, timed game, multiple lifes, etc.
When playing the game, I can go to Inspect element, paste the script there and it would work. I tried to do a similar thing in the extension, but I couldn't.
I tried using the chrome.tabs.executescript function which worked for executing scripts on websites online, but when I go offline to play the game or open the chrome://dino/ tab online, it doesn't execute the script on the page anymore.
How to make the extension work in all situations?
As wOxxOm helpfully points out, chrome://* pages are off-limits to content script execution, even with the broadest "<all_urls>" permission.
So you will not be able to modify the actual dino page.
I presume the game itself is open-source and part of Chromium; your best bet is to just make a new version based off that code and publish it as a web app (or as a local extension page). Would be a good exercise to make it a Progressive Web App as well, giving you offline capability (and more).
I'd like to allow my users to click a button in a list of tunes on a page to open a simple mp3 player (the HTML5 Player is fine) that can play a downloaded mp3 track for that song that is stored on the user's hard drive. Is that even possible? Every attempt I've tried - using HTML and/or JS, JQ - fails.
I can copy the local mp3 file path/filename into my Chrome address bar. With no code at all it helpfully opens an HTML5 player in a new tab that allows me to play the tune just fine. Why is it so difficult to allow the user to do the same thing by simply clicking a button inside my app?
I have been able to get an mp3 player to appear on the page. But no matter how I specify the file path it refuses to play the tune - occasionally telling me my code is not allowed to access local files.
For security reasons, Javascript does not have the privilege to modify files, or even open files on the client machine.
If that is absolutely what you want to accomplish, try to use a JAVA Applet.
Thanks Lyes Ben. Over the last few days thinking about your comments has helped me understand that what I was attempting was not the right approach - and why. After some research I now believe that using the DropBox api I can code a simple 'drop-in-saver' function that would not only automatically save the files locally that my user would generate through the app, but would at the same time, provide another feature that was on my list - it would give the user offline access to those files. As a bonus the files would be synced on all the user's devices, with no additional code or complexity in the app.
Sometimes I get so focused on solving a particular technical problem that I fail to step back and ask if it is the right problem to solve in the first place.
It's not done yet but I'm now working on that DropBox interface to my app. I'll update this answer when (if) I get there as I suspect this could be a solution in some cases for others facing a similar problem.
We are currently looking at porting a enterprise silverlight application over to html5. The major roadblock that we have hit is the ability to open files from the user's local disk. Currently they have a document library which just links to files on their computer that they can open from within the app and view or print out. All that I read is that you can only access the local sandbox of the web app with the html5 file api's. We want to load these files from code.
Does anyone know of any workarounds to this?
Thanks
There is no way for html5 to access local file without user selection. But FSO: FileSystemObject works for IE and MAYBE could be regarded as a work around. But still there are some requirements to meet.
It is possible to use chrome's filesystem API to access files on a users local filesytem. So you'd have to be willing to make this a chrome only application.
Using java you can create a "Signed" applet which has access to the local filesystem. (if the applet is signed you can request filesystm permissions)
then there is a tutorial for accessing methods of your java code directly from javascript here: http://docs.oracle.com/javase/tutorial/deployment/applet/invokingAppletMethodsFromJavaScript.html
you should be able to perform something similar from silverlight.
There is no workaround in pure HTML5/Javascript. You need the use of plugins, such as Java or Silverlight (maybe you shouldn't port it after all). As for workarounds, HTML5 gives you an easy way drag and drop multiple files that you could transfer on the server and then display back to your users. Another workaround would be to install a custom agent (a software with only a tray icon) that would send the information about the current user "document library" to server and then again, you could display it back to the user.
Note: I've heard somewhere that browsers will eventually stop supporting plugins. http://www.howtogeek.com/179213/why-browser-plug-ins-are-going-away-and-whats-replacing-them/
Ya, I agree with Markain. However, if you were to limit your audience solely to chrome users, I daresay, you would most likely use some of your users. If Huazhihao is right, then your number of leaving customers should decrease but users who regularly use firefox won't be happy. Overall, I think that this will not work. Otherwise, there would be too many websites that trashed your hard driver (or at least wherever you have the rights to edit/delete files). I think it would be best if your product was setup to synchronize the file whenever an internet connection was detected and a change was made to the file. That way the user would not need to visit the website whenever the file was uploaded. If this is some kind of an error file, then it would be most beneficial if you were to make a link in the application that when clicked, would upload the file to the website and the website were to do whatever was necessary. If this is a purely online thing, then I don't see what business you would have looking through other peoples' files =-). Hope I helped!
Did anybody faced to problem when QuickTime cannot play streaming video and shows blue question mark instead or errors - 400 (Bad Request) and 10060 (Disconnected)? I have already tried to switch getting stream from UFP to HTTP protocol with custom port in QuickTime settings but this did not help.
And does anybody know where can i find streaming video using RTSP protocol just for testing, links to online streams (not downloaded trailers) are appreciating.
These links do not work for me due to issue mentioned above:
http://mac.sillydog.org/qt/mov/embed_stream.php
And here only last one works (among other streaming types) :
http://quicktime.tc.columbia.edu/users/iml/movies/mtest.html
Thanks, for any links and advices.
The best way I've found to get rtsp streams to play in a browser window is using Apple's own javascript. I've tried hard coding tags with exactly the same parameters, and the embed tags won't work, but the js will. The js file itself is called AC_Quicktime.js. Just google it and you should be able to find a link to it easily enough. Use the one from Apple's site to make sure that you're getting unmodified code. Load that in your HTML page, and in your body, insert this:
<script>
QT_WriteOBJECT(*url*,*width*,*height*,*ActiveX Version*,*parameter1*,*value1*,*parameter2*,*value2*,*parameter3*,*value3*);
</script>
This will draw the appropriate code in whatever container you place the script. ActiveX Version can be an empty string (''), and as many parameters as you like can be entered one after the other. Apple has fairly exhaustive documentation on their website for all their stuff.Apple Developer Connection.
Hope that was marginally helpful.
it appears that this was just a security issue and stream was stopped by private policy of Quick Time so to turn on the ability to play RTSP stream in Safari i needed to check some option in browser settings ...
http://www.niehs.nih.gov/news/video/help/