next work start from tick_phonics_v1

src/pages/drawing/v3.astro

@@ -90,6 +90,9 @@ import Layout from '../../layouts/Layout.astro';
     let cancelIconWidth; 
     let maxScore;
     let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
     
     if(isMobile){
         topLogoWidth = 4.5;
@@ -154,6 +157,10 @@ import Layout from '../../layouts/Layout.astro';
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -193,6 +200,9 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -279,6 +289,19 @@ import Layout from '../../layouts/Layout.astro';
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
             // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
             
+            if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            muteIcon.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
             retryButton.setInteractive().on('pointerdown', () => {
                 graphics.clear();
             })