Jump to content

Accessing Media Through DOM


Recommended Posts

Elements such as images, texts are always accessed within the .js file. Media elements like audio, video can be too, but the code snippet might go complicated. To reduce the complexity of the code, we can declare the media files in the index.html file and access them through DOM (Document Object Model).

In this example, we are going to access an audio file from index.html and play it with a .js file. For this, declare the head and body tag as usual in the index.html

< head >
< title > Example < /title >
< meta charset = "UTF - 8" >
< script src = "example.js" > < /script >
< script src = "phaser.js" > < /script >
</ head >
< body > 
< /body >


Include the media file in the body tag

< audio id="id" src="file_name.mp3" >< /audio > //For .mp3, .wav file
< video id = "id" src = "video_name.video_type" >< /video > //For .mp4, .wmv file


With this, the html part is done. Open the javascript file and create the scene according to your specifications. For this example, we have taken the below config.

var config = {
    type: Phaser.AUTO,
    width: 850,                       //scene width
    height: 650,                      //scene height
    backgroundColor: '#4c0099',       //scene bg color
    parent: 'phaser-example',          //the declaring class has 'phaser-example' as the parent
    scene: {                          
        preload: preload,              //functions declared
        create: create
var game = new Phaser.Game(config);


The above snippet has created the scene. Now, we are going to have a text saying 'Click Here', which upon clicking will play the media file - in this case the audio file

function preload ()                          //defining the preload function

function create ()                          //defining the create function
    var txt; //txt is a variable which is storing a textbox

    txt = this.add.text(400,300,'Click Here');   
    //txt displays 'Click Here' in coordinates (400,300) of the game scene

    txt.setInteractive({useHandCursor : true}); 
    //the cursor turns into a clickable hand cursor when hovering over the 'Click Here' text

    txt.setInteractive().on('pointerdown', function(){            //upon clicking the text, you are declaring and calling a function
        var audi = document.getElementById("aud");                
        //this gets the element from the html file with id = "aud" and stores it in variable 'audi'
        //to play the audio file. This can also be used for a video file                                          
    }) }


The final output will have a purple game scene with 'Click Here' on the center of the scene. 'Click Here' will play the audio file declared in index.html

In case of an image, you can declare the following under create function

   var txt = this.add.text(400,300,'Click Here'); 
        txt.setInteractive({useHandCursor : true});
        txt.setInteractive().on('pointerdown', function(){
            var image = this.add.image(100,100,"filename.png")            //this adds the image at the time of clicking the text



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...