HTML audio (Audio)

Sound can be played in different ways in HTML.

Problems and solutions

Playing audio in HTML is not easy!

You need a lot of skill to make sure your audio files are playable in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

In this chapter, we  summarizes the problems and solutions for you.

Using plugins

The browser plugin is a small computer program that extends the standard features of the browser.

Plugins can be added to the page using the <object> tag or the <embed> tag. 

These tags define containers for resources (usually non-HTML resources) that, depending on the type, are displayed by the browser and are also displayed by external plugins.

Use the <embed> element

The <embed> tag defines a container for external (non-HTML) content. (This is an HTML5 tag that is illegal in HTML4, but works in all browsers).

The following code snippet shows an MP3 file embedded in a web page:
You find a mp3 format audio locally, replace src="horse.mp3" with your mp3 file, and then open the web page and try it out.

Problem:

The <embed> tag is not valid in HTML 4. The page cannot be verified by HTML 4.

Different browsers have different support for audio formats.

If the browser does not support the file format, the audio will not play without a plugin.

Audio cannot be played if the user's computer does not have a plugin installed.

If you convert the file to another format, it will still not play in all browsers.

Use the <object> element

The <object tag> tag can also define a container for external (non-HTML) content.

The following code snippet shows an MP3 file embedded in a web page:

You find a mp3 format audio locally, replace src="horse.mp3" with your mp3 file, and then open the web page and try it out.

Problem:

Different browsers have different support for audio formats.

If the browser does not support the file format, the audio will not play without a plugin.

Audio cannot be played if the user's computer does not have a plugin installed.

If you convert the file to another format, it will still not play in all browsers.

Use the HTML5 <audio> element

The HTML5 <audio> element is an HTML5 element that is illegal in HTML 4 but works in all browsers.

The <audio> element works in all modern browsers.

Below we will use the <audio> tag to describe MP3 files (effective in Internet Explorer, Chrome, and Safari), and also add an OGG type file (valid in Firefox and Opera browsers). If it fails, it will display an error. Text information:

If your browser does not support the audio format, it will output "Your browser does not support the audio format", otherwise

Problem:

The <audio> tag is not valid in HTML 4. Your page cannot be verified with HTML 4.

You must convert the audio file to a different format.

The <audio> element does not work in older browsers.

The best HTML solution

The following example uses two different audio formats. The HTML5 <audio> element will try to play the audio in mp3 or ogg. If it fails, the code will roll back the <embed> element.

Try replacing src with your local audio.

problem:

You must convert the audio to a different format.

The <embed> element cannot be rolled back to display an error message.

Yahoo Media Player - a simple way to add audio to your website

Yahoo Media Player offers your users a small play button instead of a full player. However, when you click the button, the full player will pop up.

Please note that this player is always docked at the bottom of the window frame. Just click on it and you can slide it out.

Using the Yahoo Player is free. To use it, you need to insert this JavaScript into the bottom of the page:

The Yahoo player can play MP3 and a variety of other formats. You can easily make your HTML page into a professional playlist by simply adding a line of code to your page or blog:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Instance 
Try to find a piece of audio file

Use hyperlinks

If a web page contains a hyperlink to a media file, most browsers use a "helper application" to play the file.

The following code snippet shows a link to an mp3 file. If the user clicks on the link, the browser launches the "helper application" to play the file:

Try to find a piece of audio file

Inline sound description

When you include a sound in a web page, or as part of a web page, it is called an inline sound.

If you plan to use inline sound in your web application, you need to realize that many people feel that the inline sound is irritating. Also note that the user may have turned off the inline sound option in the browser.

Our best advice is to include them only where users want to hear inline sounds. A positive example is when a user needs to hear a recording and click on a link, the page opens and the recording is played.

HTML multimedia tag

HTML5 new tag
 
     Label     Description
    <embed>Define inline objects. Deprecated in HTML4, allowed in HTML5.
    <object>Define inline objects.
    <param>Define the parameters of the object.
    <audio>Defined sound content
    <video>Define a video or video
    <source>Multimedia resources (<video> and <audio>) that define the media element

   

    <track>

Specify subtitle files for media elements or other files containing text (<video> and <audio>)


Specify subtitle files for media elements or other files containing text (<video> and <audio>)

Last Updated: 2018-08-22 13:33:46 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :