HTML DOM source object

HTMLWeb DevelopmentFront End Technology

The HTML DOM source object is associated with the HTML <source> element. We can create and access source element using the createElement() and getElementById() method respectively.

Syntax

Following is the syntax for −

Creating a source object −

var p= document.createElement("SOURCE");

Example

Let us look at an example for the source object −

Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Source object example</h1>
<audio id="AUDIO_1" controls >
</audio>
<p>Add a audio source for the above element by clicking the below element.</p>
<button onclick="createSrc()">CREATE</button>
<p id="Sample"></p>
<script>
   function createSrc() {
      var s = document.createElement("SOURCE");
      s.setAttribute("src", "sample.mp3");
      s.setAttribute("type", "audio/mpeg");
      document.getElementById("AUDIO_1").appendChild(s);
      document.getElementById("Sample").innerHTML="The audio control will work now";
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CREATE button −

Click “CREATE” −

raja
Published on 19-Aug-2019 12:49:08
Advertisements