Open In App

HTML | DOM Source Object

Improve
Improve
Like Article
Like
Save
Share
Report

The Source object in HTML represents an HTML element. An element can be accessed by using getElementById() and an element can be created by using the document.createElement() method.

Properties of Source Object:

  • media: This returns the value of the media attribute in a element.
  • src: This returns the value of the src attribute in a element.
  • type: This returns the value of the type attribute in a element.

Example-1: Accessing a Source Object




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
  
  </head>
  
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>HTML DOM Source Object</h2>
            <h3>An example of accessing a source element</h3>
  
            <audio controls>
                <source id="mySource" 
                        src="gameover.wav"
                        type="audio/mpeg">
                
                <source src="gameover.ogg" 
                        type="audio/ogg"
              Your browser does not support the audio element.
            </audio>
  
            <p>Click the button to get the 
              location of the audio file.</p>
  
            <button onclick="myFunction()">
              Get Source
           </button>
  
            <p id="demo"></p>
  
            <script>
                function myFunction() {
                    
                    var x = document.getElementById(
                      "mySource").src;
                    document.getElementById(
                      "demo").innerHTML = x;
                }
            </script>
  
        </body>
  
</html>


Output:

Example-2: Creating a Source Object.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
  
    <head>
  
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>HTML DOM Source Object</h2>
            
            <h3>An example of creating a source element
          </h3>
            
            <p>Click the button to create the source element.
          </p>
  
            <audio controls id="myAudio" autoplay>
              Your browser does not support 
              the audio element.
            </audio>
            <br>
  
            <p id="demo"></p>
  
            <button onclick="myFunction()">
              Create
          </button>
  
            <script>
                function myFunction() {
                    
                    var x = document.createElement("SOURCE");
                    x.setAttribute("src", "gameover.wav");
                    x.setAttribute("type", "audio/mpeg");
                    document.getElementById(
                      "myAudio").appendChild(x);
  
                    var y = document.createElement("SOURCE");
                    y.setAttribute("src", "gameover.ogg");
                    y.setAttribute("type", "audio/ogg");
                    document.getElementById("myAudio").appendChild(y);
                    document.getElementById("demo").innerHTML = 
                      "The audio player now works.";
                }
            </script>
  
        </body>
  
</html>


Output:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


Last Updated : 14 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads