Copy the generated code into your style sheet and Voila!, a new slider style. Local Music Player Based in HTML5, CSS3 and JavaScript. Include the class name you provided as a prop in the Namespace input at the bottom of the page under 'General'. This is a minimal, clean audio/music/mp3 player with spinning cover images, built with jQuery. I recommend using to generate your desired slider style. To style the range-input for the volume and seek subcomponents, provide a class selector name for the sliderClass prop (not 'slider', which will have the default styling). Requires !important attribute, includes pause icon The icon sizes are set by the iconSize prop, but individual icon sizes and styling can be overwritten by the following selectors. To style the whole AudioPlayer component, you can target the class 'audio-player'. Only required prop is an ARRAY of audioFile OBJECTs, which follows the pattern [,
CSS HTML5 AUDIO PLAYER SKIN
Use Skin Machine to create: - Wimpy Player Skins. Skin Machine itself is based on pure HTML5, Javascript and CSS, so what you see is truely what you get. Lastfm (string): URL to the artist´s last.fm page if any.Īdmin (string): URL to the admin backend if any. Use Skin Machine to design a player without compromises. Wikipedia (string): URL to the artist´s Wikipedia page if any. Theme (string): Use “dark” or “light” color scheme.įat (boolean): Makes the sticky playlist player even bigger if set to TRUE. Title (string): The player´s title used on single file playback. Poster (string): The default poster / cover for the given file. Playlist (boolean): Load “file” as JSON playlist on TRUE. Config Parametersįile (string): URL to a single audio file or a projekktor playlist holding one or more Setting values for them will enable the corresponding GUI elements. Optionally the big player variant features three custom links: “lastfm”, “wikipedia” and “admin”.
To avoid frustration and strange results let Speakker know that you feed him with a playlist by setting playlist to TRUE. You can´t apply to your local test installation or within a page at an other domain due to Javascript security restrictions. To get a first insight just open the mentioned PHP to see what it pumps out: To learn more about playlists please refer the Projekktor Playlist Docu. This is where the JSON playlist is generated. Īs you can see file does not point to an OGV or MP3 but to a PHP file. The script will generate the necessary DOM elements and will glue the player to the bottom of the page. To bring up the big sticky Speakker just use $().speakker (without a selector) as shown below. Playlists will work for the tiny variant also – but who cares. That´s why we want to focus on setting up a playlist driven instance here. This player has a powerful API and it gives you the awesome possibility of creating playlists directly from folders. The small Speakker is nice but the big one rocks. This is a simple and powerful HTML5 music player for your website with flash backup for older browsers. You can bring up the small version of the player with this: Something similar to this should be in your page´s header now: Īssumed you´ve something like this somewhere in your markup: Create an empty DOM container where you want the player to sit on.Inlude “speakker.css” and “mspeakker.css”.Speakker will automatically load it´s flash fallback component files from there. Make sure this includes all directories and files within.
CSS HTML5 AUDIO PLAYER ARCHIVE
Upload the “speakker”-folder of the download archive to your site.Make sure your page loads jQuery V1.4.2 or higher.Mounting Speakker into any website is quick and very straight forward: # AS OF March, 28th 2012 THIS DOC is outdated and currently being rewritten.
0 kommentar(er)
