在Vue中添加音樂(lè)非常簡(jiǎn)單，可以使用HTML的

使用HTML的audio標(biāo)簽

<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>

在上述代碼中，我們首先創(chuàng)建了一個(gè)音頻標(biāo)簽 <audio>，其中controls屬性會(huì)顯示音頻控件，包括播放/暫停、進(jìn)度條和聲音控制。接著，我們使用 <source> 標(biāo)簽定義音頻文件的來(lái)源和類型。

為了在Vue中引入該音頻文件，我們可以在Vue組件的template中添加以上代碼。如果需要引入多個(gè)音頻文件，則可以在template中復(fù)制多次音頻標(biāo)簽的代碼段，并修改source標(biāo)簽的src屬性，如下所示：

<audio controls>
<source src="music1.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="music2.mp3" type="audio/mpeg">
</audio>

這種方法優(yōu)點(diǎn)是對(duì)于簡(jiǎn)單的音頻播放需求十分方便，但是不太靈活，無(wú)法實(shí)現(xiàn)一些高級(jí)播放控制。如需實(shí)現(xiàn)更靈活的音頻播放，可以使用Vue提供的一些支持音頻的組件。

使用Vue的音頻組件

Vue提供了一些支持音頻播放的組件，諸如vue-audio-player、vue-audio、vuejs-audio-player等。這里我們以vue-audio-player為例：

npm install vue-audio-player --save

接著，在Vue組件中使用該組件，如下所示：

<template>
<div>
<audio-player :src="music" />
</div>
</template>
<script>
import AudioPlayer from 'vue-audio-player';
export default {
name: 'MyComponent',
components: {
AudioPlayer
},
data() {
return {
music: 'music.mp3'
}
}
}
</script>

在上述代碼中，我們首先安裝vue-audio-player組件，并在Vue組件中引入該組件并注冊(cè)。接著，在組件的template中使用 <audio-player> 標(biāo)簽來(lái)播放音頻文件，其中src屬性指定了音頻文件的地址。可以通過(guò)改變music屬性值來(lái)實(shí)現(xiàn)播放不同的音頻文件。

除了基于音頻文件地址的播放方式外，vue-audio-player組件還支持實(shí)時(shí)流媒體URL播放和在線音頻文件播放。詳細(xì)使用方式可以參考組件的官方文檔。

總之，通過(guò)以上兩種方法，我們可以非常簡(jiǎn)單地在Vue中添加音頻文件播放功能，并按照自己的需求進(jìn)行自定義。