If our goal is to match the functionality of these examples, then we need to make sure our player has: So, put on your headphones, crank up some music, and let’s get to work! The elements of an audio playerįirst, let’s examine the default HTML audio players that some of the popular browsers provide. We’re going to take stab at making our own player in this post. The audio player fits in seamlessly with other elements on the page, sporting controls that complement the overall design. Check out the sweet custom player Chris and Dave set up over at the ShopTalk Show website. We even get to specify multiple files for better browser support, as well as a little CSS flexibility to style things up, like giving the audio player a border, some rounded corners, and maybe a little padding and margin.īut even with all that… the rendered audio player itself can look a little, you know, plain.ĭid you know it’s possible to create a custom audio player? Of course we can! While the default player is great in many cases, having a custom player might suit you better, like if you run a podcast and an audio player is the key element on a website for the podcast. Point it to a sound file and that’s all there is to it. It simply sets the audio element’s volume property to that of the range element, which was declared to go from 0 to one with 0.HTML has a built-in native audio player interface that we get simply using the element. Much in the same way that the play button’s onclick event triggers our playAudio() function, the range element’s onchange event causes the setVolume() function to execute. Var music = document.getElementById('audio_player') There is also some CSS class toggling done in order to change the button: // variable to store HTML5 audio element If it is, we call the audio element’s play() method otherwise, we call pause(). In it, we can check whether or not the player is currently paused. You’ll notice in the HTML markup above that the play button’s onclick event triggers our playAudio() function.
#HTML5 AUDIO PLAYER GENERATOR CODE#
The above code produces the following player: Here’s the CSS that styles our player: #audioplayer We can then present the following player: The easiest way to do that is to remove the controls attribute. Behind the scenes, the element is still what’s playing the audio, but it should be made invisible. The HTMLMediaElement interface is meant to be utilized in conjunction with your own HTML player in such a way that mimics the element so that you can give it the exact appearance that you want. Hence, the HTMLVideoElement and HTMLAudioElement elements both inherit this interface. The HTMLMediaElement JavaScript interface exposes the properties and methods required to support basic media-related capabilities that are common to both audio and video. Notice how the appearance of the audio control can vary wildly! The first is the Chrome version, while the second is what you get in Internet Explorer:Ĭontrolling Playback via the HTMLAudioElement Interface This is optional as the element may be placed within the block to specify the file. should be loaded), “none” (which dictates that the browser should not load the file when the page loads). preload – This can be set to “auto” (which describes whether the file should load as soon as the page loads), “metadata” (which describes whether only the metadata, track title etc.loop – This can be set to “loop” and defines whether the track should play again once it has finished.controls – As seen in the example above, this defines whether the native controls such as ‘play, pause’ etc should be shown.autoplay – This can be set to “true” or left blank (“”) to define whether the track should automatically play as soon as the page has loaded.The tag also supports a few special attributes that control the playback of the audio: The “Your browser does not support the audio element.” only displays in browsers that do not support the element. The OGG format caters to Firefox as it doesn’t support MP3 without using a plugin, due to licensing issues. One defines an MP3 file and the other points to an OGG file. Your browser does not support the audio element. Let’s begin by taking a look at a typical element declaration: In today’s article, we’ll build a player control that can play and pause an audio track, as well as set the track volume. Together, they provide the framework for building our own audio player.
Moreover, playback may be controlled using JavaScript. Now, the HTML5 element specifies a standard way to embed audio in a web page. Therefore, the only way to play audio files was to use a plug-in such as flash.
Before HTML5 arrived on the scene, there was no standard for playing audio files on a web page.
0 kommentar(er)
