PROSAGA码农传奇-src-Howler.js无法识别音频文件的src路径

<div class =“post-text”itemprop =“text”>
  <P>
    没有看到组件结构的完整实现，我怀疑数据没有在组件中初始化，或者绑定到src应该是
     <code>
      :src
    </code>
    。
  </p>
  <P>
    但是，有一个Vue-howler实现可以作为mixin。
  </p>
  <P>
    安装：
     <code>
      npm install vue-howler --save
    </code>
  </p>
  <P>
    创建音频播放器组件：
  </p>
   <pre>
    <code>
      <script>
import VueHowler from "vue-howler";

export default {
  mixins: [VueHowler]
};
</script>

<template>
  <div>
    <span>Total duration: {{ duration }} seconds</span>
    <span>Progress: {{ progress * 100 }}%</span>
    <button @click="togglePlayback">{{ playing ? "Pause" : "Play" }}</button>
    <button @click="stop">Stop</button>
  </div>
</template>

</code>
  </pre>
  <P>
    在视图实例中使用它：
  </p>
   <pre>
    <code>
      <script>
import AudioPlayer from "./components/audio-player.vue";

export default {
  components: {
    AudioPlayer
  },

data() {
    return {
      audioSources: ["http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3"]
    };
  }
};
</script>

</code>
  </pre>
  <P>
    codesandbox：
    <a href="https://codesandbox.io/s/k905r41rqv" rel="nofollow noreferrer">
      演示
    </A>
  </p>
</DIV>