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.
Related
It might be a duplicate, but I didn't quite find the answer, so what is more efficient - using just a plain video element (if i dont need support for ie8, for example and all the fancy stuff), or using some plugins for video like video.js?
My main concern is load time - is there something that makes video files load faster when using video plugins?
With a plugin (be it Flash or a framework like video.js) you have the load/initialization time of the plugin itself to consider, though that will be largely minimal compared to the pre-load time of the video. Some Flash players have a fairly large .swf file though most (like most of the .js frameworks you'll come across) are pretty well optimized these days.
The largest chunk of time, with either, will be the pre-buffering to get to a state where the video can play through without further buffering. This will be impacted by the resolution, framerate etc of the video itself and optimizations like the positioning of the MOOV atom (if it's at the start of an .mp4 for instance then the browser doesn't have to read/cache the entire clip before it will start playing)
Flash (a plugin) may have better support for different types of media (for instance if you want to use a fMPEG format like HLS or DASH) but may restrict the devices/platforms you can run on. HTML5 and the <video> tag will - as you point out - only be available on more modern browsers and with or without a player framework to extend it offers a lot of flexibility (and capabilities are improving with time). This is a good overview of pros and cons.
I've been searching for it for a very long time and can't seem to find any relevant items (I know about the VLC plugin and I don't think it supports sound effects for video games). I need something similar like FMOD or Bass (or an NPAPI wrapper for these two) or a DirectSound NPAPI plugin, or just anything as long as it can support loading .wav, .ogg, .mp3, .m4a, etc. and can play those sounds in multiple instances.
EDIT: The reason I'm trying the NPAPI route is because the Web Audio API isn't really ready for primetime yet. I already tried Chrome's implementation and it has a bit of latency when playing the sounds (and multiple instances of sounds). It's even hard (or maybe impossible) to pause-play sounds with the current API spec. I also tried Flash (via SoundManager 2) and it also suffers from latency. It's fine for games but not good for making music applications such as a drum sampler. I hope this clarifies. (Sorry for my English, it's not my first language)
I don't know of any existing plugins that will do what you want, but if you have some good c++ experience you could build a plugin to do that with FireBreath. The sound playback functionality you'd have to implement yourself, though.
Keep in mind that Chrome has announced plans to stop supporting plugins by the end of 2014 and Firefox will be blocking them by default starting in firefox 26, requiring users to specifically enable any plugins used on a page before they will work. You also have the "fun" install issue.
In short, if you can do something without a plugin you should absolutely not be using a plugin.
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
I am now using an embedded Windows Media Player (tutorial) and I can manipulate with time slider through Javascript. But then I discovered the Jlembed plugin for jQuery and thought it solves all my problems because of the different platforms, etc.
But after I spent a few hours in setting things up I relized that it does not have functions like setCurrentTime or getCurrentTime and these functions are most important for my type of project.
Is there a way to achieve this functionallity with Jlembed?
As far as I know, Windows Media Player does not support the type of interaction you're trying to achieve with it's embedded player. I did not include any javascript functions for Windows Media Player because it is not necessary. jlEmbed does not affect your ability to control the embedded player with javascript. So, if Windows Media Player supports a particular script, jlEmbed supports it also.
If there is a javascript API for WMP please point me in that direction and I will add better support for it, but I don't think it exists. However, if one does exist, jlEmbed will not prevent you from scripting as would normally be done.
I spent a great deal of time on the YouTube support, but only because I had to. Otherwise, it would have been much more difficult to control the YouTube player, which is the most popular and widely available media player on the web.
Only a small percentage of users will actually be able to use your embedded WMP presentation. The YouTube player is compatible with any browser that supports Flash. You would be better off creating a custom 'chromeless' YouTube player than using WMP for your presentation. An even better alternative would be to use Flash to make your video presentation.
According to the documentation, the following functions exist that might help:
jlembed_seekTo(playerId, seconds, allowSeekAhead)
jlembed_getCurrentTime(playerId)
Hope that helps!
Is JavaScript capable of doing the same what Flash does? And if it is the case, can it be a good idea to switch from Adobe Flash to JavaScript?
No, JavaScript cannot do what Flash does.
Maybe HTML5 w/ canvas,JavaScript w/ JQuery,CSS3, some Webkits and some SVG/JPG to handle pictures and animations can make an attempt at what Flash was 5-10 years ago.
Video
JavaScript - There is only one implementation I know that slice the video into JPEGs then dram it onto the canvas. No clue what happens if one wanted to stream a file.
<video> tag - Best thing to come along. I would not lie. But this is not JavaScript.
Audio
JavaScript - I remember once it could be used for MIDI files but then it needed compatibility checks based on the browser
<audio> tag - Same reasoning as <video> tag, it is not JavaScript
Animation
These are three places I know making the cream of the crop that can be made with JavaScript.
Mr.Doob's Playground
Spiderman Animation
SmokeScreen Flash to JavaScript
Note well.
Do not talk about Apple Demos ... that is a joke and all marketing. They have only optimized for their browser (Safari)
Also do not talk about what Steve did or did not say. He is a pro at marketing. The other steve (Steve Wozniak) is the engineer.
(1) I highly respect because Mr.Doob really pushed that <canvas> and JS . (2) Was great animation that could be accomplished by a teenager in Flash IDE 5 years ago ... way too much effort to make something so simple. (3) Is really good yet you start with the Flash File ^.^
Lines Of Code
In many cases ActionScript, better yet the Flash IDE make animation a breeze with half the lines of codes (or maybe even simple drag and drop on timelines) than JavaScript. Libraries such as JQuery were brought in to try to shorten the amount of code. Even then in most cases less code/implementation was needed in ActionScript.
Accessibility and Performance
This is in the hands of the developer and has nothing to do with the language. Flash is capable of providing deep linking with SWFAddress (Ajax), page resizing (Stage Scale) and so forth. People constantly talk about performance with Flash, yes this is true but this is poor design on the developer for memory management.
Updates
JavaScript will be limited by the <canvas> and other elements to achieve what Flash can do.How ? If issues started to occur in HTML5, what would you do ? Send in a bug request ? No ... you will wait a next 3-5 years for HTML6 specification.
Suggestion
I suggest looking through Mr.Doob's work, Webby Awards and google the best of Flash Websites. Look at them carefully see if you can bring up case studies. Like this one : Creating marketing platforms with Adobe Flex Website under study : http://www.bombaysapphire.com/
And a word to a wise , one of your favorite websites - YouTube, would not have survived if it was not for Flash :D
Hell you can use javascript to "do" flash!! Check this out! Smokescreen
On a serious note, flash has its own advantages. Like e.g. games and some very specialized apps like audio video editing etc. Maybe javascript and HTML5 is not there yet, but its getting close!
Is JavaScript capable of doing the same what Flash does?
No, definitely not. While both share some capabilities, like animations and interactive interfaces, JavaScript's and Flash's design philosophies differ fundamentally, and in terms of features in those fields, Flash is certainly way, way ahead.
And if it is the case, can it be a good idea to switch from Adobe Flash to JavaScript?
It might, depending on what exactly you are doing in Flash. If you outline that in more detail, you will certainly get more concrete answers.
Here's a response to Apple's recent trumpeting of HTML5 - Jump back in time with HTML5. There's still plenty of reasons to use Flash!
The Apple HTML5 demos (left parts)
only work with Safari (4.7% of all
users on all devices). Some HTML5
features work, others won't work on
other browsers. As a matter of fact,
HTML5 is not really a standard at all.
The Flash TODAY demos (right parts)
show how 97% of all websurfers can
experience Flash the way it is
supposed to be today & tomorrow: fresh
& innovative. By the way, these
Flash-examples are extremely hard or
simply impossible to build with
HTML5
Depends on what functionality you are looking for. While javascript has much evolved recently and many frameworks were introduced it cannot be compared to Flash in terms of creating rich web interfaces. I think though that progressively new concepts will be introduced like HTML5, usage of the GPU and HTML + javascript might one day fill the gap.
Javascript is vast. But it cannot replace Flash.! The biggest Advantage of using flash is hiding the source code.. Which in Javascript is nt applicable always.!
Flash is Used in Animation of Cartoons and 3D web sites etc.. Of course u cannot create a front end competing to Flash..
One good solution would be => If you want ur site to hav good programming properties den go for javascript..
If U want ur site to be good in Front end design den go for Flash!!
Although flash has its scripting language [Actionscript] its not dat much flexible as javascript!!!!