如何使用 Composition API 在 Vue 3 应用程序中播放音效答案

【问题标题】：How to play sound effects in Vue 3 app with Composition API如何使用 Composition API 在 Vue 3 应用程序中播放音效
【发布时间】：2022-01-20 04:54:55
【问题描述】：

我正在尝试在 Vue 3 Composition API 中设置一个基本的按钮点击来触发音效。目前，我的设置函数包括从 assets 文件夹导入的 mp3 音效，然后传递给 HTMLAudioElement 类型的 ref 方法，然后分配给名为“play”的 const。在将“播放”常量添加到返回后，我将“播放”添加到按钮中的单击处理程序中。我在控制台中没有收到错误，但按钮仍然没有触发音效。如何配置设置功能和按钮以触发音效？这是我的代码：

<template>
  <div div class="flex justify-center">
    <button @click="play">Click</button>
  </div>
</template>

<script>
import { ref } from 'vue' 
import { trumpetSfx } from '../assets/demo_src_assets_fanfare.mp3'

export default {
  name: 'Button',
  components: {},
  setup() {
    const play = ref<HTMLAudioElement>(trumpetSfx);

    return { play }
  }
}
</script>

【问题讨论】：

标签： javascript vue.js vue-component vuejs3 vue-composition-api

【解决方案1】：

您可以直接从 javascript 使用Audio API：

import trumpetSfx from '../assets/demo_src_assets_fanfare.mp3'

...
setup() {
    const audio = new Audio(trumpetSfx);
    
    function play() {
        audio.play()
    }

    return { play }
}
...

【讨论】：

【解决方案2】：

const trumpetSfx = require("../assets/demo_src_assets_fanfare.mp3");

export default {
  setup() {
      const audio = new Audio(trumpetSfx);
    
      const handleClick = () => {
        audio.play()
      }

      return { audio, handleClick }
  }
}

【讨论】：

@Maverick Fabroa 我尝试了您的方法，但导入仍然无效。经过一些额外的修改后，我最终使用了一个 require 方法从资产中传递 mp3 剪辑，这似乎有效。
见“Explaining entirely code-based answers”。虽然这在技术上可能是正确的，但它并不能解释为什么它可以解决问题或应该是选择的答案。除了帮助解决问题，我们还应该进行教育。