uniapp 音频倍速播放如何实现

在uniapp中如何实现音频的倍速播放功能？我尝试使用uni.createInnerAudioContext()创建音频对象，但没找到设置播放速度的选项。请问有没有现成的API可以实现这个功能，或者需要自己通过其他方式实现？如果有具体的代码示例就更好了。

2 回复

使用uniapp的createInnerAudioContext创建音频对象，设置playbackRate属性即可实现倍速播放。示例代码：

const audio = uni.createInnerAudioContext()
audio.src = '音频路径'
audio.playbackRate = 2 // 2倍速
audio.play()

支持0.5-2.0倍速，部分安卓机可能不支持。


在 UniApp 中实现音频倍速播放，可以通过使用 uni.createInnerAudioContext() 创建音频上下文，并设置 playbackRate 属性来控制播放速度。以下是具体实现步骤和示例代码：

实现步骤

  1. 创建音频上下文：使用 uni.createInnerAudioContext() 初始化音频对象。
  2. 设置音频源：通过 src 属性指定音频文件路径（支持本地和网络路径）。
  3. 配置倍速：通过 playbackRate 属性调整播放速度，取值范围通常为 0.5 到 2.0（具体支持范围依赖平台）。
  4. 播放控制：调用 play() 方法开始播放，结合按钮或滑块动态修改倍速。

示例代码

<template>
  <view>
    <button @tap="playAudio">播放音频</button>
    <slider :value="playbackRate * 100" min="50" max="200" @change="onRateChange" />
    <text>当前倍速: {{ playbackRate }}x</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioContext: null,
      playbackRate: 1.0 // 默认正常速度
    };
  },
  onLoad() {
    // 创建音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = 'https://example.com/audio.mp3'; // 替换为实际音频地址
  },
  methods: {
    playAudio() {
      this.audioContext.play();
    },
    onRateChange(e) {
      // 滑动条值范围 50~200，转换为 0.5~2.0
      this.playbackRate = e.detail.value / 100;
      this.audioContext.playbackRate = this.playbackRate;
    }
  },
  onUnload() {
    // 页面卸载时销毁音频上下文
    this.audioContext.destroy();
  }
};
</script>

注意事项

  • 平台差异：playbackRate 在部分旧版本小程序或特定平台可能不支持，建议测试目标平台兼容性。
  • 用户交互：某些平台要求音频播放需由用户触发（如点击事件），需确保倍速设置在播放前或播放中调用。
  • 资源加载：网络音频需确保加载完成，可监听 onCanplay 事件。

通过以上方法即可灵活控制音频播放速度。

回到顶部