We covered about this subject our previous post: CSS3 Tutorial: Create A Sleek On/Off Button. These characters are special HTML numbers to refer and render the icon characters that come from FontAwesome. If you take a closer look at this HTML structure, you will find the following characters , , and . To play the media you will need to either update your browser to a recent version or update your Flash plugin. TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change I suggest that you don’t change these classes as well as the id attribute to make things easier for when we style the audio player later on (unless you really know what you are doing). This id is used to link this structure to jPlayer later on through jQuery function.įurthermore, all the classes assigned on the following structure, including jp-play, jp-pause, jp-mute and jp-unmute are all the standard classes used in jPlayer. The important thing from this markup is the id=jquery_jplayer_1 attribute that is assigned in the div that contains all these. Now, it’s time to structure the HTML markup for the audio player and below are the HTML markup we need. Well, it is actually a video, but you can extract the audio only either through one of the following tools, Easy Youtube Downloader (FF Extension) or. The Audioįor demonstration in this tutorial, we are going to use the audio from Kelli Anderson from her presentaion at TEDx Pheonix. The first one normalize.css will reset or normalize the browser’s styles, so our web page will be rendered more consistently across the browsers, whilst the second one, style.css is where we put our main styles. Then link jquery.js and to the html document, as follow.Īs you can see, in addition to jQuery and jPlayer library, we’ve also linked two CSS files in there. We also need some icons for the media player GUI, and this time we will be using FontAwesome to deliver the icons.Īfter that, we extract all the downloaded files and put all the stuff, including the jPlayer files, the jQuery and the Fonts in an appropriate folder. JPlayer is essentially a jQuery plugin, thus we also need to download the jQuery for it to work, and at the time of the writing jQuery is currently at version 1.8.2. Recommended Reading: Check out our HTML/CSS3 tutorials. As long as you can HTML and CSS you are ready to go. The jPlayer is a jQuery Plugin that allows us to run rich media on our web page without a hassle. Read more What We Needīefore we create the audio player, we need to prepare some key items for it: the jPlayer, jQuery and a font icon set called FontAwesome.įirst of all, let’s download the jPlayer. Audio streaming have been around on the Internet since 1990 and there are not numerous popular audio streaming.
0 Comments
Leave a Reply. |