Sign in Registration
ArticlesDownloadServicesAudioContacts
ruen

How to make a player on a website using HTML5, the audio tag

Playing audio files on web pages is not unusual today. Previously, for this you had to use special third-party tools, connect a flash player, for example. But with the advent of HTML5 , it became possible to easily add a player to the page using one tag - audio .

html5-audio

There is a bgsound tag to add background sound to the page, but it only allows you to simply play the music when you visit the page. Usually, you need to create a full-fledged multimedia player on the page, so a new tag was added to the HTML5 specification - audio . In different browsers, the appearance of the external player may differ, for example, in the picture above, the light player is the view in Chrome, the dark player is the view in Firefox. But the look of the player can be easily changed using CSS styles. Using the audio tag is extremely simple:

  & lt; audio src = "track.mp3" controls> & lt; / audio>  

The src attribute allows you to set the path to the music file, the controls attribute tells the browser to display the player control interface - usually these are play, pause, volume buttons. Since the tag is relatively new, it is worth taking care of browser support, although most modern browsers of course support this tag, but with their own peculiarities.

What attributes does the audio tag have? Let's list below:

What formats can be used for the audio tag? The best three are: AAC, MP3, OGG. But not all browsers can play MP3 format due to the license agreement. Therefore, you can write code like this:

  & lt; audio controls>
& lt; source src = "track.mp3" type = "audio / mpeg">
& lt; source src = "track.ogg" type = "audio / ogg">
& lt; a href = "/ sounds / track.mp3"> Load track.mp3 
& lt; / audio>  

As you can see, we are simply listing the sound sources using the source tag - the browser will choose the appropriate one. If the audio tag is suddenly not supported, a link to download the file will be shown. In this case, the user will be able to download and listen to it on their device.

The source tag is used to specify alternative file sources. What attributes does the source tag have? Let's list below:

You can also add the track tag inside the audio tag, it serves to set text information about the file, for example, subtitles, title, etc. What attributes does the track tag have? Let's list below:

Thus, we have seen, how to make a player on the site using HTML5 , using the new audio tag . The tag allows you to quickly create a functional player on any page of the site.

Comments (0)
For commenting sign in or register.

Latest articles

Popular sections

Communication

Login to the web version
Android app:
Available on Google Play

Share this

Subscribe to