Blogfreakz - Web Design and Web Development resources » Sound

How To Create a Cool CSS3 Music Player

Marvin@Blogfreakz — Mon, 16 Jan 2012 14:09:09 +0000

No music, no life. And as far as web design is concerned, this awesome CSS3 music player would be perfect for adding a new dimension to your blog or website.

Indonesian artist Hidayat Sagita made this tutorial in which the goal is to use CSS3 instead of images, so CSS3 properties replace the following Photoshop techniques:

1. -webkit-gradient or –moz-linear-gradient property is used for color gradient
2. Border property for stroke.
3. –webkit-box-shadow, -moz-box-shadow or box shadow property for drop shadow
4. –webkit-border-radius, -moz-border-radius, border-radius for rounded corner
5. For a smooth bevel, the border property is used on one side or more with thickness of 1 pixel
6. Stacked layer for layer masking

Demo
Download

Some of this player’s properties are only supported by few browsers, but it’s so powerful that minimal use of images is required. Also, jazzing up your website with a player like this is totally worth it, so a browser upgrade won’t hurt at all.

Incoming search terms for the article:

HTML5 Music Player Plugin For jQuery

Mufti Ali — Thu, 16 Jun 2011 14:52:23 +0000

Remember that awesome music player psd created by Orman Clark?, The guys from codebase is create html5 music player plugin for jQuery by using this psd file. This jQuery plugin allow you to build your own playlist. The playlist uses the same format with jPlayer (an array of objects. However, this plugin requires you to add some additional parameters.

You can also specify some options, such as currency symbol, buy text, number of tracks to show and auto play setting.

Requirements: jQuery Framework
Demo: http://www.codebasehero.com/files/music-player/demo/
License: Other License

Incoming search terms for the article:

Speakker – Crossbrowser HTML5 Audio Player

Mufti Ali — Sat, 16 Apr 2011 13:13:04 +0000

Speakker is a fully featured audio player based on projekktor featuring native audio with Flash fallback. Speakkercomes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors
and two different button sets for light and dark themes.

Speakker is easy to set up. We can insert Speakker into any web page with just a few lines of Javascript and a quantum CSS. Featuring the technology of Projekktor it comes with cross-browser compability, Flash-fall back plus optional
social- and artists information links.

Requirements: -
Demo: http://www.speakker.com/demo/
License: GPL License

Incoming search terms for the article:

jsfx – Javascript Sound Effect Generator

Mufti Ali — Sun, 13 Feb 2011 02:21:23 +0000

Jsfx is a javascript library (with frontend) for sound effect generation. The generation is based on sfxr. Jsfx needs WAV support from browser to work. For short clips it can generate the audio in 30ms in a good browser. Might be fast enough to do runtime generation of effects.

You can modify the sound effect by add new paramater array to the libarary section. This array can be used to generate the audio at runtime, this means no audio downloads.

Requirements: WAV Support Browser
Demo: http://www.egonelbre.com/js/jsfx/
License: MIT License

Incoming search terms for the article:

ZEN Simple HTML5 CSS3 Audio Player

Mufti Ali — Sun, 30 Jan 2011 08:43:50 +0000

Zen is a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3. Zen has very simple user interface. You can see In the stopped/paused state, it similiar like a little of a dark Zen stone lying on bright sand, that’s why this the creator call this audio player as Zen.

This Audio Player is just a demo. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. Also other known issues are:

There is no preload indicator yet.
Chrome on Windows has a known box-shadow bug where the circles don’t get cut off, no panic, should already be fixed in the nightly.
Opera starts to rotate funky after the first round, no idea why.
On iOS the many gradients and box-shadows make the transition slow. It might would need some simpler styling.
Plus there is no proper fallback for older browsers. A Modernizr and Flash combo should do it.

The player is now on github for forking, chewing and spitting out, if you’re interested.

Requirements: jQuery & jPlayer plugin
Demo: http://lab.simurai.com/ui/zen-player/
License: Other License

Incoming search terms for the article:

audio.js – Add HTML5′s audio Tag Anywhere

Mufti Ali — Thu, 16 Dec 2010 10:14:45 +0000

audio.js is a drop-in javascript library that allows HTML5′s tag to be used anywhere. It uses native where available and falls back to an invisible flash player to emulate it for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

It plays mp3s. No ogg. Because, lets be honest, in the real world, no one really exports ogg files.

With Flash as a fallback, it should work pretty much anywhere.
It has been verified to work across:

Mobile Safari (iOS 3+)
Safari (4+)
Chrome (7+)
Firefox (3+, w/ Flash)
Opera (10+, w/ Flash)
IE (6, 7, 8, w/ Flash)

Requirements: -
Demo: http://kolber.github.com/audiojs
License: Other License

Incoming search terms for the article:

Haiku – Clean & Simple HTML5 Audio Player for WordPress

Mufti Ali — Tue, 14 Dec 2010 16:02:09 +0000

Haiku is a clean and simple HTML5 audio player for WordPress, based on jQuery and jPlayer. It use text links instead of a bulky graphical player. Haiku inserts a text link to control playback. Hailku automatically Reverts to an invisible Flash player for browsers that don’t yet support HTML5.

Most audio player plugins rely on Flash, which doesn’t work on mobile devices. This player is tested and working on iPhone, iPad, Android, and other mobile devices, as well as IE 6 and all modern browsers.

It’s simple javascript and CSS, so it’s infinitely customizable! If you want the player to look or behave differently, just change a little bit of CSS and javascript and you can do almost anything you want with it. You can download haiku from the WordPress Plugin Repository.

Requirements: -
Demo: http://madebyraygun.com/lab/haiku
License: Other License

Incoming search terms for the article:

Accessible Audio Player (AAP) – Cross-Browser HTML5 Media Player

Mufti Ali — Sat, 27 Nov 2010 15:20:43 +0000

Accessible Audio Player (AAP) is fully accessible cross-browser media player. AAP uses the HTML5 element for browsers that support it, and the Yahoo! Media Player for those that don’t. Browsers that support neither degrade to a list of links to MP3 files.

AAP has Standard HTML player controls for all player functions, including play/pause, seek forward/back, volume up/down, and mute. All controls are shown with an easy-to-see border when they have focus. This is true for keyboard and mouse users alike. Status and Now Playing are both marked up with ARIA role=”alert”, which is a cue for screen readers to announce the content of these areas any time it changes. AAP is available in a standalone version or (with an additional P) as a WordPress plugin called Accessible Audio Player Plugin (AAPP).

Requirements: Modern Browser
Demo: http://terrillthompson.com/aap/aap.html
License: GNU General Public License

Incoming search terms for the article:

How to Building a Custom HTML5 Audio Player with jQuery

Mufti Ali — Thu, 02 Sep 2010 15:29:40 +0000

Neutroncreations recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and they put together some jQuery to hook up the player interface he designed. Neutroncreations is sharing tutorial How to Building a Custom HTML5 Audio Player with jQuery through the code to explain how it works, covering a few caveats along the way.?

They’re going to use jQuery to detect support for HTML5 audio, and if it’s supported, they’ll insert the audio player markup and the audio tag itself. This means that browsers that don’t have HTML5 audio support won’t see an audio player interface they can’t use. We could optionally fall back to a Flash based player.

Demo: http://thebox.maxvoltar.com
Source: http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

Incoming search terms for the article:

1 Bit Audio Player – lightweight Adobe Flash MP3 player

Mufti Ali — Thu, 28 Jan 2010 11:21:33 +0000

1 Bit Audio Player is a very simple and lightweight Adobe Flash MP3 player with automatic JavaScript insertion. It’s main purpose is to act as a quick in-page preview for audio files you link to from your website or blog.

The player can be easily installed as a WordPress plugin or used stand-alone in any website. Small audio players will than automatically appear next to any MP3s you link to.

1 Bit uses its own unobtrusive JavaScript and SWFObject 1.5 to embed Flash players into the page. You can even specify which links are affected through CSS selectors. The code generated is, of course, valid HTML 4.0.1 / XHTML 1.0 and the user won’t see any ‘click to activate’ messages. Since version 1.4, 1 Bit now requires Flash Player 9.

Small in dimensions and filesize, 1 Bit functions well down to sizes of 8×8 pixels and is about 15KB including the required JavaScript.

Demo: http://1bit.markwheeler.net/
License: License Free