Where how can I use Methods?

I am working with some code that doesn’t have Methods object so I trie dto put some in and console log, but that doesn’t work?!

the audio currently works from the @watch method but I would lik eto control it with my own methods, please help?!

Here is the code I am working with showing my methods object and further down I created a const introAudio to try and control the audio:

<template>
  <div v-if="element" class="text-image grid-x container"
      v-observe-visibility="{ callback: visibilityChanged, throttle: 100, intersection: { threshold: 0.3 }, once: false }"
      :class="{ 'visible': true }" 
      role="region" level="1" >
      
    <div class="text-image-container component-container flexbox flexbox-row flexbox-justify-stretch flexbox-align-stretch" :class="element.content._classes">

      <div class="text-image-content flexbox flexbox-column" >

        <div class="text-image-topic-title btw-topic-title cell large-12 medium-12 small-12" role="heading" level="2">
          <h1 ref="accessibility" class="accessibility-region" tabindex="-1">{{getScreenAriaContent()}}</h1>
          <h3 v-html="getTopicTitle()" />
        </div>

        <div class="text-image-title btw-title cell large-12 medium-12 small-12">
          <h4 v-if="element.content.title" v-html="element.content.title" />
        </div>
        <div v-if="element.content._audio">
          <audio id="audio" ref="audio">
            <source :src="element.content._audio" type="audio/mpeg">
            Your browser does not support the audio element.
          </audio>
          <div class="audio-controls">
            <button @click="playAudio()">Play</button>
            <button @click="pauseAudio()">Pause</button>
            <button @click="volUp()">Vol+</button>
            <button @click="volDown()">Vol-</button>
          </div>
        </div>
        <div ref="bodyContent" class="text-image-text btw-text cell large-12 medium-12 small-12">
          <div v-html="element.content.body" />
        </div>
        
        <!-- <div class="text-image-characters">
          <img src="~@/assets/images/text-image-splash_people.png">
        </div> -->

      </div>

      <div class="text-image-image">
        <img :src="element.content._image" :aria-label="element.content._alt" v-if="$store.state.device !== 'phone'" >
        <img :src="element.content._imageMobile" :aria-label="element.content._alt" v-if="$store.state.device === 'phone'" >
      </div>

    </div>
    

  </div>
</template>

<script lang="ts">

  import { Component, Prop, Vue, Watch, Mixins } from 'vue-property-decorator';
  import BaseComponent from '@/components/BaseComponent';

  import ITextImage, {ITextImageContent } from "@/interfaces/BTW/ITextImage";

  @Component({
    
    components: {
      
    },
    methods: {
      playAudio() {
        
          // audioEl.pause();
          // audioEl.currentTime = 0;
          // audioEl.play();
        
      },

      pauseAudio() {
        console.log('Pause audio');        
          // this.audio.pause();
      },

      volUp() {
        
          // audioEl.volume += 0.2;
        
      },

      volDown() {
        
        //  this.introAudio.volume -= 0.2;
        
      }
    }
  })

  export default class TextImage extends Mixins(BaseComponent) implements ITextImage {
    @Prop({ required: true })
    protected element!: ITextImage;

    @Prop({ default: ""})
    public content!: ITextImageContent;

    private mounted() {
      //add instrucitons etc...
      this.unlockNext();
      this.hideContentForAnimation();
      this.focusStart();
      const introAudio = new Audio(this.element.content._audio)
    }

    private activated() {
      this.focusStart();
    }

    private hideContentForAnimation() {
      if (this.$store.state.device !== 'phone') {
        const bodyElement = (this.$refs.bodyContent as Element);
        let elNum = 0;
        if(bodyElement) {
          const _el = bodyElement as HTMLElement;
          const childrens = _el.children;

          if(childrens.length > 0) {
            [].forEach.call(childrens, function(_els, index) {
              const _el2 = _els as HTMLElement;
              if(index === childrens.length) {
                  _el2.classList.add('faded-out');
              }
              _el2.classList.remove('fade-in');
              const childrens2 = _el2.children;
              if(childrens2.length > 0) {
                [].forEach.call(childrens2, function(_els2) {
                  const _el3 = _els2 as HTMLElement;
                  const childrens3 = _el3.children;
                  elNum++;
                  if(_el3.tagName !== 'STRONG') {
                    _el3.classList.add('faded-out');
                  }
                  _el3.classList.remove('fade-in');
                });
              } 
            });
          }
        }
      }
    }

    @Watch('isActive')
    private reset() {

      if(this.isActive === true) {
        this.focusStart();

        if(this.element.content._audio) {
          const audioElement = (this.$refs.audio as Element);
          const audioEl = audioElement as HTMLAudioElement;
          audioEl.pause();
          audioEl.currentTime = 0;
          audioEl.play();
        }
      } else {
        if(this.element.content._audio) {
          const audioElement = (this.$refs.audio as Element);
          const audioEl = audioElement as HTMLAudioElement;
          audioEl.pause();
        }
      }

      if(this.isActive === true && this.$store.state.device !== 'phone') { 
        const bodyElement = (this.$refs.bodyContent as Element);
        let elNum = 0;
        const animTime = 750;
        if(bodyElement) {
          const _el = bodyElement as HTMLElement;
          const childrens = _el.children;

          if(childrens.length > 0) {
            [].forEach.call(childrens, function(_els, index) {
              const _el2 = _els as HTMLElement;
              const childrens2 = _el2.children;
              
              if(childrens2.length > 0) {
                [].forEach.call(childrens2, function(_els2) {
                  const _el3 = _els2 as HTMLElement;
                  const childrens3 = _el3.children;

                  elNum++;
                  setTimeout(() => {
                    if(_el3.tagName !== 'STRONG') {
                      _el3.classList.add('fade-in');
                    }
                  }, elNum*animTime);

                });
              } 
            });
            if(childrens.length > 0) {
              [].forEach.call(childrens, function(_els, index) {
                const _el2 = _els as HTMLElement;
                if(index === childrens.length-1) {
                  elNum++;
                  setTimeout(() => {
                    _el2.classList.add('fade-in');
                  }, elNum*animTime);
                }
              });
            }
          }
        }
      } else {
        this.hideContentForAnimation();
      }
    }

  }

</script>

Here is an example of how you can add a methods object and a custom method called playIntroAudio:

<template>
  <div>
    <audio ref="introAudio" :src="introAudioSrc"></audio>
    <button @click="playIntroAudio()">Play</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      introAudioSrc: 'path/to/intro.mp3'
    }
  },
  methods: {
    playIntroAudio() {
      this.$refs.introAudio.play()
    }
  }
}
</script>

You can then add a ref attribute to the audio element in your template, so that you can access it in your methods.

I also noticed that you have v-observe-visibility directive on your root element it is not a default Vue.js directive, I recommend double checking and installing the package if it’s not part of the project dependencies, it could also cause some issues.

Also, you can try to call the methods play and pause that are already provided by the HTMLAudioElement class, you can see more methods and properties at: HTMLAudioElement - Web APIs | MDN

ok thanks but from how my VUE page is currently constructed, I can’t do it like that

can you check if your component is mounted correctly and console.log is actually in the code. The Console.log in ts files seems at correct place but it seems like you might not be running in production or viewing the build version which has removed console.log. If you can give more details about build process and component loading that would help.