This is neither complex at all.Ĭontrols.js $(document). Obviously, we need some JavaScript for making the controls work. In this case, we create a div that will be the wrapper of the player, and, inside it, we set the audio element without the native controls, the play button, and the time and volume progress bars. For this, of course, we will be using JavaScript, but this part will be pretty easy, so it won’t be a big concern.įor this, we will use jQuery, since it’s much more easier, faster and readable than using native JavaScript. This means that we will be using the audio element, but without its controls, but with our own ones. Now, we are going to make the audio look more attractive, for every browser.īut, for customizing our audio player for making it look the same for every browser is, actually, to “build” our own player. ![]() We must care about the consistency of our web pages for every browser, or at least the most relevant ones. In spite of that usefulness, major issues exist when attempting to use the control out of the box on a mobile device. The same goes for the Video Control (which won't be discussed in this article). We shouldn’t use the default rendering for the audio. The HTML5 Audio control presents a standard way to play audio. Fig3: Default rendering of the audio controls by each browser. The following image shows how it’s rendered by each browser. But as usual with these new HTML5 elements, each browser engine renders them in a different way. The second image has shown the rendering of the audio controls interface for Chromium. preload: for specifiying if the file should be loaded on page load or not.Ģ. Building a cross-browser custom player.This may be used in combination with autoplay for, for example, setting a background sound for the page. loop: for replaying the audio file after it ends, indefinitely.Use this attribute with caution, if you don’t want to disturb the user. autoplay: for playing the audio on page load.These are the other available attributes: So, don’t forget to add the controls if you want to provide a real audio player (unless you want to create your own one with JavaScript!).Ĭontrols is not the only attribute for the audio tag. The next image shows it for Chromium: Fig2: Audio element, rendering the controls. This attribute will make the browser render natively a control interface. When using the audio element, we should always add the controls attribute, in order to display the controls of the audio player: But not enough to be able to control it, because no controls are being displayed: Fig1: Audio element, without rendering the controls. This is enough to have ready the audio to be played. ![]() Actually, it’s just about adding the tag, and specifying the path to the audio file: Using the HTML5 audio tag is really simple. Download the source code 1. The audio element Adding controls for switching between audios 4. Allowing reproducing multiple audio files 3.1. Table Of Contents 1. The audio element 2. Building a cross-browser custom player 2.1.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |