I'm getting a pure binary MP3 stream from an ajax call. No headers, nothing. Just straight MP3 bits. (Actually is that really even a stream at all?)
I'd like to be able to play it in a web page (and, if possible, offer it for downloading).
Is this possible? And if so what's the best way to do it?
If it is not possible, what are some other ways to handle this?
You cant play music with pure javascript. you will need to get that stream and pass it to a flash player.
try JW flash player, though i am not sure if it can handle the type of stream you are talking about. you will have to do some research about what it can handle
as indeed mentioned, you'll need a mp3 playing plugin, flash being the most widely available.
The JMP3 jquery plugin makes that task easier for you. It does rely on a flash file for the sound processing.
If you're only targeting very modern browsers, you could make use of data URL:s, and just write an object element to your HTML, and link to that data URL. Note: I havn't tried this.
You might want to look at SoundManager 2: Javascript Sound for the Web
Its an open-source BSD licensed JavaScript script for dealing with sound.
It automatically hooks into HTML5 or Flash to produce the sound, depending on what is available.
I have done this using data uris and there is the browser compatibility issue, there is the problem of url length (basically > about 30,000 characters won't support IE) and there is also the problem of the browser taking forever to decode the base64 value (the buffering is also extermely slow).
With current web technology, I would say your best bet is to write the data to a temporary file on your server and then have something like Dewplayer load the temporary file and play it.
Related
There are a number of JavaScript libraries available for HTML5 audio, to either make a developer's life easier, ensure cross-browser compatibility or support Flash fallback for older browsers.
I haven't found much in terms of comparatives, except maybe for this article, on a small scale.
Which of the following libraries come recommended and for what purposes? What can I expect in terms of documentation and support (eg: is that library likely here to stay?)
Audio5JS
Buzz
HowlerJS
jPlayer
MediaElementJS
SoundJS
SoundManager2
I don't need UI features for my needs and would rather keep things small and simple. That would seem to make Audio5JS a candidate of choice. However I'm wondering if that's a smart choice simply because it doesn't seem to have as big a community as, say, jPlayer.
EDIT: I simply need to play an audio file (in full and/or parts of it) based on user input and the ability to loop that for a given file (ie: loop the file itself or loop a part of it.)
General guidelines on how to pick a JS library to get a job done will also be welcome.
I mainly wanna save myself the need to try out all those libraries (and more) to figureout their pro's and con's.
Thank you.
You may have already selected a library, but as the developer of howler.js, I thought I'd leave a note. From your description, I'd say howler.js is exactly what you are looking for if you don't need less than IE9 support. howler.js has now been under development/refinement for nearly a year and has a large community around it. It is great for both simple and complex tasks, and leaves any UI needs up to the developer. howler.js is currently the only library that I'm aware of that lets you seamlessly use both Web Audio API and HTML5 Audio with a single, simple API.
My recommendation would be SoundJS, but I may be biased because I work on it.
It allows you to get audio up and running with minimal code that will work across all modern browsers. Looping and playing from an offset both work smoothly. As far as I know, looping only a slice of a larger audio file smoothly can only be done with pure web audio, which currently is only supported in Chrome and Safari. SoundJS doesn't support that functionality directly, but does allow you access the web audio nodes directly so you can set it up manually.
Hope that helps.
You can also check out http://musquitojs.com/. It provides a simple API to create and play sounds.
For example, to play a sound all you've to do is.
import $buzz from 'musquito';
$buzz.play('gunfire.mp3');
The library also supports Audio Sprites.
We are currently planning a website on which people can upload movies. When looking at YouTube you notice that some movies are uploaded twice or more times (by different users). To scale our application we're thinking about the following idea:
User selects movie file to be uploaded
A JavaScript will get the SHA256 hash from the file (it's more accurate then the MD5 hash) before it get's uploaded
The website will check if the hash already exists
If the hash doesn't exist, the file will be uploaded
If the hash does exist a message will be prompted or a reference to the already existing version on the server will be created. This without the video being uploaded.
Q: How do we analyze a file with JavaScript in order to get the SHA256 hash, and is SHA256 good enough or should we consider SHA512 (or another algorithm)?
Use the HTML5 File API to read the file: http://www.html5rocks.com/en/tutorials/file/dndfiles. Here is a JS code for calculating SHA-256: http://www.webtoolkit.info/javascript-sha256.html
I must add that I never tried this, but it seems to be possible. Alxandr is right, this would take very long for large videos, but you may try to use the WebWorker API in order not to freeze the browser: http://html5rocks.com/en/tutorials/workers/basics
Putting files aside for now, if the question is actually whether it's possible to get a SHA-256 hashes in JavaScript, the answer is yes. You can either reiplement this yourself (bad idea) or use a library like the Stanford JS Crypto library (good idea).
As far as the File API goes, it is implemented in the bleeding edge version of every major desktop browser, as well as the latest Android browser shipping. iOS is not supported as it doesn't really have a filesystem. Check out caniuse.com for the latest stats.
Simple answer, you can't. That is if you want to support all browsers at least. I think both Chrome and FireFox supports the reading of files on the client, and IE supports it with the help of ActiveX controls, but to get a solution that works in all browsers you have to use a plugin like Flash or Silverlight. Also, when doing file-uploads of video-magnitude (large+ files), I think going for flash or the likes from the start is a good idea anyhow, but that's just my opinion.
I want to record audio using javascript and html5, there is device element in html5 but i dont know to use it. Found no examples for the same.
No current stable browser supports the Stream API (formally known as <device>), so in practical terms — you can't. The lack of examples using it is a consequence of this.
If you want to play with it, you have to use development branches of Chrome. There is a demo of voice input here.
currently, there are three ways to do it
as wav
all code client-side, uncompressed recording], you can check out --> http://github.com/mattdiamond/Recorderjs
as mp3 [ all code client-side, compressed recording], you can check out --> http://github.com/Mido22/mp3Recorder
as opus packets [ client+ server(node.js) code, compressed recording], you can check out --> http://github.com/Mido22/recordOpus
A quick search returned https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers, which contains the device element you mentioned.
I have a camera feed coming into a linux machine using a V4l2 interface as the source for a gstreamer pipeline. I'm building an interface to control the camera, and I would like to do so in HTML/javascript, communicating to a local server. The problem is getting a feed from the gst pipeline into the browser. The options for doing so seem to be:
A loopback from gst to a v4l2 device, which is displayed using flash's webcam support
Outputting a MJPEG stream which is displayed in the browser
Outputting a RTSP stream which is displayed by flash
Writing a browser plugin
Overlaying a native X application over the browser
Has anyone had experience solving this problem before? The most important requirement is that the feed be as close to real time as possible. I would like to avoid flash if possible, though it may not be. Any help would be greatly appreciated.
You already thought about multiple solutions. You could also stream in ogg/vorbis/theora or vp8 to an icecast server, see the OLPC GStreamer wiki for examples.
Since you are looking for a python solution as well (according to your tags), have you considered using Flumotion? It's a streaming server written on top of GStreamer with Twisted, and you could integrate it with your own solution. It can stream over HTTP, so you don't need an icecast server.
Depending on the codecs, there are various tweaks to allow low-latency. Typically, with Flumotion, locally, you could get a few seconds latency, and that can be lowered I believe (x264enc can be tweaked to reach less than a second latency, iirc). Typically, you have to reduce the keyframe distance, and also limit the motion-vector estimation to a few nearby frames: that will probably reduce the quality and raise the bitrate though.
What browsers are you targeting? If you ignore Internet Explorer, you should be able to stream OGG/Theora video and/or WebM video direct to the browser using the tag. If you need to support IE as well though you're probably reduced to a flash applet. I just set up a web stream using Flumotion and the free version of Flowplayer http://flowplayer.org/ and it's working very well. Flowplayer has a lot of advanced functionality that I have barely even begun to explore.
Is there a JavaScript library available that can playback an MP3 or related music file? The JavaScript would be fed the MP3 from the server and stream it back over the browser.
Here it is: soundmanager2
It works by exploiting flash, but it's a full javascript experience.
On FF3 you can use the audio tag... but it does not support MP3 (only ogg). On Chrome it might work with mp3. Safari should work as Chrome. Opera should also work, but I am unsure which codecs/formats it can play. Guess what does IE support? :)
IMHO, you should resort to playing MP3 using flash.
You'll probably end up using some flash-based media player, that you can can control via javascript using swfobject.
Probably your best bet here would be to use the Flash Player. There are many other ways, involving various plugins (Quicktime, WMP, Real), but Flash probably will give you the greatest coverage.
EDIT:
A pure Javascript solution is simply not possible, probably due to licensing constraints of the mp3 format.
No.
As others wrote, you cannot do that in a portable way, particularly on IE, which would need some plugin to play sounds.
JavaScript isn't really suited to manipulate binary data, anyway, and is quite limited to access computer's hardware, so it has to ask the browser, if possible, to do the job itself.