Question

我正在尝试在Vue.js中创建一个组件，您可以在其中单击按钮，使<audio>播放器出现并播放随机歌曲。

当我尝试运行下面的playSong()函数时，我收到此错误：

GET (song-file) net::ERR_ABORTED

我尝试使用在运行playSong()功能时未创建的常规元素播放歌曲（使用相同的路径），这样可以正常工作。

我是Vue的新手，所以也许这很容易解决，但我无法通过Google找到相关的答案。有人知道出了什么问题吗？

<template>
 <div>
  <button @click="playSong()">Play a spooky song!</button>
  <audio controls><source src="../songs/spooky_scary_skeletons.mp3" type="audio/mpeg"></audio>
  <div ref="songcontainer"></div>
  <a href="/">Back to home page</a>
 </div>
</template>

<script>
export default {
  name: 'halloweenPlaylist',
  data () {
  return {
  }
},
methods: {
  playSong() {
  var spookySong = new Array ()
      spookySong[0] = "../songs/spooky_scary_skeletons.mp3"
      spookySong[1] = "../songs/this_is_halloween.mp3"

    const generateSpook = Math.floor(Math.random()*spookySong.length);
    this.$refs.songcontainer.innerHTML = '<audio controls><source src="'+spookySong[generateSpook]+'" type="audio/mpeg"></audio>';
    console.log(spookySong[generateSpook]);
  },
},
computed: {
 },
}
</script>

在Vue.js中获取<file> net :: ERR_ABORTED

0 个答案: