vue3中创建音频标签,并可以通过点击切换不同的icon图标,实现暂停和播放,使用<script setup>书写js部分,不使用$refs,pause()和play()方法显示不存在
时间: 2024-02-23 16:00:14 浏览: 20
可以使用`ref`函数来获取音频标签的引用,以便在组件中使用`pause`和`play`方法。下面是一个示例:
```html
<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 audio = ref(null)
const isPlaying = ref(false)
function togglePlay() {
if (isPlaying.value) {
audio.value.pause()
} else {
audio.value.play()
}
isPlaying.value = !isPlaying.value
}
</script>
<style>
.icon-play:before {
content: "\e603";
}
.icon-pause:before {
content: "\e604";
}
</style>
```
上面的代码中,我们使用`ref`函数声明了一个名为`audio`的引用,并在`<audio>`标签上使用`ref`指令将其绑定到音频标签上。在`togglePlay`函数中,我们可以使用`audio.value`来获取音频标签的引用,然后使用`pause`和`play`方法来暂停和播放音频。最后,我们更新`isPlaying`的值以反映当前的播放状态。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)