andew

2015-08-10T19:23:37+00:00

2016-02-28T17:11:05+00:00

11937

The article describes the structure of the audio and video HTML5 container, the video, audio, source, track tags and their attributes with possible values. HTML templates and examples of implementation of playback of multimedia files based on the capabilities built into the browser are provided. The connection to the video text track of subtitles, titles, table of contents using WEBVTT format files with examples is shown. HTML5 code templates with schema.org micro-markup for audio and video are presented. The main web formats of audio and video files with their MIME types and tools for converting video and audio into these formats are indicated.

HTML5 contains new features that allow you to play audio and video files directly in the browser without using third party programs. So far, despite the fact that HTML5 is no longer new, there are still disagreements in how browsers process video and audio tags and how the player itself is displayed. Some people do it better every time new version, others are still lagging behind. Globally, the trend is that browsers will provide more and more functionality for playing multimedia files.

Screencast: Example of using templates

Download video

Screencast: examples of using templates from the article - website

HTML5 video and audio is an evolving standard and is not associated with any audio or video format, so there are differences between browsers in what they support. formats audio and video files. This difference is now compensated by the fact that they encode original file several different codecs and connect all these file versions to tags or through nested tags< source src=" URL">. However, leaders are emerging among the audio and video file formats supported by browsers. For video this is, of course, the mp4 format (H.264), and for audio this is the mp3 and m4a format. Now, probably, all browsers are capable of playing files of these formats. Also, Firefox browsers, Chrome and Opera have agreed to support the WEBM standard as a common video format. From my point of view, the optimal option for using HTML5 video and audio now would be a scheme based on the use of one multimedia file in mp4 format ( H.264) for video and m4a for audio and JS HTML5 player. Only one file in the specified format is connected to the audio or video container. Nowadays most browsers are capable of playing mp4 format. The connected JS library will style the player built into the browser. If the browser does not support the mp4 / m4a format, then the JS player, in this case, implements Flash connection player for playing a multimedia file. Considering that the mp4 format has become very popular, one can hope for a low probability of problems with its playback in browsers. This scheme requires only one multimedia file in the specified format, which saves disk space and resources for processing files. Also, such a scheme will be strategically more correct, since the trend is that browsers are increasingly better at implementing HTML5 video and audio.

To indicate to the HTML5 player the file to be played, in addition to the file URL, you must also pass the MIME type of the file so that the browser understands which codec it needs to use. The table below lists the most common file formats and their MIME types.

File formats and their MIME types Media Files Mime Type Extensions

Audio mp3	mp3	audio/mpeg
Audio mp4	m4a	audio/mp4
Audio webm	webm	audio/webm
Audio ogg	ogg	audio/ogg
Video mp4 (H.264)	mp4	video/mp4
Video webm	webm	video/webm
Video ogg	ogv	video/ogg

Audio and video encoding tools

To encode video and audio files into the above web formats, you can use open program, which supports converting audio and video files to the main formats common for the web ( MP4, WebM, Ogg Theora, MP3, etc.). Miro Video Converter is available for different operating systems- Windows, Mac and Linux and is a graphical shell for console utilities and that are convenient to use on web server to process downloaded video and audio automatically.

: HTML5 audio example code with schema.org micro markup: Audio header

HTML5 audio is not supported by your browser.

Download audio

This is what the micro markup data extracted from the code will look like for the audio template described above.

Audioobject itemType = http://schema.org/AudioObject name = Audio title description = Audio description... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = Full URL to image.jpg alternatename = Alternative title audio contenturl href = URL to file.mp3 text = Download audio author person itemType = http://schema.org/Person url href = URL text = Author's name name = Author's name image = Full url to person.jpg

The minimum audio markup according to schema.org should include itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . The remaining properties are optional.

Example of standard HTML5 tag usage:

