I'm working on a project of visualising audio into canvas, so far I understood that I would have to use AudioAPI, something like SoundManager 2 etc. which has a flash fallback. There is one thing tho, I don't wan't to use flash fallbacks (at the moment I would only want this visualisation to work in modern browsers with support of HTML5 audio), therefore I'm not sure if I should use it. Is it possible to achieve cross browser visualisation without any external resources? or using SoundManager 2, but somehow without flash fall back? I'm new to this, could you please outline steps that I need to take in order to proceed with project.
Nope. No cross-browser way to do this if you don't want a Flash fallback. Chrome and Safari have the Web Audio API and Firefox has the Audio Data API (for now, it's been deprecated), but IE doesn't currently have any way to manipulate audio without plugins.
Related
i am coding on a custom player for quite a while now.
My plan was to use soundcloud as my backend. And the HTML5 audio Tag as my streaming object.
I also want to include a Canvas for a bit of visualisation. And thats were the problem starts.
For the Visuals to work on both Browsers, I need to load the audio into an arraybuffer via xhr request. But then I can't use the audio Tag anymore. Which is sad, because by now I know how to code all the functionality i need based on it.
I found the article on html5rocks about html5 audio and WebAudio being best friends.
There is also an example on how to use the tag with an frequency bar visualizer. BUT
this only works on Chrome, because Firefox - maybe some of you have noticed - will play .mp3 files but inside a video object. For the visuals to work I would need .ogg files for Firefox. But then i can't use soundcloud as my backend anymore.
So do i have to rethink the whole player - or is there a way to decode the audio on both browsers while using html 5 audio?
thank you very much.
That's an issue with FF (no MP3 support in <audio>). But can't you get a media stream from the element also? It shouldn't matter that it's a not an - audioContext.createMediaElementSource should work on that, too.
How does one go about streaming video in HTML5 ? I can go with using a single browser of the latest version if I have to.I need to be able to start playing from any location of the movie even if the entire video has not been loaded by the browser.
WebRTC ?
I've already seen this question and no one has answered.
Does not allow the viewer to skip to the middle of a video in any
browser. They must watch the video straight through start to finish,
which is not ideal.
This is the main point for streaming.
Currently if you want to use pure HTML5 and work cross-browser you are limited to progressive streaming with the <video> element.
While that still does allow the user to skip ahead via the scrubber or programatically by setting the .currentTime there will still be some buffering while the browser re-loads enough content to be comfortable playing smoothly.
Solutions like Smooth Streaming, HLS do not work across browsers today so you would require a Flash or Silverlight plugin, though with MPEG-DASH being recognized by the W3C there is some hope for the future as samples like this demonstrate http://dash-mse-test.appspot.com/release-notes.html
For today however if you want to stick with an HTML5 solution and you have source in a format the works with the browser then you should be fine
Chrome has implemented the Media Source API in the mean time. Hoping the rest will follow.
http://www.w3.org/TR/media-source/
Abstract
This specification extends HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.
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've looked round for a few days now and can't seem to find anything.
What I'm looking to do is to take an audio source, from a single single microphone - ideally this will be done in the browser, I want to reduce the need for any plugins and limit the use of flash if at all possible. I would then look at broadcasting this audio stream to multiple clients (much like internet radio I guess), again all done in the browser. I've looked at things like icecast and shoutcast and they seem to to do what I need for this end.
What I need to know is if it is possible to capture an audio stream completely through a browser?
(Note: This will be sitting in a ASP.Net application)
You can try the WebRTC api that is on progress. The Api does just like what you're doing.
for HTML5 you can simply use the tag, however, as of today, firefox will not support MP3 broadcasting with that, why? because of some copyright stuff, however they are working on it and i heard a couple of days that it will be available natively for firefox.
check this stream, it uses tag, run it on iexplorer or chrome, even safari will work
geekius.net/radio
I have a OVG video and I would like to put that into my site. I do not know much about that file format so I am concerned how it will be with cross browser compatibility. I know that FF will play the file yet I am unsure about IE (I am only worrying about IE 8+)
What is the best way to put this file into my site? Should I use the HTML 5 <video> tag or should I use another format? I need this to work with IE 8 so I am unsure what the best route is.
Thanks!
You should use video element, with multiple source elements inside, each pointing to a different format of your .ovg file. you can generate cross-browser files at media.io or via Miro converter (download). the best way would be to degrade gracefully for older browsers, you'll want to provide some JavaScript, VideoJS is my preferred lib, you can use their embed builder tool, that'll provide the older fallbacks
For the best compatibility, you'll want to use a video hosting site and embed the Flash video into the site. If you want to host it yourself, you'll have to find a Flash video player that you can use, but I'm pretty sure most or all of those are commercial.
Otherwise you'll need to have both an H264 version (MP4) and an OGG version and include both versions in the source tag. You can then also include a fallback to a Flash embedded version.
You can find out more here.