CODEWITHSUNDEEP
javascriptvue.js
shreejana
shreejana

Reputation: 391

setTimeout function to play an audio after certain time Vue.js

I am using Vue-audio for an audio player in Vue.js. I have AudioPlayer component. My code: 

<template>
  <vue-audio id = "myAudio" :file= "file1"/>
</template>

<script>
import VueAudio from 'vue-audio';

export default {
  props: {
    file1: String,
  },
  components: {
    'vue-audio': VueAudio,
  },
  mounted (){
      setTimeout(function() {
        document.getElementById('myAudio').play()
        }, 3000);
  },
  name: 'AudioPlayer',
};
</script>

I encounter an error saying:

Uncaught TypeError: document.getElementById(...).play is not a function

Upvotes: 2

Views: 367

Answers (2)

ittus
ittus

Reputation: 22403

You can use ref to reference to current Vue component. As checking source code, we can use getAudio to get current audio component

<template>
  <vue-audio id = "myAudio" :file= "file1" ref="currentAudio" />
</template>

<script>
import VueAudio from 'vue-audio';

export default {
  props: {
    file1: String,
  },
  components: {
    'vue-audio': VueAudio,
  },
  mounted (){
      var self = this
      setTimeout(function() {
        self.$refs.currentAudio.getAudio().play()
      }, 3000);
  },
  name: 'AudioPlayer',
};
</script>

Upvotes: 3

wobsoriano
wobsoriano

Reputation: 13462

You can make use of the ref attribute to the element instead.

<template>
  <vue-audio id = "myAudio" :file= "file1" ref="myAudio" />
</template>

<script>
import VueAudio from 'vue-audio';

export default {
  props: {
    file1: String,
  },
  components: {
    'vue-audio': VueAudio,
  },
  mounted (){
      setTimeout(function() {
        this.$refs.myAudio.play()
      }, 3000);
  },
  name: 'AudioPlayer',
};
</script>

Upvotes: 0

Related Questions