為了在 Vue 應用中添加音頻，你需要先創建一個 HTML 的 audio 元素。下面是一個最基本的例子：

<audio>
<source src="audio.mp3" type="audio/mpeg">
<p>Your browser does not support the audio element.</p>
</audio>

該代碼創建了一個 audio 元素，并在其內部添加了一個 source 元素，用于指定音頻的 URL 地址和 MIME 類型。如果瀏覽器不支持 audio 元素，則顯示一段錯誤信息。

如果你使用 Vue，可以在組件的 template 中添加上述代碼。但是，在你的 Vue 應用中，你可能需要動態處理音頻的播放、暫停、進度等操作。下面是一個實現這些功能的例子：

<template>
<div>
<audio ref="audioPlayer">
<source v-bind:src="audioSrc" type="audio/mpeg">
<p>Your browser does not support the audio element.</p>
</audio>
<div>
<button v-on:click="play">Play</button>
<button v-on:click="pause">Pause</button>
<div>{{ currentTime }} / {{ totalTime }}</div>
<input type="range" v-model="progress" v-on:input="seek">
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
audioSrc: 'audio.mp3',
currentTime: 0,
totalTime: 0,
progress: 0,
isPlaying: false
}
},
methods: {
play: function () {
this.$refs.audioPlayer.play()
this.isPlaying = true
},
pause: function () {
this.$refs.audioPlayer.pause()
this.isPlaying = false
},
seek: function () {
var time = this.$refs.audioPlayer.duration * (this.progress / 100)
this.$refs.audioPlayer.currentTime = time
}
},
mounted: function () {
var self = this
var audio = this.$refs.audioPlayer
audio.addEventListener('loadedmetadata', function () {
self.totalTime = audio.duration
})
audio.addEventListener('timeupdate', function () {
self.currentTime = audio.currentTime
self.progress = (audio.currentTime / audio.duration) * 100
})
}
}
</script>

該代碼包含一個 Vue 組件，其中定義了一個 ref 屬性指向 audio 元素。該組件還定義了一些 data 屬性，如音頻的 URL 地址、當前播放時間、總時間、播放進度等。在 methods 中，定義了一些操作函數，如播放、暫停、拖動進度條等。在 mounted 中，添加了一些事件監聽器，用于更新播放時間、進度等信息。

將該組件添加到你的 Vue 應用中，并傳遞一個 audioSrc 屬性，即可實現音頻的播放和控制。例如：

<audio-player audio-src="audio.mp3"></audio-player>

上述代碼將創建一個名為 audio-player 的組件，并向其傳遞了一個 audio-src 屬性，指定了音頻的 URL 地址。

總之，在 Vue 應用中添加音頻并進行控制非常簡單。你只需要創建一個 audio 元素，然后使用 Vue 的組件和方法來實現播放、暫停、進度等操作即可。