In the demo, I applied CSS styles to the tag via the class attribute, making the width of the video area dynamic depending on the screen size. The player adjusts itself in height. Try resizing your browser window to see how it works. Therefore, in the code source for this demo there are no width and height attributes for the tag, they are replaced by CSS styles. But this method is not shown in the template code listing, because is already a particular thing.

HTML5 video example code with schema.org micro-markup: Video title

Watch on YouTube

HTML5 video is not supported by your browser.

Download video: Video title

This is what the micro markup data extracted from the code will look like for the video template described above.

Videoobject itemType = http://schema.org/VideoObject name = Video title thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL to video-thumbnail.jpg|png width = 100 height = 100 duration = PT14M59S isfamilyfriendly = true uploaddate = 2015-12-31 description = Short description for video... url href = URL to file.mp4 text = Video title author person itemType = http://schema.org/Person url href = URL to author web page text = author name name = author name image = Full URL to author.jpg thumbnailurl = URL to file.jpg|png

Minimum necessary For search engines, the schema.org video markup must include all the itemprop properties shown in the example code, with the exception of the itemprop ="author" block, which is optional for search engines and can be deleted if there is no data to fill it. For video-thumbnail, Yandex requires you to specify micro markup according to schema.org as itemprop ="thumbnail" in the form of an ImageObject , and Google requires specifying itemprop ="thumbnailUrl" , so you have to insert the video-thumbnail file twice, and therefore the second img tag received the display: none style so as not to be displayed in the browser. Instead of using an img tag with display:none, you can pass this property to the link tag via the href attribute. Also, despite the fact that micro markup can be transmitted through meta and link tags that are not shown to the user, it is still recommended, if possible, to add micro markup primarily to tags that will be displayed to the user. Validation of schema.org micro markup can be done using these links: , . The main advantage of using micro markup is the convenience of such content for search robots and social network robots. These robots extract labeled data and aggregate it. Therefore, the use of micro markup improves SEO site and facilitates the automatic distribution of data to in social networks. A detailed description of Schema.org micro-markup for videos marked with the VideoObjec t scheme on the website. Also, it is worth noting that for cases when you insert a video on your website not directly, but using video hosting widgets Yandex.Video or YouTube, then you can add your HTML code block with a description of the video under the widget code block and embed the Schema.org markup for this video. At the same time, as a URL parameter - a link to a video, do not specify a direct link to a static file, but specify a link received from the video hosting. Although the Schema.org specification says that the link must be to a direct file, search engines also process links to videos from video hosting ( see examples on the Yandex website in the Webmaster section), despite the fact that you cannot download the file from such a link and you cannot view it directly in your HTML5 media player on the page, only in the video hosting widget.

If you are faced with the question of which hosting to download multimedia audio and video files from, then look at the article, which describes the option of inserting media files onto a WEB page from Yandex Disk.

Attributes and tags:

The attributes src , preload , autoplay , mediagroup , loop , muted , controls are common attributes for all media elements, including tags and .

autoplay attribute: either or

• The autoplay attribute is specified by its presence in the or tag and there is no need to set a value for this attribute, just its presence is sufficient. For HTML editors who edit element code, you can set this attribute as autoplay ="autoplay ", which is equivalent to simply having the attribute present. The presence of the autoplay attribute tells the browser to start playing the file immediately after loading the web page. Accordingly, the autoplay attribute overrides the values ​​of the preload attribute, which controls how the video is loaded into the player, because the video must start playing immediately and therefore must be loaded. By default, there is no autoplay attribute.

controls attribute: either or

• The controls attribute tells the browser to show the player control panel when the page has loaded but the recording has not started playing. This attribute, like the autoplay attribute, is specified only by its presence in the or tag, and does not require a value, only its presence is sufficient. By default, this attribute is absent, i.e. The player does not show the control panel before playback starts. When the file starts playing, the control panel will appear when you hover the mouse over the player area.

loop attribute: either or

• The loop attribute causes the player to play the file in a loop. An attribute is specified only by its presence in the or tag and has no parameters. By default there is no loop attribute.

