uniapp audio组件的使用方法

在uniapp中使用audio组件时遇到几个问题：

  1. 如何设置音频的自动播放？在真机上测试时autoplay属性好像不生效
  2. audio组件在不同平台(小程序/H5/App)的兼容性差异有哪些需要注意？
  3. 能否通过API动态切换音频源？尝试修改src属性后没有实时更新
  4. 如何监听音频缓冲进度和自定义样式？文档里没有找到相关示例
  5. iOS系统下播放器控制条显示异常，有没有通用的解决方案？
2 回复

uniapp中audio组件用于播放音频。使用方式：在template中添加<audio :src="音频地址" controls></audio>，controls属性显示播放控件。可通过ref获取实例，调用play()、pause()等方法控制播放。


UniApp 的 audio 组件用于在应用中播放音频。以下是基本使用方法、关键属性和事件说明：

基本用法

在 .vue 文件中直接使用组件：

<template>
  <view>
    <audio 
      src="https://example.com/audio.mp3" 
      :action="audioAction" 
      @play="onPlay" 
      @pause="onPause"
    ></audio>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioAction: {
        method: 'play' // 控制播放（play/pause/stop）
      }
    };
  },
  methods: {
    onPlay() {
      console.log("开始播放");
    },
    onPause() {
      console.log("暂停播放");
    }
  }
};
</script>

核心属性

  1. src：音频资源地址（必填，支持网络 URL 或本地路径）。
  2. action：通过 method 控制播放行为：
    • play：播放
    • pause：暂停
    • stop：停止
  3. controls：是否显示默认控制条（默认为 false，建议设为 true 以便用户操作）。
  4. autoplay：是否自动播放（注意：部分平台限制自动播放）。
  5. loop：是否循环播放。
  6. poster：音频封面图（在未播放时显示）。

常用事件

  • @play：开始播放时触发。
  • @pause：暂停时触发。
  • @ended：播放结束时触发。
  • @error：发生错误时触发。

注意事项

  1. 平台差异：H5 端支持较好，但部分小程序平台（如微信）可能有播放限制，需通过用户交互触发播放。
  2. 路径问题：本地文件需放在 static 目录，使用相对路径（如 /static/audio.mp3）。
  3. 控制方式：可通过动态修改 action.method 的值控制播放状态。

示例：完整控制逻辑

<template>
  <view>
    <audio 
      :src="audioSrc" 
      :action="action" 
      controls 
      @play="onPlay"
    ></audio>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: 'https://example.com/sample.mp3',
      action: { method: 'pause' }
    };
  },
  methods: {
    play() {
      this.action.method = 'play';
    },
    pause() {
      this.action.method = 'pause';
    },
    onPlay() {
      console.log("音频开始播放");
    }
  }
};
</script>

通过以上代码即可实现音频播放的基础功能，注意根据实际平台调整配置。

回到顶部