Mastering the HTML5 audio tag. HTML5 audio and video tags in various browsers in practice Play CSS styles for audio player design

Previously, browsers did not have built-in capabilities to support audio and video content, but with the development of the Internet, support for multimedia elements as a feature of modern browsers has become a necessity. HTML5 introduced new elements and , which are supported in all modern browsers. The main purpose of the tag is to add audio content to the page.

The audio file format determines the structure and presentation features of audio data when stored on a storage medium (storage device). To eliminate redundancy of audio data, as a rule, special audio codecs are used, thanks to which audio data is compressed. Modern browsers Support the following 3 audio formats:

MP3 Wav Ogg BrowserOpera I.E. Edge

YES	YES	YES
YES	YES	YES
YES	YES	YES
YES	YES	NO
YES	NO	NO
YES	YES	NO

• The MP3 format is a codec and a container at the same time. It is widely used everywhere to host downloaded music.
• The WAV format is also a codec and a container at the same time.
• Ogg container + Vorbis audio codec. He is commonly called "Ogg Vorbis". It was developed by the Xiph community to replace proprietary MP3, AAC and WMA.

MIME types for audio:

Format MIME typesMP3 Ogg Wav

audio/mpeg

audio/ogg

audio/wav

Browser support Tag
Opera
IExplorer
Edge

	4.0	3.5	10.5	4.0	9.0	12.0

Attributes Attribute Value Description

autoplay	autoplay	Specifies that the audio will start automatically as soon as it is ready.
controls	controls	Displays built-in media file controls (play/pause button, slider that allows you to jump to a specific fragment of the video, and volume control).
loop	loop	Loops the file playback (our song is good - start over)..
muted	muted	Indicates that audio will be muted (no sound).
preload	auto metadata none	Specifies how audio should be loaded when the page is loaded. The attribute is ignored if the autoplay attribute is present.
src	URL	Specifies the URL of the audio file.

Usage example

The element uses the same attributes as the element, except for the width, height, and poster attributes. Similar to using the element, you can provide multiple audio format options using the element, as shown in the example below:

Audio in HTML5 Audio in HTML5 Your browser does not support this audio format. You can download this file from the link below:

Download

In this example we:

We added audio content (tag) to the page, and added the controls attribute to display built-in controls for the multimedia file (play/pause button, a slider that allows you to go to a specific fragment of the video, as well as a volume control).

Description

Adds, plays, and manages audio settings on a web page. The path to the file is specified via the src attribute or a subtag. You can write text inside the container that will be displayed in browsers that do not work with this tag.

The list of codecs supported by browsers is limited and is given in table. 1.

Table 1. Codecs and browsers

Codec	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

For universal playback in specified browsers, audio is encoded using different codecs and files are added simultaneously through the tag.

Syntax Attributes The sound starts playing immediately after the page loads. Adds a control panel to an audio file. Repeats the sound from the beginning after it ends. Used to download a file along with loading a web page. Specifies the path to the file being played. Closing tag

Required.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Alexander Klimenkov - Fourteen

The audio tag is not supported by your browser. Download music.

Example result in Opera browser shown in Fig. 1.

Rice. 1. Play an audio file

Browsers

Audio playback controls vary in appearance between browsers, but the basic elements are the same. These are the play/pause button, track length, elapsed and total playing time, and volume level.

HTML5 audio provides improved capabilities for working with audio content. Until recently, the only way to add sound files web pages integrated background sound using a tag that played while the user viewed the page without the ability to turn it off.

Thanks to the addition of a new element to the HTML5 specification, it is now possible to add audio content with embedded software interface without using plug-ins.

How to Add HTML5 Audio to a Web Page 1. Element Browser support

IE: 9.0
Firefox: 3.5 basic support, 15.0 full support
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: -
Android Browser: 4.1
Chrome for Android: 44

The HTML5 element is used to embed audio content in web pages. In general, HTML markup looks like this:

The controls attribute adds browsers to display the audio player control interface - play, pause, volume buttons.

Rice. 1. Appearance audio player in different browsers

IN currently There is no audio format that works in all browsers, so to ensure content is accessible to the widest possible audience, it is recommended that you include multiple audio sources represented using the element's src attribute. At the same time, you can add fallback content for browsers that do not support the element.

Download name.mp3

Table 1. Tag attributes Attribute

autoplay	Automatic playback of an audio file immediately after the page loads.
controls	Tells the browser to display basic playback controls (start and stop playback, skip to another location in a recording, adjust volume).
loop	Loop playback of an audio file.
muted	Turns off the sound when playing an audio file.
preload	An attribute responsible for preloading audio content. Optional, some browsers ignore it. Possible values: auto - The browser downloads the entire audio file so that it is available when the user starts playing it. metadata - The browser downloads the first small part of the audio file to determine its basic characteristics. none - absence automatic download audio file.
src	Contains the absolute or relative URL of the audio file.

2. Audio codecs

An audio codec (decoder) is a program for converting digital data into an audio file or audio stream format. Popular audio formats are:

MP3 is the most popular audio format that uses lossy compression and allows you to reduce the file size several times. Due to licensing fees, Firefox and Opera are not supported.