preload attribute:

• the preload attribute specifies the loading of a file along with loading a web page and takes one of the following three values:
  • none - do not download the file along with loading the web page. This means that the file will start loading in the player only after pressing the play button. This can be handy for speeding up page loading. The value none is the default value for the preload attribute, so it is possible to not insert the preload attribute into the tag at all or for this case.
  • metadata - does not download the file along with loading the web page, but downloads the metadata of the multimedia file.
  • auto - perform a full file download along with loading the web page. In this option, browsers will automatically load the media file along with web page y, but this will not interfere with loading the page itself and its rendering in the browser. If the preload ="" attribute with an empty value is specified in the or tag, the auto value for it will be used.
  • The preload attribute will be overridden if the autoplay attribute is used.

src attribute:

• the src attribute of the tag or allows you to immediately set the path to the multimedia file in the tag. The path can be either complete, indicating the protocol and domain, or relative to the root of the current site. You can also specify the path to the file in tags embedded in an audio or video container.< source src=" URL"> .

Poster attribute of the video tag:

• the poster attribute is used only in the tag and specifies the URL of the image (gif, png, jpeg, etc.) that will be shown while the video is not available. If the poster attribute is not set, the browser player will try to show the first frame of the video.

The width and height attributes of the video tag:

• the width and height attributes apply only to the tag and set the width and height of the video player's playback area, respectively. The value is expected to be a positive integer, specified in pixels or percentage. Setting these attributes affects the display size of the video, but does not change the aspect ratio of the video. The video will adjust to the specified dimensions while maintaining its proportions. If the specified dimensions do not match the video proportions, then there will be dark stripes along the top and/or side edges of the video. Therefore, when setting these parameters, it is advisable to select their ratio the same as that of the video being played, or set only the width, and the player will adjust the height itself.
• If either or both of these parameters are not specified, then the unspecified parameter(s) will be taken from the corresponding image size specified in the poster attribute.
• If the poster attribute is missing, then these parameters will be set as follows: for width = 300 px and for height = 150px. In order not to calculate and coordinate the dimensions of the video area according to the proportions of the clip itself, I would recommend setting only one width parameter, then the height (height) of the playback area will be selected automatically based on the video proportions.
• Also, the size and design of the HTML5 player can be influenced through CSS properties applied to tags or .

muted attribute: either or

• The muted attribute sets its presence in tags or the sound to a muted state in the HTML5 player. By default, the attribute is missing.

crossorigin attribute:

• The crossorigin attribute tells the browser to perform a CORS request for this element. By default, the attribute is absent, which means not using CORS requests at all. If the attribute is present, the possible values ​​are anonymous and use-credentials . CORS () is a technology in modern browsers that allows you to manage permissions for loading resources on the current web page from other domains other than the domain of the current page. Browser support for the CORS standard allows you to implement secure cross-domain data exchange by executing a special request (header) to the domain of the current page to determine whether resources from another specified domain are allowed to be loaded on this page. In response to such a request, the server must indicate the domains from which downloading of resources is allowed.

mediagroup attribute: div ( margin: 1em auto; position: relative; width: 400px; height: 300px; ) video ( position; absolute; bottom: 0; right: 0; ) video:first-child ( width: 100%; height : 100%; ) video:last-child ( width: 30%; )

• The mediagroup attribute allows you to combine the control of multiple media files into one MediaController by creating a group of media files in different places on the page. This group will be managed simultaneously for all files included in it. This is convenient, for example, if you need to play and control the same video at the same time in different places on the page with different subtitles, or different videos.

Tags and require a closing tag.

For those cases when the browser does not support HTML5 and tags, which is now very rare, a text message is written before the closing tag of the container and a link to download the file is usually added. If the HTML5 player built into the browser is additionally controlled by a JS library (JS player), then most of them connect a flash player if it is impossible to play HTML5 video and audio in the browser due to the browser not supporting video and audio tags or the multimedia file format.

