在 Vue 页面中播放语音可以通过 HTML5 的 <audio> 元素或 JavaScript 的 Audio API 实现。以下是两种常见的实现方式：

方法 1：使用原生 HTML5 Audio

步骤：

1. 在组件中定义音频对象
2. 通过按钮控制播放/暂停
3. 处理音频源动态切换

<template>
  <div>
    <!-- 播放控制按钮 -->
    <button @click="togglePlay">
      {{ isPlaying ? '暂停' : '播放' }}
    </button>
    
    <!-- 切换音频源示例 -->
    <button @click="changeAudioSource('new-audio.mp3')">
      切换语音
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audio: null,     // 存储音频对象
      isPlaying: false // 播放状态
    };
  },
  mounted() {
    // 初始化音频对象（指定默认音频文件）
    this.audio = new Audio('default-audio.mp3');
    
    // 监听音频结束事件
    this.audio.addEventListener('ended', () => {
      this.isPlaying = false;
    });
  },
  methods: {
    // 切换播放/暂停
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play().catch(error => {
          // 处理浏览器自动播放限制（需用户交互后触发）
          console.error("播放失败:", error);
        });
      }
      this.isPlaying = !this.isPlaying;
    },
    // 动态切换音频源
    changeAudioSource(newSrc) {
      this.audio.pause();
      this.isPlaying = false;
      this.audio.src = newSrc;
      this.audio.load(); // 重新加载新音频
    }
  },
  beforeDestroy() {
    // 组件销毁时释放音频资源
    this.audio.pause();
    this.audio = null;
  }
};
</script>

方法 2：使用第三方库 Howler.js

Howler.js 提供了更强大的音频控制（如跨浏览器兼容性、音量调节、循环播放等）。

步骤：

1. 安装 Howler.js

   npm install howler
   

2. 在组件中使用

<template>
  <div>
    <button @click="togglePlay">
      {{ isPlaying ? '暂停' : '播放' }}
    </button>
  </div>
</template>

<script>
import { Howl } from 'howler';

export default {
  data() {
    return {
      sound: null,     // Howl 实例
      isPlaying: false
    };
  },
  mounted() {
    // 初始化音频
    this.sound = new Howl({
      src: ['audio-file.mp3'],
      html5: true,    // 使用 HTML5 Audio 提升兼容性
      onend: () => {
        this.isPlaying = false;
      }
    });
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.sound.pause();
      } else {
        this.sound.play();
      }
      this.isPlaying = !this.isPlaying;
    }
  },
  beforeDestroy() {
    // 清理资源
    this.sound.stop();
    this.sound = null;
  }
};
</script>

注意事项：

1. 浏览器自动播放策略
   现代浏览器通常禁止未经用户交互的自动播放。确保首次播放由按钮点击等用户操作触发。

2. 音频文件格式兼容性
   提供多种格式（如 MP3、OGG）以确保跨浏览器支持：

   this.sound = new Howl({
     src: ['audio.mp3', 'audio.ogg']
   });
   

3. 移动端适配
   部分移动端浏览器可能限制音频播放，需在用户手势事件（如 @click）中初始化音频。

通过以上方法，你可以灵活地在 Vue 应用中实现语音播放功能。根据需求选择原生方案（轻量简单）或 Howler.js（功能丰富）。