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.
Related
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/
Getting the track data with GET yields the normal results. But, the stream URL (with appended client-id) doesn't work.
Here are the important ones:
<sharing>public</sharing>
<streamable type="boolean">true</streamable>
<stream-url>http://api.soundcloud.com/tracks/112288415/stream</stream-url>
I'm at a loss now, because everything should be good to go, and play with SC.stream().
I've found the issue in my particular case. Our client had some arrangement with Soundcloud that fell outside of the norm, and they had disabled streams but the API still reported the sound as available. After some help from our client we were able to get proper streams... Sorry for a non-technical solution!
For those coming here for an answer to this problem, it is a known bug when a song reports streamable: true yet results in a blank white page in browser when trying to stream. The bug is in the streamable boolean being false.
Email response from SoundCloud on this issue:
The developers have let me know that the problems you are having is
due to issues with RTMP.
Currently certain content on SoundCloud is using a secure streaming
method called RTMP.
To explain RTMP, even if a track is set to public and streamable by
the artist, if the artist is under a major label, this label can
further control those streaming permissions. So, it looks like it
should stream correctly, however it doesn't.
This particular bug that you have highlighted is more complicated than
originally thought, and as only a handful of tracks are affected we
unfortunately don't have the resources to dedicate a team entirely to
this project as of right now.
So unfortunately you'll just have to deal with/work around this issue.
You need to add ?client_id=YourClientID to the url when you're requesting the stream.
I want to extract audio from a video file using javascript, is it possible to make a mp3 file or any format so that i can play it in an audio tag in html5 ? if yes how? OR what API should I use ?
JavaScript is a script running at the client-end for handling user interactions usually. Long computations cause the browser to halt the script anyway and can turn the page unresponsive. Besides, it is not suitable for video encoding/decoding.
You should use a Java applet for video processing/audio extraction. That way, processing is still offloaded to the client. Processing on the server is expensive in terms of memory and processor cycles. Not Recommended.
Sooo, this is NOT an optimal solution. It is sort of terrible actually since you will forcing users to download a video without seeing it. What you could do is play the file as HTML5 video and just hide the video display then show controls as if it were just audio. This is sort of like playing a video, but just not watching the video while listening to the audio.
Checkout jPlayer: http://jplayer.org/
It will let you play an MP4 basically on any browser by telling it to use flash then falling back to HTML5 when you need it to. Then you can just style things how you want using CSS/HTML/Images.
You might want to try a small test first to see if the display:none; css style will also prevent the video's audio from playing. If that is the case you could also use height:0;;
Once again, this is sub-optimal since you are taking up the user's bandwidth. There are other solutions out there that could potentially strip out just the audio for you in a streaming environment.
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/
I have a site that is streaming live videos, and I want to offer a one minute free preview to users before they pay for a stream. I am using JW Player - I was thinking of triggering a timer when the play button is clicked, and then removing a div containing the player once the timer is finished. I am already using jQuery on this page.
What methods can I take to secure this? Is there another way to do this - I am using a CDN so server-side is somewhat limited.
It's not possible to build a secure 60-seconds-only preview of the full video that way; the only way to be sure that no one could exploit the javascript code and see the entire video is to create a separate video file of 60 seconds only and to play that one instead of the real full video.
This is so because the javascript code is run on the client and it would be pretty easy to disable, edit it or, even simpler, to spot the URL of the full version of the video in the code.
Moreover it's better to protect the download of the full video file checking that every HTTP request made to download it corresponds to a user who has paid for it.
Unless you're using proper streaming (eg RTMP), the whole file will be accessible for direct download by users with access to this pseudo-preview. To properly limit access, you'll want to either implement streaming and limit the free stream server side, or use a one minute file and a protected full video.
To solve this I used JW Player's events to fire a setTimeout call for 60 seconds later. I then hid the player and popped up a modal jQuery UI dialog over the screen. It's not particularly secure but is sufficient for my needs.