Tag:

The path to the file being played can also be specified using a tag with the src attribute placed inside the or tags. The tag does not have a closing tag.

In most cases the tag looks like this:

and it always contains the src and type attribute, which in most cases only has a MIME type.

Tag attributes:

• the src= "URL" attribute of the tag specifies the URL to the multimedia file. The path can be either complete, indicating the protocol and domain, or relative to the root of the site.
• the tag's type="MIME-type" attribute, or more fully type="MIME-type; codecs="codec"" specifies the file's MIME type and codec. For audio, it is enough to specify the MIME type, for example, for .mp3 - type="audio/mpeg". Although according to the specification for video, the codec must also be specified in the type attribute, but now they often indicate only the MIME type without a codec, leaving this to the browsers to decide.
• The media attribute ="all|braille|handheld|print|screen|speech|projection|tty|tv" of the tag specifies the type of device for which the file should be played. The default value is all, so in most cases this attribute is not specified at all unless you want to specifically identify the device for playback.

Tag:

For HTML5 video, it is also possible to display an additional track in the player with information such as subtitles, captions, chapters, descriptions (not supported yet) and metadata (not supported yet). This feature is implemented by adding tags with appropriate attributes inside the tag.

- does not have a closing tag.

The tag allows you to connect additional track files to the video in the special WebVTT (Web Video Text Tracks Format) format, which indicate the output text messages with their time reference to the video file. The WebVTT standard not only supports text message output, but also provides options for it CSS styling and options for placement in the video viewing area. Currently, WebVTT files are mainly used to attach text subtitles to videos, which is supported by almost all browsers. Other features of the WebVTT standard are not yet fully implemented by the browsers themselves, therefore, for a more complete use of WebVTT, it is better to use JS players. Also, WebVTT files can be used non-standardly by JS players to transfer additional data to the JS player, such as, for example, URLs of image previews for video frames. On the question of how to show previews of video frames on the player's rewind scale (Scrub Bar Thumbnails) as is done on video hosting sites. Here it must be said that such functionality is not yet available in players built into browsers and therefore is implemented through JS players as an add-on. To do this, connect a JS library (js player), which takes control of the HTML5 video and audio object and performs its styling. Such JS players for displaying previews of video frames non-standardly use WEBVTT files from the tag to transmit the URLs of preview images through it.

A WebVTT file is a regular text file with a .vtt extension in which, in the form of a line-by-line list, time stamps with start and end times and text messages for output to these tags are written. You can connect several WebVTT files with text in different languages ​​to the container. For each language you need to create separate file and connect each one via a tag. Tags must be inserted inside the container after all tags, but before HTML5 video error messages. The tag with the subtitle file in the default language must be placed first among the tags in the current container.

A WEBVTT file may contain one or more timestamps. The file begins with the word WEBVTT. Blank lines separate timestamps with their associated text and attributes. The text may contain HTML elements and CSS markup. An ID for it can be placed before a timestamp in order to refer to it using special expressions. All these details are described in the WEBVTT standard. specifies the track type and can take the following values:

• subtitles - subtitles in the form of text that is displayed over the video. For the file being played, you can set subtitles in different languages ​​to provide their choice in the player, if it supports it. In most cases, this type is used as it is supported by most browsers.
• captions - captions in the form of text and sound that are displayed over the video. Similar to subtitles, but in addition to text, they can include sound effects and other audio information.
• chapters - chapters that are displayed in text as a list menu and are intended for quick navigation through the media file.
• descriptions - description, this text files with a video description for playing them in screenreader.
• metadata - metadata for passing js scripts.

The src attribute of the tag specifies the URL to the track file with additional information. The file attached to the tag has the WebVTT format and the .vtt extension.

The srclang attribute of the tag specifies the language of the track via the language code. For Russian it will be equal to "ru", for English "en".

