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

22.07.18 IT / Html 5265

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 .

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:

• autoplay - auto play sound after page load;
• controls - tells the browser to show the player control buttons;
• loop - makes loop playback;
• muted - mutes the playback sound;
• preload - preload the audio file, possible values: auto , metadata , none ;
• src - path to the file being played.

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:

• media - serves to determine the type of media device;
• src - serves to specify the path to the file;
• type - defines the MIME type of the specified file.

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:

• default - indicates that the track is played by default;
• kind - indicates the type of text track, accepted values: captions - translation of dialogues, chapters - allows you to specify the chapter that is used to navigate file, descriptions - adds a sound description when watching a video, relevant for the video tag, metadata - data for scripts, subtitles - adds subtitles;
• label - track name;
• src - file path;
• srclang - the language of the track being played.

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.