Horje
HTML Audio

The HTML Audio offers the <audio> element, that allows websites to provide background music, sound effects, or play any audio content required for the website and enhance the overall user experience. The element <source> is wrapped inside the <audio> element that defines the source of the audio files as a value of an attribute src.

Syntax

<audio>
      <source src="sample.mp3" type="audio/mpeg">
</audio>

Note: Additionally, there are three formats supported including MP3, WAV, and OGG, in HTML5. The <audio> supports the global attributes and event attributes.

Table of Content

Functionality of HTML Audio

  • The controls attribute specifies which controls including volume, play, and pause on the audio player.
  • Autoplay designates that the audio file will play as soon as controls are loaded.
  • The attribute loop specifies that the audio file is set to continuously repeat.
  • The attribute src defines the URL of the audio file.
  • The attribute muted specifies the audio file should be muted.

HTML Audio Media Types

  • The mp3 file format with media type audio/mpeg.
  • The ogg file format with media type audio/ogg.
  • The wav file format with media type audio/wav.

HTML <audio> Autoplay

The autoplay attribute is used to start an audio file automatically.

Example: The example illustrates the HTML audio with the attribute autoplay.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>HTML Audio</title>
</head>

<body>
    <div>
        <p>Audio Controls Autoplay</p>

        <!-- audio tag starts here -->
        <audio controls autoplay>
            <source src="testAudio.mp3" 
                    type="audio/mpeg">
        </audio>

        <!-- audio tag ends here -->
    </div>

    <div>
        <p>Audio Controls Autoplay Muted</p>

        <!-- audio tag starts here -->
        <audio controls autoplay muted>
            <source src="testAudio.mp3" 
                    type="audio/mpeg">
        </audio>

        <!-- audio tag ends here -->
    </div>

    <div>
        <p>Audio Controls Autoplay Loop</p>

        <!-- audio tag starts here -->
        <audio controls autoplay loop>
            <source src="testAudio.mp3"
                    type="audio/mpeg">
        </audio>

        <!-- audio tag ends here -->
    </div>
</body>

</html>

Output:

Browser Support

  • Google Chrome 3
  • Firefox: 3.5
  • Opera: 10.5
  • Safari: 3.1
  • The ogg audio file is not supported by safari. 



Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Online Compiler HTML Online Compiler
HTML Tutorial HTML Tutorial
SVG Polygon SVG Polygon
HTML Canvas Gradients HTML Canvas Gradients
SVG Polyline SVG Polyline

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje