vue3中创建音频标签，并可以通过点击切换不同的icon图标，实现暂停和播放，使用<script setup>书写js部分

可以使用下面的代码在Vue3中创建音频标签，并通过点击切换不同的图标来实现暂停和播放，同时使用`<script setup>`来书写组件的JS部分：

<template>
  <div>
    <audio ref="audio" :src="audioSrc"></audio>
    <i class="icon" :class="{'icon-play': !isPlaying, 'icon-pause': isPlaying}" @click="togglePlay"></i>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const audioSrc = 'audio.mp3'
const isPlaying = ref(false)

function togglePlay() {
  const audio = $refs.audio
  if (isPlaying.value) {
    audio.pause()
  } else {
    audio.play()
  }
  isPlaying.value = !isPlaying.value
}
</script>

<style>
.icon-play:before {
  content: "\e603";
}

.icon-pause:before {
  content: "\e604";
}
</style>

上面的代码中，我们使用了`<script setup>`标签来书写组件的JS部分，使用`import`关键字导入了Vue3的`ref`函数。在`<script setup>`中，我们使用`const`关键字声明了`audioSrc`和`isPlaying`两个变量，分别表示音频文件路径和播放状态。同时，我们使用`ref`函数将`isPlaying`变量包装成响应式对象。在`togglePlay`函数中，我们使用`$refs`来获取音频标签的引用，然后根据当前的播放状态来执行暂停或播放操作，并更新`isPlaying`的值。

需要注意的是，在`<script setup>`中，我们不能直接使用`$refs`来获取组件的引用，需要将`$refs`替换成`$refs`。此外，在`<script setup>`中，我们不需要使用`this`关键字来访问组件的数据和方法，而是直接使用变量名或函数名即可。