Between them you'll find the scrubber/HTML5 range input field. Within ".container" I've added an image (which will be the album cover), then the three anchor tags will act as the controls for the player. I've created a separate class of gradient as this will be reused on some other elements. Īfter the h1 title I've created a div with a class of "container" and "gradient". Fnally we have html5slider.js which allows Firefox to display the HTML5 input range type, which we will use for the audio scrubber. Then we have the latest jQuery and the custom JavaScript file js.js. Yahoos CSS Reset, the Google web font 'Lobster' for the title. The top of the document is made up of the HTML5 doctype. ![]() I'll miss out the design stage as it's outside the scope of this tutorial, but you can download the accompanying source code and browse through the PSD to get some idea as to how it's put together. Now that you have a bit of background on HTML5 audio and understand the basic principles it's time to put these into practise and create a customised HTML5 audio player. If you want a function to be called once the audio has finished playing then you can use 'myaudio.addEventListener('ended',myfunc)' - This will call 'myfunc()' once the audio has finished. Myaudio.muted = true - This will mute the track Myaudio.loop = true - This will make the audio track loop. Myaudio.currentTime = 0 - This will rewind the audio to the beginning. Myaudio.duration - Returns the length of the music track. Myaudio.pause() - This will stop the music. Make a note of these, we'll be using some of them later on in the tut when we create our audio player. Here's a list of actions that we can take with the variable. It really is that simple! Then whenever we want to perform an action on the audio we can trigger it by using the variable 'myaudio'. After we've defined document ready in jQuery, we can create a new audio variable to hold our audio file as simple as this: var myaudio = new Audio('mysong.mp3') Let's take a look at what jQuery can do for us. When we start to utilize the audio tag with javascript we can start to create some really interesting and useful audio players. In the last few steps we've looked at the simplest form of HTML5 audio.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |