Javascript setTimeout函数在特定时间后播放音频Vue.js

我正在Vue.js中为音频播放器使用Vue audio。我有一个音频播放器组件。 我的代码：

<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>

从“vue audio”导入Vueudio；
导出默认值{
道具：{
file1:String，
},
组成部分：{
“vue音频”：VueAudio，
},
挂载（）{
setTimeout（函数（）{
document.getElementById（'myAudio'）.play（）
}, 3000);
},
名称：'AudioPlayer'，
};

我遇到一个错误，说：

未捕获类型错误：document.getElementById（…）。播放不是 作用

---

您可以改为使用元素的

ref

属性

<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>

从“vue audio”导入Vueudio；
导出默认值{
道具：{
file1:String，
},
组成部分：{
“vue音频”：VueAudio，
},
挂载（）{
setTimeout（函数（）{
这是。$refs.myAudio.play（）
}, 3000);
},
名称：'AudioPlayer'，
};

您可以使用

ref

引用当前的Vue组件。 作为检查，我们可以使用

getAudio

获取当前音频组件

<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>

从“vue audio”导入Vueudio；
导出默认值{
道具：{
file1:String，
},
组成部分：{
“vue音频”：VueAudio，
},
挂载（）{
var self=这个
setTimeout（函数（）{
self.$refs.currentAudio.getAudio（）.play（）
}, 3000);
},
名称：'AudioPlayer'，
};