uni-app vue3 h5 端使用 audio 报错

uni-app vue3 h5 端使用 audio 报错

示例代码：

<audio controls />

操作步骤：

  • vue 版本选择 3，在页面上添加一个 audio 标签后运行到 h5

预期结果：

  • 正常运行

实际结果：

  • 报错
    ├F10: PM┤ [vite] [plugin:vite:import-analysis] Cannot find module '[@dcloudio](/user/dcloudio)/uni-components/style/audio.css'

bug描述：

  • vue3 使用 audio 标签报错


| 信息类别       | 信息内容             |
|----------------|----------------------|
| 产品分类       | uniapp/H5            |
| PC开发环境     | Windows              |
| PC开发环境版本 | Windows 10 20H2      |
| 开发工具       | HBuilderX            |
| 工具版本       | HBuilderX 3.3.2      |
| 浏览器         | Chrome               |
| 浏览器版本     | 96.0.4664.110        |
| 项目创建方式   | HBuilderX            |

更多关于uni-app vue3 h5 端使用 audio 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

audio组件很久前已不再维护，建议使用能力更强的uni.createInnerAudioContext()，详见文档

更多关于uni-app vue3 h5 端使用 audio 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个错误是由于 uni-app 在 Vue3 环境下对 audio 组件的样式文件引用问题导致的。问题出现在 @dcloudio/uni-components/style/audio.css 这个样式文件在 Vue3 版本中可能不存在或路径发生了变化。

解决方案：

  1. 临时解决方案 - 在 index.html 或页面中添加以下样式来替代缺失的 CSS：
audio {
  display: inline-block;
  vertical-align: baseline;
}

  1. 检查 uni-app 版本：确保使用的是最新版本的 uni-app，这个问题在较新的版本中可能已经修复。

  2. 使用 uni-audio 组件替代：uni-app 提供了专门的音频组件，建议使用：

<uni-audio src="your-audio-url"></uni-audio>

需要在 manifest.json 中引入组件：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}
回到顶部