Accessing Media Through DOM

[IveejNaris]

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'
        audi.play();  
        //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
        })