The tag's label attribute specifies the track name that will be shown in the player. If the attribute is not set, the browser will show its service name.

The default attribute of the tag specifies the selection of this track by default if there are other tracks in the video container. Only one of several tags can have a default attribute. It is better to place the default track first among other connected tracks.

Example of tags: 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 the hosting where your site is located, in the root directory (the folder where the index file is), create 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 install background music in html I use the capabilities of HTML and the browser, you can also insert background music into 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 consider better attributes tag:

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 - paired tag defining 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.

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.

With the advent of fast enough Internet connections, Flash was the only tool for playing sounds on websites. But HTML5 will fundamentally change the way sounds are played on the Internet. In this article I want to tell you in detail about how to use the tag on your sites.

We use it to insert a sound file onto the page. Below is simplest example using the tag, it downloads the mp3 file and plays it. Note the autopaly attribute, which is used to automatically play audio. However, you should not automatically play sounds on the site, as this will annoy users. Playing a sound on a loop Want to loop a sound? The loop attribute will help you do this. But again, you shouldn’t overuse autoplay and loop playback if you don’t want the user to leave the site prematurely. Displaying ControlsRather than having sounds play automatically, which is definitely a bad practice, you should allow some controls to be displayed in the browser, such as volume and play (pause) buttons. This is easy to do by simply adding the controls attribute. Various file formats The tag is supported by most modern browsers, but the problem is that different browsers support different file formats. Safari, for example, can play MP3s, but Firefox cannot, and plays OGG files instead. The solution to this problem is to use both formats so that every visitor can hear the audio, no matter what browser they are using. Specifying the MIME Type of Files When using different file formats, it is a good practice to specify the MIME type for each file to help the browser localize the file it supports. This can be easily done using the type attribute. For older browsers What if the visitor is using IE6 or some other prehistoric browser that doesn't support the tag? It's easy: below is the code that will display a message for browsers that do not support the tag. Your browser does not support the audio tag! File Buffering When playing large files, file buffering can be used. You can use the preload attribute for this. It can take 3 values:

• none - if you do not want to use the file buffer;
• auto - if you want the browser to buffer the entire file;
• metadata - for loading only service information (sound duration, etc.).

Controlling playback via JavaScript Controlling the HTML5 audio player via JavaScript is very easy. The following example shows how to using JavaScript you can build your own basic elements Audio player controls: Play Pause Volume + Volume -

That's all for today.
I hope this article helped you understand basic capabilities HTML5 tag.

Until recently, embedding sound into a web page was not such an easy task. In general, there are some that offer smarter and better implementations, but most methods limit you to having a certain browser and certain plugins.

With the advent of Flash technology on the market, this task has become much easier, since the Flash plugin allows you to embed any animation or sound into a page, and the technology is supported by most browsers. But the demand for Flash is gradually fading away after the launch of innovative devices from Apple: iPhone and iPad. As you know, Apple does not fundamentally equip its devices Flash support, and the number of product users is growing rapidly.

In short, there's a bit of confusion here.

