uni-app（vue）音频组件：让音频播放更便捷

uni-app（vue）音频组件：让音频播放更便捷

随着小程序的发展，音频播放的需求也日益增多。然而，小程序官方并不维护audio组件，这给开发人员带来了诸多不便。为了解决这一问题，本文介绍了如何基于InnerAudioContext封装一个基本的uni-app（vue）音频组件，满足小程序音频播放的基本需求。

组件功能

uni-app（vue）音频组件具有以下功能：

• 通过点击播放或暂停按钮播放或暂停音频。
• 显示音频播放进度和总时长。
• 通过图标变化显示当前音频所处状态（暂停/播放/加载中）。
• 页面音频更新时自动刷新组件状态。
• 全局有且只有一个音频组件，避免多个音频同时播放造成混乱。

组件使用

安装组件

uni-install @uni-app/audio

引入组件

import Audio from '@uni-app/audio';

使用组件

<template>
  <Audio src="http://example.com/audio.mp3" />
</template>

<script>
export default {
  components: {
    Audio
  }
};
</script>

组件属性

属性	类型	默认值	说明
src	String	无	音频文件的URL
autoplay	Boolean	false	是否自动播放音频
controls	Boolean	true	是否显示播放控制按钮
loop	Boolean	false	是否循环播放音频
muted	Boolean	false	是否静音播放音频
poster	String	无	音频封面的URL
preload	String	metadata	预加载音频数据的方式，可选值：none、metadata、auto
crossOrigin	String	anonymous	跨域资源请求的CORS设置，可选值：anonymous、use-credentials

组件事件

事件	参数	说明
play	无	音频开始播放时触发
pause	无	音频暂停播放时触发
ended	无	音频播放结束时触发
timeupdate	{ currentTime, duration }	音频播放进度更新时触发
seeking	无	音频正在跳转时触发
seeked	无	音频跳转结束时触发
error	{ code, message }	音频播放发生错误时触发

组件示例

<template>
  <div>
    <Audio src="http://example.com/audio.mp3" autoplay />
  </div>
</template>

结语

uni-app（vue）音频组件是一款基于InnerAudioContext封装的基本音频组件，满足小程序音频播放的基本需求。组件具有丰富的功能和简单的使用方式，非常适合在uni-app（vue）小程序中使用。