![]() ![]() 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. We shouldn’t use the default rendering for the 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.We will use the preload property to load the audio before the DOM. This may be used in combination with autoplay for, for example, setting a background sound for the page. To add the audio to the web page, we need to use the HTML
0 Comments
Leave a Reply. |