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

Question

我在 Vue.js 中使用 Vue-audio 作为音频播放器。我有 AudioPlayer 组件。我的代码:

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

我遇到错误说:

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

Answer 1

你可以使用 ref 来引用当前的 Vue 组件。作为检查source code , 我们可以使用 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>