如何使用Vue.js与@vueuse/sound播放不同音效？——解决向setup中play常量传递音效名称参数的问题

我明白你的问题啦——现在你的play函数被固定绑定了buttonSfx，没法灵活切换播放button2音效，对吧？其实VueUse Sound提供了两种简单的方式来实现动态切换，下面给你详细说明：

方案1：调用play时直接指定要播放的音效 #

这种方式最灵活，你可以在每次调用播放函数时，传入任意你想播放的音效文件：

<script>
import { useSound } from '@vueuse/sound'
import buttonSfx from '../assets/button.mp3'
import button2 from '../assets/button2.mp3'

export default {
  setup() {
    // 初始化useSound时不绑定固定音源
    const { play } = useSound()

    // 封装一个接收音效参数的播放函数
    const playTargetSound = (soundFile) => {
      play({ src: soundFile })
    }

    return {
      playTargetSound,
      // 把音效文件导出到模板中使用
      buttonSfx,
      button2
    }
  },
}
</script>

在模板里你就可以这样调用：

<!-- 播放默认按钮音效 -->
<button @click="playTargetSound(buttonSfx)">点击播放默认音效</button>
<!-- 播放button2音效 -->
<button @click="playTargetSound(button2)">点击播放Button2音效</button>

方案2：用响应式变量动态绑定当前音效 #

如果你希望切换默认音源后，直接调用play就能播放新的音效，可以用响应式变量来绑定当前音源：

<script>
import { ref } from 'vue'
import { useSound } from '@vueuse/sound'
import buttonSfx from '../assets/button.mp3'
import button2 from '../assets/button2.mp3'

export default {
  setup() {
    // 用ref创建响应式的当前音源变量，默认设为buttonSfx
    const currentSound = ref(buttonSfx)
    // 把响应式变量传给useSound，这样音源变化时会自动更新
    const { play } = useSound(currentSound)

    // 定义切换到button2音效的函数
    const switchToButton2Sound = () => {
      currentSound.value = button2
      play()
    }

    return {
      play,
      switchToButton2Sound
    }
  },
}
</script>

这种方式下，你可以直接调用play()播放当前绑定的音效，或者调用switchToButton2Sound()切换并播放button2的音效。

内容的提问来源于stack exchange，提问作者Mathews Edwirds