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.
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.
I understand that the best bet when streaming a video as a source in an HTML5 tag would be .mp4. But let's say that I have a source that only outputs fragmented to an ism/manifest.
Is there any way at all, whether through other libraries or messy hacks, that I can bring this video into something rendered as a tag onscreen? The closest I have found is Walkthrough: Building Your First HTML5 Smooth Streaming Player because it allows this to be done - but I neither have Windows 8, or want to have this running a server capable of .NET. I was hoping there was something, messy or not, that I could achieve this with entirely within javascript and executable locally without a deploy.
Thanks
Firstly, W3C does not provide a standard for adaptive bitrate streaming, yet. So for the time being most browsers only support simple progressive download playback.
Hence, there is no JS implementation of a Smooth Streaming player and Microsoft is not working on one, as far as I know.
The example you provide uses the "Microsoft Smooth Streaming Client SDK Beta 2 for Windows 8" which is a C++ library and is only available for Windows Store Apps development. It has nothing to do with browsers.
So, unfortunately this is not yet possible. Even more, I doubt that this will ever happen, because everybody is waiting for MPEG DASH to be finalized.
UPDATE.
Please, notice that you always can use Siverlight application for playing SmoothStreaming. The referenced HTML5 Player framework is capable of falling back to Silverlight.
no luck for Microsoft Smooth Streaming, but regarding MPEG-DASH which is similar (see http://blog.johndeutscher.com/2013/06/10/mpeg-dash-preview-from-windows-azure-media-services):
"Dash.js is permissively licensed (under the BSD license) and can therefore be studied and reused by anyone seeking to provide their own DASH-AVC/264 compliant player. The goal is to make it easier for third-parties to build adaptive streaming video players."
http://msopentech.com/blog/2013/06/20/ms-open-tech-contributes-to-open-source-adaptive-streaming-video-player/
also see:
https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
which is required for Dash.js
We are looking for various options which will help us to record audio and video through web on various platforms including iPhone and iPad? Recorded media will be saved on the server. Any suggestions would be helpful... We are looking for a cross browser approach.
Thanks and Regards
I hate to say, but the only way to do it on desktop in a cross-browser fashion would be Adobe Flash. On iOS you need to develop Apps for that.
HTML5 will provide Device API at some point of future to achieve your goal.
You have to use Flash. Flash can access your webcam and microphone.
Of course, Flash won't fly on iDevices.
There, you'll need to write a native app. :)
Because you need to gain hardware control, you'll most likely need a native application that can access the hardware drivers and API.
My guess is that Java may be able to do the job.
Here's another StackOverflow question that may have an embedded solution.
Nevermind: iFamily doesn't support Java either
I am a little new to embedding videos on a website. What is the best way to go about it? I just started reading up on it.
I read that I should use HTML5 and the browser's native player. -- Does anyone know of a javascript library that will use the browser's player and detect if the browser is not using HTML5 to downgrade to a flash player?
As far as encoding what is the best approach? I am planning on writing a little console app to use FFMPEG to convert the videos. But what encoding should I use? I heard H.264 is promising? But
This is what you're looking for: http://videojs.com/
Encoding wise, I think H.264 and WebM is a wise choice. That way you'll satisfy all modern browsers and mobile devices (incl. iOS and Android), and only fall back to Flash for older, pre-HTML5 browsers (and FF 3.6, which only supports Theora.)
The DIY approach would be to use the Video For Everybody embed code. That will lead with HTML5 video and fallback to flash.
Then for video encoding, you can use FFmpeg like you said.
To make your life easier, you should check out VideoJS for your HTML5 video player. It handles a lot of cross browser issues and some extra features that browsers don't support yet.
For video encoding, if you're planning to use FFmpeg specifically for automating encoding, you should check out Zencoder's video encoding API. It could save you some set up time and compatibility issues.
For codecs, #1 priority should be h.264, specifically using the baseline profile so it will work on smartphones. After that, ogg and webm are both good choices. WebM is higher quality for file size, but Ogg can be viewed by way more users because older version of Firefox support it. And just to note, if you only do h.264, the Video For Everybody code won't fallback to Flash in Firefox and Opera (that don't support h.264) so you'll need to use a player like VideoJS.
Use Handbrake for video encoding, especially for HTML 5 support.
HTML 5 is an awesome way of embedding video, however it hasn't been standardized yet. You definitely want to use it if you're supporting iOS devices, as they of course don't support Flash which is the most mainstream way of embedding video.
HTML5 is pretty awesome because this is how simple it is:
<video src="video.m4v" />
Here is a fantastic link you will find useful:
http://www.robwalshonline.com/posts/tutorial-serving-html5-video-cross-browser-including-ipad/
I read that I should use HTML5 and the
browser's native player
Which idiot told you that? Given that you will loose out on a significant portion of the client population you either run a monoculture of HTML 5 browsers, of whoever said that should be serving burgers at McDonalds, not give advice to people. HTML 5 and the integrated player are nice, but not there yet for the general public. In a couple of years, yes. Now - if I hire a web company for putting videos on a website and they do that, they get sued for gross neglect and incompetence.
Today, playback is mostly flash - that has a high penetration. A flash video player is also what sites like youtube currently use. If you go for less (penetration), Silverlight is very good and has the complete backend infrastructure.
I heard H.264 is promising?
So what? FIRST you need to fix the playback side, then you use whatever format is most efficient given your playback decision.
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.