For a long time I've been using Soundmanager2 (http://www.schillmania.com/projects/soundmanager2/) whenever I need to add sound to a webpage. This is a good overall library that makes playing sounds on the web easy and straight forward.
Are there any better/more modern approaches to web sound, particularly with HTML5 audio, or is this technology still not mature enough to be useful?
HTML5 allows you to have a native audio player that is essentially supported by all the major browsers, and the advantage of HTML5 is that you can still use your soundmanager2 as what is called a "fallback". http://www.html5rocks.com/en/tutorials/audio/quick/
Related
After several years working with commercial and custom Flash video players, such as Flowplayer and jwplayer, I decided to open my work to html5. I like the idea of having a Flash impersonation of html5, so I tried medialements.js, video.js and jplayer. None of them are production ready and they all fail to meet my goal, which is playing a video on a webpage, desktop and mobile, live and vod.
Does anyone has a suggestion for a working web video player, apart from the commercial ones?
TIA
greg
I can get to what you are saying. Videojs is a leader in HTML5 video and considered state of the art by many though I think it falls short on some aspects especially for iOS/Android and Live streaming. Here is a list that compares some common actors of the market.
After much time playing with the different players available I decided to build my own HTML5 video jQuery based player. I learned so much while doing so and if you are planning on re-using it for your projects it will be much faster to tweak your own player rather than trying to build something up on a player someone else built. Now doing so requires you like JavaScript and are happy to deal with the cross browser testing. This article can give you a place to start. Digging in further would require you take on board the W3C spec.
Live streaming in HTML5 video is limited today: HLS for iOS and Android > 4.1 and coming in fast MPEG DASH (it has a JS lib for live and on demand here). If you want to cover a large audience for live video streaming you still need to consider flash.
HTML5 audio on mobile devices has many limitations and actually I would call them bugs.
My app implementing something like audio player.
Actually all it works fine for desktop but in mobile version I encounter many bugs and have to do many workarounds different for different browsers and os to get it work, and still it sucks.
I haven't dived into web audio api, but it seems to be designed for slightly different tasks.
So my question is, is it make sense (and is it possible?) to replace HTML5 audio with Web Audio API, if I need just to load files and play them (partly, sprites) just to avoid limitations and bugs of HTML5 audio?
I think you're probably going to find at least as many bugs or edge cases with Web Audio on mobile as you're seeing using the <audio> element. Plus, support for Web Audio on mobile platforms isn't great. If it were me, I'd be inclined to stick with <audio> unless you have a specific use-case that can only be addressed by the Web Audio API.
Actually, I'll disagree - if your goal is to play short snippets of sounds, particularly simultaneously - e.g., providing sound for a platform jumper game - Web Audio is going to be a lot easier to use, including on mobile. has issues managing multiple files/instances. On the other hand, if the problems you're running in to are due to decoding issues, or you're using mostly long files, it's not going to help, as Kevin and Brad said.
I recommend SoundJS which I develop, it takes a lot of the pain out of supporting audio on multiple devices. Basically it lets you write a single code base that works everywhere and already deals with edge cases where it can.
HTML Audio element implementation on mobile devices is really terrible, so if not SoundJS I would at least recommend switching to Web Audio which works well on iOS and Android Chrome but is not supported in Android Native browser.
idbehold's comment is accurate, the most common problem with mobile devices is having to play audio inside of a user initiated event (touch). I've developed a solution to this problem, shared in the Mobile Safe Approach tutorial.
Hope that helps.
I notice that there are many libraries out there for playing HTML5 audio, but ain't the whole idea of HTML5 audio that we don't need a library for this to work properly?
If I don't need Flash fallback, but a simple solution for streaming music (my own) that can also play each track after each other, do I then need a library like jPlayer or Soundmanager2?
I know I need different audio formats, but that's not a problem as I won't have many tracks online.
The "whole idea" of HTML5 audio is that end users and web page authors shouldn't need to rely on a browser plugin to play audio - the functionality should be included in the browser, and controllable directly from standardised HTML/JavaScript.
I haven't used an HTML5 audio library, but looking at the jPlayer and Soundmanager2 home pages, it looks like the main functionality they offer is fallbacks for browsers that don't support HTML5 audio.
I suspect they might also have some built-in custom UI for playing audio though, in case you don't like the native audio controls that browsers provide.
You could use straight-up HTML5, but you'd soon realize that has a whole host of problems.
Library's like jPlayer (which is great by the way) account for many common issues like browser support, optimization and fall-backs etc.
If you want to code all that yourself you can, but a popular library will be leaps ahead and it's the wise choice to take.
The truth is, HTML5 offers very powerful features, but its support is thin at this current moment in time. It's all to make your life easier!
HTML-5 audio actually encompasses two distinct factions at this point. One is the audio tag and the other is the Web Audio API. The former is a quick mechanism for playing an embedding audio files, the latter is a way to play,process and manipulate audio in a low-latency manner acceptable for game development and more professional environments where features like reverb effects,filters,"3D" sound and other characteristics are needed. But to answer your question, the only real reason to use a library for the HTML 5 audio tag is (in my opinion) for backward compatibility between browsers as well as ease of use for things like multi-shot file triggering and event handling.
I am redesigning a music player. It currently uses Soundmanager2 V2.97a.20110801. But now since the HTML5 is so easy to use, is there much of a reason why I should continue using Soundmanager2? Or are there advantages to it that I am unaware of? Could you possibly help with a simple compare and contrast of the 2?
Soundmanager uses flash, HTML5 audio uses the native capabilities of the browser. A pitfall with <audio> is that you'll have to encode your audio at least twice, as mp3 and ogg.
Another thing is that older browsers, IE8 in particular, don't support <audio>. You may want to detect* audio support, and, if not, fall back to Soundmanager.
About audio codecs
This web page talks about <video>, but detecting <audio> is done almost the same way.
the HTML5 audio tag is still a work in progress and unfortunately still has too many browser specific differences in supported audio formats for an easy cross browser solution.
it still varies widely depending upon what you want to accomplish.
here is a link to the info you should read through:
http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#intro
this may be a little off topic but i built an opensource audio library on github for playing multichannel sounds like this...
// play the lowest piano key (1)
jThump( 1, 'piano' );
// play the highest piano key (88)
jThump( 88, 'piano' );
below is a simple demo that plays random notes when you press the 'z' key
http://jthump.com
sorry for the convoluted and subjective question, but multimedia is totally out of my area of expertize.
I know there are several alternatives to embed video on a page. There is HTML 5 <video> tag, there is video/ogg content type which seems nobody uses, there is Flash SWF embedding or Flash FLV progressive, I think Silverlight has something and finally there is external hosting.
My needs are for a commercial site video tour, it has to be fairly good quality. Good hosting is around USD $100/mo (I looked at viddler.com, the ones 37signals use), over my budget. Is there a good, commercial, hosting at under USD $20/mo ?
So I'm considering the alternatives. I believe my best bet is on SWF, is a tested technology, supported by plenty of platforms. Besides I'll need to use their charting components anyway later down the road. What tool do I need? Standard Flex Builder, Professional Flex Builder or I can use the free Flex SDK?
What other alternatives are there?
There are already many Flash applets that will play video in any browser that has the Flash plugin (as new as possible, hopefully). For example, Flowplayer is pretty much ready to use out of the box. All you have to do is embed it on your website and point it towards whatever video file you want to show.
I assume you're not hosting the next YouTube, in which case a quality webhost with generous or unlimited bandwidth caps would be enough. (I have used Site5 for $5/month before and haven't been banned, at least :p).
As for quality, generic FLV uses an older codec that's not so great. Newest flash player can use the excellent H.264 codec (what YouTube uses for HQ and HD video) in MP4 container (take a look at this tutorial). Of course, the higher the bit rate, the better the quality, but the slower the video loads.
For playing videos that you control Flash is probably your best bet. The JW player is pretty good and fairly cheap to purchase for commercial sites. It's very easy to setup too.
You just need to make sure that you're serving files that Flash can play.
JW Player info: http://www.longtailvideo.com/support/jw-player-setup-wizard
Flash codec info: http://en.wikipedia.org/wiki/Flash_Video
Good luck!
You could make a youtube account, upload your videos there and then embed them on your site. It is free to use, widely supported, and you can reach a bigger audience that way.