Question

我正在为一个学校项目制作一个小型网站，该网站使用Vue.js销售嘻哈节拍，并且正在制作一个页面，允许您预览和购买节拍。我正在使用HTML音频标签进行节拍预览。我具有每个节拍的数据，包括其来源，但是当我动态绑定音频源时，音频元素将被禁用。但是，开发工具表明绑定了正确的源。

当我对源代码进行硬编码时，它可以工作。当其他人在线动态绑定不变的图像或视频源时，它对他们的工作方式与我执行此操作相同。我什至在音频标签中添加了“ v-if ='beat.source'”，并且该元素出现了，因此似乎知道该源在页面加载时存在。

<div class="beat-block" v-for="beat in beats" v-bind:key="beat.id">
   <h2 class="beat-title">{{ beat.name }}</h2>

   <audio controls class="beat-preview" controlslist="nodownload">
      <source :src="beat.source" :type="beat.type">
   </audio>

   <div class="beat-tags">
      Tags:
      <div class="tags-list" v-for="tag in beat.tags">{{tag}}&nbsp; 
      </div>
   </div>

   <button class="beat-buy" @click="pushPurchase(beat.id)">Buy</button>
</div>

data: function() {
    return {
      beats: [
        {
          name: "Fruity Beat",
          source: "../assets/beats/fruity.wav",
          type: "audio/wav",
          tags: ["trap", "happy", "upbeat", "bubbly", "playful"],
          id: 1
        },
        {
          name: "Cloud Rap",
          source: "../assets/beats/julia.mp3",
          type: "audio/mp3",
          tags: ["trap", "cloud rap", "spacey", "atmospheric"],
          id: 2
        }
      ]
    };

Here's what a block looks like right now

Answer 1

我看到您使用相对路径require，可以尝试使用<audio controls class="beat-preview" controlslist="nodownload"> <source :src="getSource(beat)" :type="beat.type"> </audio>：

methods: {
  getSource(beat) {
    return require(beat.source)
  }
}

并添加方法：

task default: :test

Vue动态绑定源禁用了HTML音频元素

1 个答案: