PUBLIC MARKS from sbrothier with tag html5

This January, we teamed up with Dick's Sporting Goods to launch Gear in Action, a digital lookbook featuring products for the 2014 Baseball season. As you can see on this page of the finished site, video of the products in action displays at full height and width. This occurs regardless of browser size, and without distorting the video's original aspect ratio.

My article on using CSS to position HTML5 videos as fullscreen web page backgrounds has proven to be one of the most popular on this site, but the technique has a significant challenge in that it forces users to host their own videos, or to find a service to do so.

WebVTT is associated with subtitling HTML5 video, but the spec contains many additional features that aren’t related to dialogue. One of the most useful of these is the ability to read and link to video cue points. Creating WebVTT chapter tracks deepens viewer’s engagement with more informative content, while adding invaluable accessibility and UI features. Best of all, they’re easy to create.

Rich offline experiences, periodic background syncs, push notifications— functionality that would normally require a native application—are coming to the web. Service workers provide the technical foundation that all these features will rely on.

Develop apps for the web, mobile and desktop using Actionscript or HTML5/Javascript. The trial SDK ships with examples to get you started in no time.

but some of the parts of the image are specifically #ff0000 and I would like to be able to replace it by some other color, a custom user defined color.

Here is Beez, a web real-time audio experiment using smartphones as synthesizer effect controllers. This is our second Web Audio API experiment made in one Hackday at Zenexity. This time, we were much more focused on having the best latency performance: we used the bleeding-edge WebRTC technology, which allows you to link clients in Peer-to-Peer instead of a classical Client-Server architecture.

A few years ago, I wrote a little ActionScript 3 library called MicRecorder, which allowed you to record the microphone input and export it to a .WAV file. Very simple, but pretty handy. The other day I thought it would be cool to port it to JavaScript. I realized quickly that it is not as easy. In Flash, the SampleDataEvent directly provides the byte stream  PCM samples) from the microphone. With getUserMedia, the Web Audio APIs are required to extract the samples. Note that getUserMedia and Web Audio are not broadly supported yet, but it is coming. Firefox has also landed Web Audio recently, which is great news.

WebAudio Waveform Visualizer Customizable waveform audio visualzation built on top of WebAdio and HTML5 Canvas (plus, optional SVG renderer). With wavesurfer.js you can assemble a full-featured HTML5 audio player or create a sophisticated DJ application.

This project uses the new HTML5 Audio Data API. At the moment, only Firefox 4 beta supports this. Click the visualization area to toggle "fullscreen" mode.

Peaks.js encompasses a suite of software tools designed to allow users to view and interact with audio waveform material in the browser. Peaks.js uses the HTML5 canvas element to display waveform data at different zoom levels, and synchronise the display to playback of an associated audio element. The component provides some basic convenience methods for interacting with waveforms and regions of time in the audio, e.g., for distinguishing music from speech, or identifying different music tracks.

If you've read some of my other articles on this blog you probably know I'm a fan of HTML5. With HTML5 we get all this interesting functionality, directly in the browser, in a way that, eventually, is standard across browsers. One of the new HTML5 APIs that is slowly moving through the standardization process is the Web Audio API. With this API, currently only supported in Chrome and as of October 2013 also in Firefox, we get access to all kinds of interesting audio components you can use to create, modify and visualize sounds (such as the following spectrogram).

The Climate Reality Project is dedicated to unleashing a global cultural movement demanding action on the climate crisis.

ThreeAudio helps you create music visualizations in Three.js, by exposing audio data in GLSL shaders. It can be used directly with Three.js or as a tQuery plug-in.

I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. This post will focus on using pixel shaders to add post-processing effects to Three.js scenes. This post assumes you already know the basics of using Three.js.

Enhance your products with live, face-to-face communication.

PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a peer can create a P2P data or media stream connection to a remote peer.

You can build cool stuff with WebRTC in five minutes. Want to see what this library can do? Talky.io is powered by SimpleWebRTC! Or checkout the demo (note that screensharing won't work because HTTPS is required.)

Video chat with your friends (and/or customers) on Twitter with only a web browser!

When I build my Instant Webcam App, I was searching for solution to stream live video from the iPhone's Camera to browsers. There were none.

Canvas-based UI with visualization options.

Canvas-based UI with visualization options. Note: Spectrum/EQ visualizations

Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.