让音频进度条与轮播图同步，打造沉浸式音频播放体验

1. 搭建项目基础

首先，我们需要创建一个新的 Vue 3 项目。你可以使用 Vue CLI 或 Vite 来初始化项目。

# 使用 Vue CLI 创建项目
vue create my-project

# 使用 Vite 创建项目
npm init vite my-project

2. 安装依赖

接下来，我们需要安装必要的依赖。

# 安装 Vue 3
npm install vue@3

# 安装 vant 库
npm install vant

# 安装 axios 库（用于获取音频数据）
npm install axios

3. 创建组件

现在，我们可以创建 Vue 组件来构建音频播放器。

<template>
  <div>
    <van-swiper :autoplay="true" :interval="3000">
      <van-swiper-item v-for="item in audioList" :key="item.id">
        <div class="audio-item">
          <audio :src="item.url"></audio>
          <van-progress :percentage="progress" show-pivot></van-progress>
        </div>
      </van-swiper-item>
    </van-swiper>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { Swipe, SwipeItem, Progress } from 'vant'
import axios from 'axios'

export default {
  components: {
    Swipe,
    SwipeItem,
    Progress
  },
  setup() {
    const audioList = ref([])
    const progress = ref(0)

    onMounted(() => {
      // 获取音频数据
      axios.get('/api/audio').then(res => {
        audioList.value = res.data
      })
    })

    // 监听音频播放进度
    const audio = document.querySelector('audio')
    audio.addEventListener('timeupdate', () => {
      progress.value = (audio.currentTime / audio.duration) * 100
    })

    return {
      audioList,
      progress
    }
  }
}
</script>

4. 使用组件

现在，我们可以将组件添加到我们的 Vue 应用中。

<template>
  <div>
    <audio-player></audio-player>
  </div>
</template>

<script>
import AudioPlayer from './components/AudioPlayer.vue'

export default {
  components: {
    AudioPlayer
  }
}
</script>

5. 运行项目

最后，我们可以运行项目并查看结果。

# 使用 Vue CLI 运行项目
npm run serve

# 使用 Vite 运行项目
npm run dev

现在，你应该可以看到一个带有轮播图的音频播放器。当轮播图切换时，音频进度条也会随之移动。

结语

通过这篇教程，我们学习了如何使用 Vue 3 构建一个交互式音频播放器，让音频进度条与轮播图同步。这种方式可以为用户提供更好的交互体验，并帮助他们更好地了解音频的播放进度。