A.A.C. (Advanced Audio Codec)- a closed codec, analogous to MP3, but compared to the latter, it supports higher sound quality with a similar file size.

Ogg Vorbis - free format With open source, supported in Firefox, Opera and Chrome. Provides good quality sound, but is not widely supported by hardware players.

3. Alternative media resources

The element is used to add multiple media resources for and . Indicates alternative video/audio files that the browser can choose from based on its supported media type or codec.

4. Add subtitles and titles

The element is used as a child element and . Adds a text track for subtitles, media titles, or other text information, which should be visible while playing an audio or video file.

Table 3. Tag attributes Attribute Description, accepted value

default	Indicates that this track is played by default. Only one element can contain a given attribute.
kind	Specifies the type of text track; subtitles are displayed by default. Accepted values: captions - translation of dialogues and sound effects, displayed as text over the video (for deaf users). chapters - adds chapter titles as a list for navigation through the media file. descriptions - adds audio description what is happening in the video (for blind users). metadata - metadata used by scripts is not displayed to users. subtitles - text duplication audio track video, displayed as subtitles for the video.
label	Adds a track title. If this attribute is not set, the browser will apply the default value.
src	Contains an absolute or relative URL to the text track data.
srclang	Language of the track being played.

5. Stylized example of an audio player

Using CSS styles you can give your audio player an unusual look. Playback is controlled using a small script (using the jQuery library), the sound appears when you hover over the record.

This question comes up very often, so I decided to devote a separate article to it in the lessons. Since HTML does not have a universal technology for playing audio for all browsers, to solve this problem I suggest downloading the audio player file, as is done on most sites. We do everything step by step:

1. On hosting, where your site is located, in root directory(the folder where the index file is), copy the audio folder. In the future you will place all audio files into it.

3. Now select necessary files, better in mp3 format. Create an audio folder in the root of the site and upload them.

4. All that remains is to insert the player connection code. It is suitable for any site. In the right place, you just need to indicate the path to the player file and audio file, respectively replacing the words your_domain and audio_file name:

And everything is ready! You can also look at the working example.

How to set background music in html I use HTML capabilities and browser, you can also insert background music onto the page. You will need an audio file required format: WAV, AU, MIDI or MP3. You can use any file with the specified extension as an example.

The first way is the embed tag. The embed element is used to load and display objects (for example, video files, flash movies, some audio files, etc.) that the browser does not initially understand.

The syntax is quite simple:

A closing tag is not required.

Now let’s look at an example of a record with attributes, and below with their decoding:

Embed tag attributes for playing audio in html
width - panel width in pixels (or percentage)
height - panel height in pixels (or percentage)
align - position of the panel relative to the text, possible values ​​are left, right, center
hidden - allows you to hide the panel, attribute values: true - the panel is hidden, false - the panel is visible (default value)
autostart - true - the player starts automatically when the page loads, false - waits for the play button to be pressed
loop - cycle, true - the track is played in a circle, and when value false- just one time

Second way. Very old, but also practical) Add the melody to the same folder (directory) where your file is located, and in the body write the following code:

As a result, after loading the page, the melody you specified in the bgsound tag will sound. Now let's take a better look at the tag attributes:

src - path to your audio file
loop - how many times to repeat the melody (if -1, then repeats endlessly)
balance - stereo balance value (from -10000 to 10000)
volume - melody playback volume, where 0 is the maximum, and -10000 is the minimum.

However, there will be no way to control the player in any way - every time the page is refreshed, the track will be played again.

After describing the method of inserting background music, I want to dissuade you from this, since most users, as a rule, already listen to music when they visit various sites. Therefore, accompanying music can only force him to close the tab with the site.

Inserting audio and music in HTML5 - audio tag
audio - a paired tag that defines background sound, music or other audio stream on the site.

Audio tag attributes

autoplay - the file is played immediately when the page is loaded (similar to bgsound background music)
controls - display the player control panel in the browser
loop - plays the file again after it ends
preload - the audio file will be loaded along with the page loading
src - path to the audio file (mp3 or ogg)

Example code with audio tag

Audio tag

Audio in HTML 5

The audio tag is not supported by your browser.
Download music.

Description

Adds, plays, and manages audio settings on a web page. The path to the file is specified via the src attribute or a subtag. You can write text inside the container that will be displayed in browsers that do not work with this tag.

The list of codecs supported by browsers is limited and is given in table. 1.

Table 1. Codecs and browsers

Codec	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

For universal playback in specified browsers, audio is encoded using different codecs and files are added simultaneously through the tag.

Syntax Attributes The sound starts playing immediately after the page loads. Adds a control panel to an audio file. Repeats the sound from the beginning after it ends. Used to download a file along with loading a web page. Specifies the path to the file being played. Closing tag

Required.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Alexander Klimenkov - Fourteen

The audio tag is not supported by your browser. Download music.

The result of the example in the Opera browser is shown in Fig. 1.

Rice. 1. Play an audio file

Browsers

Audio playback controls vary in appearance between browsers, but the basic elements are the same. These are the play/pause button, track length, elapsed and total playing time, and volume level.