The <audio> tag is new to HTML, like the <video> tag, and allows developers to embed music on their websites (and unlike earlier attempts to add audio to a website, it isn't limited to old-fashioned midi music). That said, it does have limitations on the types of files that can be used. Currently any recent browser that is based on Webkit, such as Chrome and Safari, supports the use of regular .mp3 files. Others, such as Firefox, only support the .ogg format.
The good news is that you can either convert your files from .mp3 to .ogg (one audio conversion tool, media.io, can be used online) or just supply two versions of your audio file, one in each format. When Safari, for instance, comes across the <audio> tag, it will ignore the .mp3 file and move directly to the .ogg file.
You use the <audio> tag just like you use any other element:
<audio autoplay="autoplay" controls="controls"> <source src="/cft/music.ogg" /> <source src="/cft/music.mp3" /> </audio>
You can also include the source file's location in the beginning <audio> tag, rather than between the two, like this:
<audio src="/cft/music.ogg" controls="controls">
Also note that you can point the src to a file located on the server with your web page (a relative URL, like /audio/music.ogg), or a file located elsewhere on the web (an absolute URL, such as http://www.yoursite.com/music.ogg).
You will likely want to include some text inside the tag so that users whose browsers do not support the <audio> tag will have a clue as to what is going on (and why they aren't seeing the audio control on the page). You do that like this:
<audio src="/cft/horse.ogg" controls="controls"> Your browser does not support the audio element. </audio>
You can use any HTML elements that are supported within the <audio> tag, such as italics, bold, links, objects such as Flash, etc.
The <audio> tag supports the full range of standard attributes in HTML5. These attributes are supported by all HTML5 tags, with very few exceptions. They include:
New attributes for the <audio> tag include the following:
You can see some of the new attributes in action here:
<audio loop="loop" autoplay="autoplay" controls="controls"> <source src="/cft/music.ogg" /> <source src="/cft/music.mp3" /> </audio>
The <audio> tag has a lot of attributes which can be used for additional controls, including the event attributes in HTML5. Events include window events, which are triggered for the window object, form events, which are triggered by actions that occur within an HTML form, keyboard and mouse events, and media events. Many of the events are the same as those included with previous versions of HTML. There are many new events for HTML5 though, and we will discuss them in an upcoming article on using events with HTML5.
|Glassy Chat Box Code with Reaction Emojis|
|Dark Neo Brutal Resume Template|
|Bootstrap Timeline with Colorful Lines and Icons|
|Simple Dark Vertical Timeline with Bootstrap|
|Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability|
|Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability|
|Flat Photo Frame Template|
|Cute Photo Frame Template|