background preloader

Sound

Facebook Twitter

Application.js. ▶ News. Old School Cassette Player with HTML5 Audio. Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette. View demo Download source If you don’t know what a cassette is, you were probably born in the digital high-tech era, an era that is undoubtedly exciting and innovative. On the other hand, if you know what an audio cassette is, you belong to the older generation, the analog dinosaurs that know the painful connection between a pen and a cassette tape. The invention of the compact cassette tape happened 50 years ago, so it’s time to celebrate: “In 1962 Philips invented the compact audio cassette medium for audio storage, introducing it in Europe in August 1963 (at the Berlin Radio Show), and in the United States (under the Norelco brand) in November 1964, with the trademark name Compact Cassette.”

Compact Cassette, Wikipedia The songs in the demo are by the highly talented Blue Ducks and Blank & Kytt: Script Junkie | Native Audio with HTML5. Once upon a time, audio on the web lived primarily in the world of third-party browser plug-ins like Flash, QuickTime and Silverlight. This was not a bad world, but it had its issues. For one, most plug-ins require the user to install them, but not all users are willing (or able) to install them.

Also, many players built with these plug-ins are inaccessible, making it difficult for folks who use assistive technologies to access the audio or alternative content. Then there are the front-end design hassles like trying to get a dropdown menu to display on top of a plug-in-based player. And let’s not forget that to build a custom player with these plug-ins requires knowledge and expertise in that SDK. Enter HTML5 Today, we have another option: HTML5 <audio>. Not only does native audio deliver independence from plug-ins, it can be targeted with CSS and JavaScript. Sound good? A Basic Audio Player To add a simple audio player to your web page, all you need is a single line of markup: autoplay loop. Bartosz Kowalski Kompozytor Bartosz Kowalski / muzyka smyczkowa. SoundManager 2: JavaScript Sound For The Web.