![]() (D2-4) Automatically update the HTML seek bar as the track plays.Take note of how we use the seeking flag here – We do not want the manual seek to clash with the auto-update as the track is playing. (D2-3) Update the track when the seek bar is being dragged.(D2-2) Also set the track time on the seek bar.Not going to explain line-by-line, but basically: (D2) On metadata loaded (information on the track), a whole load of things needs to be done.(D1) Set a “now loading” message in the track time while the track is loading.I.aNow.innerHTML = timeString(i.audio.currentTime) This is neither complex at all.Ĭontrols.js $(document).Aud-player.js window.addEventListener("load", () => 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.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. Pretty much the only thing you can adjust with the default audio player and browser-generated controls is the width. If you want to make your own style you need to also make your own controls. Table Of Contents 1. The audio element 2. Building a cross-browser custom player 2.1. The guidance seems clear: you can't style the the audio player with default controls because it is browser-native.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |