![]() ![]() The buttons shimmer and move very fluidly, and the entire interface feels very slick. Mobile sites eespecially will love the small size of this player, and it’s been verified to work across mobile Safari and Chrome, making it attractive for websites aimed at those on the go!Ĭodebase’s HTML5 player is another entry in the minimalist audio player category, but it does it well: the music player is built entirely in jQuery, and the dedication to the aesthetic shows. Once loaded in the browser, you can use tags anywhere in the HTML file – even if the browser isn’t HTML5 enabled, audio.js gracefully falls back to Flash.Īudio.js is small, lean, and customizable (to a point), enough that it would serve well as a drop-in to most websites. The API has no external dependencies and is flexible and easy to use, supporting HTML5 audio where appropriate and falling back to Flash gracefully when need be.Īudio.js is a no-frills player that aims to provide a drop-in functionality anywhere. SoundManager 2 is lean – the whole install is only about 11 KB once properly optimized. With some customization, however, it can be skinned to just about any theme, image, or design imaginable – the screenshot below is a skinned and customized install of SoundManager 2, complete with functioning turntables! SoundManager 2 is one of the more customizable products on this list: in its most basic form it’s nothing more than a small HTML5 player that can start and stop a song. Definitely worth a look if you need a smart, inexpensive HTML5 audio player to fit on your mobile-optimized website! The progress meter and the audio buttons offer customizable color and dimensions to fit your theme. You can toggle a circular progress meter that shows time remaining as well as the playback position. The player features graceful fallback capabilities and slick interface. The first and most obvious one is cross-device compatibility – the player has been tested extensively and works on iOS, Android, and desktop browsers. While this HTML5 audio player isn’t free, at mere $5 it offers a rich set of features. If you are looking for a simple, flexible HTML5 player that works with jQuery and has great documentation and community support, then look no further than jPlayer! One of jPlayer’s big advantages is its extremely active open source developer community with a wide platform support, free plugins, and comprehensive documentation. It’s also very small – only about 8KB in size in its gzipped and minified version. It is extremely fast and easy to get started with – you can have a functioning deployment running in just a few minutes if you don’t mind the default version. Also much like MooTools, jPlayer offers the power of a framework player: the flexible API that’s familiar to jQuery developers. Like MooTools player above it, jPlayer is based on a framework: jQuery. MediaElement offers extensive customization options – it’s fully skinnable and supports Ambilight, full-screen video, the element, Flash/HTML5 YouTube API, auto translation thanks to Google Translate, and a host of other features. It plays well with other custom frameworks due to its ease of modification, and it is easy to extend the framework via JavaScript “feature” plugins. The player has plugins available for most of the major CMSs like WordPress, Joomla, Drupal and others. It includes custom Flash and Silverlight players that will work with older browsers, and those players are designed to mimic the normal MediaElement player. MediaElement might be the most popular HTML5 player on this list, and for good reasons: it supports both audio and video, it’s written in pure, clean HTML5 and CSS, and it’s highly backward-compatible. If you’re looking to make the switch, here are ten HTML5 audio players that you can pop on your website in lieu of a Flash player! That has made a great deal of developers quite excited, as they can start leaving their cumbersome Flash players for more elegant, faster HTML5 media players. ![]() VolumeControl.addEventListener('input',setVolume) ĭocument.HTML5 browsers have, in recent years, begun to gain more and more market share. VolumeControl.addEventListener('change',setVolume) Var volumeControl = document.getElementById('sound1') Var audio = document.getElementById('sound1') ![]() I'm trying to make a volume slider for each audio player (like 4 volume sliders for 4 audio players), so far I found a code source of a volume slider for only audio player, and to be honest, I don't know anything about javascript and you guys are my last hope. ![]()
0 Comments
Leave a Reply. |