Fortunately, HTML5 has made life much easier for developers, as the technology includes an audio element. This element allows you to embed audio files into any web page, as well as implement a control panel using javascript. More importantly, the technology does not require additional plugins, and is supported in almost all browsers, with the exception of early versions (we'll talk about browser support later!).

In our article today we will tell you how you can embed sounds using the audio element. We will also learn how to control the playback process using javascript, and will also try to tell you about technology support among browsers.

HTML5 Audio Element

This element is extremely easy to use. In our example today, we'll be embedding Bing Crosby's "White Christmas":

There's not much explaining needed here. Much like you insert an image using the img tag, you can insert sound using the audio tag in the same way.

Cross-browser support

The above example is unlikely to work in all browsers. This is where the file format comes into play.

Some browsers can play .mp3 files, but not .ogg files, while others do the opposite. Most browsers can play .wav files, but due to its large size, it is inappropriate to use as audio for a website.

Here is a table of browsers showing support for sound formats:

What formats does your browser support? Determine this by .

As you can see in the table, the most optimal implementation option would be to connect both file formats.
To do this, you can add multiple source elements to the audio element, and in them specify the paths to the various formats. The browser will play the first file it supports. Here's an example:

Of course, this means that you need to create both an Mp3 and an OGG version of your sound file(here comes to your aid), but this is the only way to organize cross-browser support.

Early versions of Internet Explorer (versions 7 and 8) do not support the audio element at all. However, later in the article we will look at how to get around this problem.

Automatic sound playback

Although the above code embeds audio, it does not play it. If we want the sound to play automatically when the page loads, we need to add the autoplay attribute to the element:

Adding control buttons

Although automatic playback can be useful, in many cases it is annoying or completely inappropriate. Therefore, we can install additional control buttons for audio elements so that the user can decide for himself:

This adds a horizontal bar with a pause/play button, a timeline with a slider, and a volume control. Everything is approximately the same as you can see on the player on Youtube.

It is important to remember that the control panel will differ depending on the browsers. For example, the browser on an iPhone will not have a volume slider because the device has separate buttons to control audio levels.

Loop playback

Adding a loop attribute to the audio element will cause the audio to play indefinitely.

This can be useful for turning on background music or sound effects in games.

You can also use the preload attribute, which will tell the browser when and where a specific audio file should be loaded.
Preloading the audio file means that the audio can be played immediately when the user presses play.

There are several meanings for this attribute:

“none” – the browser should not impose the downloaded file. Those. If you are confident that most users will not play the file, use this option. Or use it when you need to save as much server bandwidth as possible.

“metadata" - the parameter is similar to none, except that you notify the browser about the possibility of loading metadata, such as the duration of the audio track, but not the audio file itself.

“auto” – you allow the browser to download the audio file itself.

For example:

Keep in mind that preloading is just a convenience feature, as some browsers may simply ignore this command and start doing whatever they want.

Playback control via javascript

What is convenient in javascript elements– this is because they are easy to manage using javascript. The audio element offers many convenient parameters and control methods:

Play() – start playback from the current position;

Pause() – stop playback at the current position;

canPlayType(type) – determine whether the browser supports playback of this type media;

duration – duration of the track in seconds;

currentTime – current position in seconds. You can also install this parameter to move the playback position.

Using the options and methods suggested above, we can create some basic control buttons:

Play Music
Pause Music
Stop Music
View demo: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Support for earlier versions of Internet Explorer

In most cases, the user's browser will support the HTML5 element. But, unfortunately, IE browsers versions 7 and even 8 do not support this element (although version 9 already has support). It is important to consider a rollback version for users who remained in 2008.

A very crude but effective method is to use special comments to highlight browser data, and give it an object pointer to the sound file. Thus, the browser will often display a built-in controller allowing users to play, pause, or rewind music in an almost HTML5 audio-like manner. Here's an example:

Play Music
Pause Music
Stop Music

document.getElementById("playButton").onclick = function() ( document.getElementById("myTuneObj").play() );
document.getElementById("pauseButton").onclick = function() ( document.getElementById("myTuneObj").pause() );
document.getElementById("stopButton").onclick = function() ( document.getElementById("myTuneObj").stop() );

The above example will work in all browsers that support HTML5 Audio, and will also work in IE versions 7 and 8. Using comments, we redirect the button controls directly to the audio file.

Another way to rollback is to embed a Flash player into the page. Here, which talks about rollback in the form of a Flash player.

Conclusion

In our article today, we learned how to embed audio files using HTML5. Not only is the audio element easy to use, but we can also customize it and control playback via javascript.

Want to learn more about the audio element in HTML5? Then check out.

Although support currently suffers in some browsers (such as older versions of IE), you can easily rollback them if necessary, which is becoming less and less common these days.