HTML | DOM Source src Property

Last Updated : 21 Mar, 2022

The Source src Property in HTML DOM is used to set or return the value of the src attribute in a <source> element. The type attribute is used to specify the URl of the media resource.

Syntax:

It return the Source src property.
```
 sourceObject.src
```
It is used to set the Source src property.
```
sourceObject.src = URL 
```

Property Values: It contains single value URL which specify the URL of the media resource. It can be either an absolute or a relative URL.

Two Possible Values:-

Absolute URL: It points to another webpage.
Relative URL: It points to other files of the same web page.

Return Value: It returns a string value which represents the URL of the media resource.

Example 1: This example returns the Source src Property.

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

Output:
Before Clicking on Button:

After Clicking on Button:

Example 2: This example sets the Source src property.

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
  
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM Source src property</h2>
  
    <audio controls>
        <source id="mySource" src="gameover1.wav" type="audio/mpeg">
  
        <source src="gameover.ogg" type="audio/ogg"> 
    </audio>
  
    <p>Click the button to set the source 
         src of the audio file.</p>
  
    <button onclick="myFunction()">
        Set Src
    </button>
  
    <p id="demo"></p>
  
    <script>
        function myFunction() {
  
            var x = document.getElementById("mySource").type = "gameover.wav";
            document.getElementById("demo").innerHTML = 
             "The source src has been changed to " +x;
        }
    </script>
  
</body>
  
</html>                    

Output:
Before Clicking on Button:

After Clicking on Button:

Supported Browsers:

Google Chrome
Firefox
Internet Explorer
Opera
Safari

My Personal Notes

Related Articles

Table of Contents

HTML | DOM Source src Property

Start Your Coding Journey Now!