All posts tagged ‘audio’

File Under: HTML5, JavaScript

SamplePlayer Makes Your Browser Sing, Sans Flash

SamplePlayer, SampleLoader, Sequencer and Keyboard (With Audio Data API) from almeros on Vimeo.

It runs in the browser, it doesn’t use Flash and it makes a whole lot of bleepy noises.

SamplePlayer, created by electronic musician and web programmer Almer Thie, is a musical keyboard, sequencer and signal processor embedded in an web app. To power SamplePlayer, Thie utilizes the experimental Audio API in Firefox — he’s running a special build of Firefox with support for the Audio API rolled into it, so most of us will have to settle for the video above.

All the sliders are jQuery creations. Plus — those duck noises? Awesome.

We’ve seen DSP apps and software synthesizers in the browser before, but the vast majority of them have been Flash-based, so it’s awesome to see such advanced audio processing happening with JavaScript and browser APIs.

If you’d like to experiment with Firefox and audio, have a look at the Mozilla developer documents using audio and video in Firefox.

[Hat tip to Chris]

See Also:

File Under: Browsers, HTML5

New Hardware-Accelerated IE9 Preview Arrives

Nothing fishy about IE9's hardware acceleration: This demo shows an animated fish tank rendered using Canvas.


Microsoft has released Internet Explorer 9 platform preview 3, the latest pre-release version of the company’s next web browser.

Curious developers running Windows can download platform preview 3 starting Wednesday afternoon. This version of IE9 features expanded support for specific HTML5 elements that can take advantage of the browser’s new hardware-acceleration abilities.

“Most computing tasks on the web only take up 10 percent of the PC’s capabilities,” Microsoft’s Ryan Gavin said at a press event Wednesday. “We want to unlock that other 90 percent.”

The new IE9 platform preview has expanded support for HTML5′s native video and audio capabilities, as well as expanded support for the Canvas element.

“Showing how well we handle these HTML5 elements is the point of this release,” says Microsoft’s Rob Mauceri.

Microsoft has taken a fair bit of heat in the browser world for being slow to adopt HTML5. Though not yet finalized, the emerging specification is already widely supported by Chrome, Firefox, Opera and Safari. Microsoft’s current version of Internet Explorer, IE8, is woefully behind these other browsers when it comes to support for HTML5 and other standards like CSS 3.

With IE9, due around the end of the year, the company hopes to get back on the right path.

Microsoft has engineered this version of the browser to take advantage of the latest multicore processors and GPU chips shipping in the newest hardware. Several of Microsoft’s hardware partners — AMD, Asus, NVidia and Dell — were on hand with their newest, fastest machines at the press event to show the browser preview running through some Microsoft-built demos.

The company first showed off a hardware-accelerated preview of IE9 at a developer event last year, and then upped those capabilities with the second platform preview in May. But Wednesday’s release of IE9 has some updated code to access the hardware and an updated JavaScript engine to make scripted animations smoother.
Continue Reading “New Hardware-Accelerated IE9 Preview Arrives” »

File Under: APIs, Browsers, HTML5, Multimedia

New HTML5 Tools Make Your Browser Sing and Dance

kraftwerk_live_in_stockholm

HTML5′s <audio> tag gives you a way to embed audio files directly into a web page without requiring a plug-in. But the audio element could do a lot more than just offer Flash-free inline audio players on your favorite MP3 blogs.

The audio player element could end up fueling a whole new class of web applications — online audio editing suites. Some online audio editors written in Flash already exist, and people are using them to creative ends. But we’re just now starting to see truly amazing audio editors, synthesizers, visualizations and musical creation tools running in the browser without the need for Flash.

To see what it’s possible to do with the HTML5 audio element and some accompanying JavaScript, David Humphrey, Lead of Mozilla Education as the Mozilla Foundation, has been experimenting with audio in Firefox. To cap off his series of experiments Humphrey recently showcased a number of vary impressive Firefox interactive audio experiments on the Mozilla Hacks blog.

The videos (more of which can be seen on the Mozilla blog) highlight possible future webapps: collaborative music creation using multiple browsers, touch-screen audio interfaces, real-time audio analysis software, online mixing boards, beat detection scripts and even an online clone of Brian Eno’s Bloom iPhone app.

The best part about these demos is that, as Humphrey’s says, “this is real code, running in a real browser, and it’s all being done in HTML5 and JavaScript.” Of course the main caveat is that, for some of them to work, you’ll need a patched version of the Firefox development trunk.

The reason is that some of experiments rely on non-standard APIs. In other words, much of what’s happening in these experiments hasn’t been blessed by the W3C just yet. But plenty of what we use on the web right now — XMLHttpRequest anyone? — started out exactly the same way. Technology like this ultimately succeeds only if browser vendors and web developers work together to push it forward.

Thinking you’d really like to see an online version of ProTools? Well, according to Humphrey, “the web is fast enough to do real-time audio processing now, powerful enough and expressive enough to create music.” All that remains is for someone to build it.

If you’d like to experiment with Firefox and audio, have a look at the Mozilla developer documents using audio and video in Firefox.

An example of audio filtering tools:

Amazing, real-time analysis of audio with synchronized 3D graphics:

Photo: Kraftwerk by Andreas Hagstrom, via Wikimedia, CC

See Also:

File Under: Glossary

Embedded Media

These are the types of media you can include in an HTML page, such as audio files, flash or GIF animations.

File Under: Glossary

MP3

MP3 (MPEG-1 Audio Layer-3) is an audio compression format that creates files that can be easily sent or downloaded across the internet.

Using ripper and encoder applications, CD tracks can be converted to MP3 and reduced in size by a factor of 12. MP3 files have varying degrees of sound quality, depending on the encoding settings that are used during the compression process.