Audio Tag -
The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
We will also talk about <source> element also.
This is simple example of <audio> tag using some attribute :-
The content inside the opening and closing tags is shown as a fallback in browsers that don't support the element.
Attributes
This element's attributes include the global attributes.
1. autoplay
A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.
2. controls
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
3. loop
A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.
4. muted
A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.
so, here we see four types of attribute and mostly these are used in most of the cases. There are others also like preload and disableremoteplayback.
There are some events also which we can use but those are used when we make any music player project. Events are :-
audioprocess:- The input buffer of a ScriptProcessorNode is ready to be processed.canplay:- The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.canplaythrough:- The browser estimates it can play the media up to its end without stopping for content buffering.complete:- The rendering of an OfflineAudioContext is terminated.durationchange:- The duration attribute has been updated.emptied:- The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the HTMLMediaElement.load method is called to reload it.ended:- Playback has stopped because the end of the media was reached.loadeddata:- The first frame of the media has finished loading.loadedmetadata:- The metadata has been loaded.pause:- Playback has been paused.play:- Playback has begun.playing:- Playback is ready to start after having been paused or delayed due to lack of data.ratechange:- The playback rate has changed.seeked:- A seek operation completed.seeking:- A seek operation began.stalled:- The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.suspend:- Media data loading has been suspended.timeupdate:- The time indicated by the currentTime attribute has been updated.volumechange:- The volume has changed.waiting:- Playback has stopped because of a temporary lack of data.
OK, so in starting i told that we will talk about <source> so let's go :-
<source>- The HTML element specifies multiple media resources for the , the element, or the element. It is a void element, meaning that it has no content and does not have a closing tag.
Video Tag -
The tag is used to embed video content in a document, such as a movie clip or other video streams.
The tag contains one or more tags with different video sources. The browser will choose the first source it supports.
The text between the and tags will only be displayed in browsers that do not support the element.
It has also same attribute as <audio> tag such as :-
autoplaycontrolsloopmutedheight- By this attribute we can set the height of the video.width- By this attribute we can set the width of the video.