uniapp音频进度条怎么做

1. uniapp音频播放组件的使用

在uniapp中，我们可以使用官方提供的uni-audio组件来实现音频的播放和暂停操作。在页面中引入该组件后，可以通过设置组件的属性来控制音频的播放、进度、音量等。

1.1 引入uni-audio组件

在vue文件中引入uni-audio组件，可以使用以下代码：

<template>
  <uni-audio
    :src="url"
    :paused="paused"
    :current-time.sync="currentTime"
    :duration="duration"
    :volume="volume"
  ></uni-audio>
</template>
<script>
export default {
  data() {
    return {
      url: '/static/audio.mp3',
      paused: true,
      currentTime: 0,
      duration: 0,
      volume: 1,
    };
  },
  methods: {
    play() {
      this.paused = false;
    },
    pause() {
      this.paused = true;
    },
  },
  mounted() {
    this.$refs.audio.onLoadedmetadata(() => {
      this.duration = this.$refs.audio.duration;
    });
  },
};
</script>

在上面的代码中，我们首先定义了一个uni-audio组件，并指定了一些属性，包括音频文件地址、播放状态、当前播放时间、音频总时长和音量。其中 paused 属性用来控制播放和暂停，currentTime.sync 属性用来实现进度条的实时更新。在 mounted 阶段，我们监听了音频的 onLoadedmetadata 事件，以获取音频的总时长。

1.2 控制音频的播放和暂停

为了让用户能够控制音频的播放和暂停，我们需要在页面中添加相应的按钮或者图标。在点击播放按钮时，我们可以调用 play 方法来启动音频播放，在点击暂停按钮时，我们可以调用 pause 方法来暂停音频的播放。下面是代码示例：

<template>
  <uni-audio
    ref="audio"
    :src="url"
    :paused="paused"
    :current-time.sync="currentTime"
    :duration="duration"
    :volume="volume"
  ></uni-audio>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
</template>
<script>
export default {
  data() {
    return {
      url: '/static/audio.mp3',
      paused: true,
      currentTime: 0,
      duration: 0,
      volume: 1,
    };
  },
  methods: {
    play() {
      this.paused = false;
    },
    pause() {
      this.paused = true;
    },
  },
  mounted() {
    this.$refs.audio.onLoadedmetadata(() => {
      this.duration = this.$refs.audio.duration;
    });
  },
};
[xss_clean]

2. uniapp音频进度条的实现

2.1 实现进度条

为了实现音频进度条功能，我们需要在页面中添加一个进度条组件，并将其显示在播放控件下方。首先，我们需要在 data 中定义一个 progress 变量来表示当前的播放进度，然后在页面中使用 uni-progress 组件来显示进度条，如下所示：

<template>
  <uni-audio
    ref="audio"
    :src="url"
    :paused="paused"
    :current-time.sync="currentTime"
    :duration="duration"
    :volume="volume"
  ></uni-audio>
  <div class="progress-container">
    <uni-progress :percent="progress"></uni-progress>
  </div>
  <div class="controls">
    <!-- 播放/暂停按钮 -->
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>
<style>
.progress-container {
  width: 100%;
  height: 6px;
  background-color: #eee;
  margin-top: 10px;
}
.controls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
<script>
export default {
  data() {
    return {
      url: '/static/audio.mp3',
      paused: true,
      currentTime: 0,
      duration: 0,
      volume: 1,
      progress: 0,
    };
  },
  methods: {
    play() {
      this.paused = false;
    },
    pause() {
      this.paused = true;
    },
  },
  mounted() {
    this.$refs.audio.onLoadedmetadata(() => {
      this.duration = this.$refs.audio.duration;
    });
    setInterval(() => {
      const currentTime = this.currentTime;
      const duration = this.duration;
      if (currentTime && duration) {
        this.progress = (currentTime / duration) * 100;
      }
    }, 1000);
  },
};
</script>

在上面的代码中，我们首先在 data 中新增了一个 progress 变量，用来表示当前的播放进度。然后在页面中使用 uni-progress 组件来显示进度条。由于 uni-progress 组件的 percent 属性接受一个百分比值来表示进度，因此我们需要通过计算出当前播放时间与音频总时长的比值，再将其乘以 100 得到百分比值，来更新进度条的进度。

为了实现进度条的实时更新，我们使用了 setInterval 方法，在播放过程中每隔 1 秒钟更新一次进度条的进度。

2.2 自定义进度条样式

为了让进度条更加美观，我们可以为其添加一些自定义样式。首先，我们可以在 uni-progress 组件中添加一个轨道和一个进度条，然后通过 CSS 来设置它们的样式。下面是代码示例：

<template>
  <uni-audio
    ref="audio"
    :src="url"
    :paused="paused"
    :current-time.sync="currentTime"
    :duration="duration"
    :volume="volume"
  ></uni-audio>
  <div class="progress-container">
    <div class="progress-bar">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
  <div class="controls">
    <!-- 播放/暂停按钮 -->
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>
<style>
.progress-container {
  width: 100%;
  height: 4px;
  background-color: #eee;
  margin-top: 10px;
}
.progress-bar {
  width: 100%;
  height: 100%;
  position: relative;
}
.progress {
  height: 100%;
  background-color: #f00;
}
.controls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
<script>
export default {
  data() {
    return {
      url: '/static/audio.mp3',
      paused: true,
      currentTime: 0,
      duration: 0,
      volume: 1,
      progress: 0,
    };
  },
  methods: {
    play() {
      this.paused = false;
    },
    pause() {
      this.paused = true;
    },
  },
  mounted() {
    this.$refs.audio.onLoadedmetadata(() => {
      this.duration = this.$refs.audio.duration;
    });
    setInterval(() => {
      const currentTime = this.currentTime;
      const duration = this.duration;
      if (currentTime && duration) {
        this.progress = (currentTime / duration) * 100;
      }
    }, 1000);
  },
};
</script>

在上面的代码中，我们首先为进度条添加了一个新的父容器 .progress-bar，并使用了 position: relative 来设置其相对定位。然后为 .progress 添加了 background-color 样式，用来表示进度条的颜色。最后，使用 :style 绑定了 width 样式，将进度条的宽度设置为当前播放进度的百分比。

3.总结

通过上述操作，我们可以成功地实现 uniapp 音频进度条的功能。首先，在页面中引入 uni-audio 组件，并设置其属性来控制音频的播放、进度、音量等。然后，使用 uni-progress 组件来实现进度条的显示，并通过计算播放时间与总时长的比值，来更新进度条的进度。最后，通过添加一些自定义样式来美化进度条的样式。