HTML | DOM Source Object

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example-2: Creating a Source Object.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Supported Browsers:

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


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.