uni-app H5使用audio组件打包报错

uni-app H5使用audio组件打包报错

示例代码：

<view>  
    <audio />  
</view>

操作步骤：

  • template中包含audio组件即可复现

预期结果：

  • 应能正常打包

实际结果：

  • 打包抛错

bug描述：

  • 使用audio组件后打包h5报错 “Audio” is not exported by “node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js”


| 开发环境         | 版本号 | 项目创建方式 |
|------------------|--------|--------------|
| Windows          | win10  | HBuilderX    |
| HBuilderX        | 4.08   |              |

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

3 回复

这个组件已经废弃了，推荐改用api

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


是小程序废弃，h5哪里废弃了这个组件？我没有看到官方文档关于这个组件有说明已经废弃https://uniapp.dcloud.net.cn/component/audio.html

在 uni-app 中使用 audio 组件时，如果在打包 H5 时遇到报错，可能是由于某些配置或代码问题导致的。以下是一些可能的原因和解决方法：

1. 检查 audio 组件的使用

确保你在 H5 页面中正确使用了 audio 组件。例如：

<template>
  <view>
    <audio src="https://example.com/audio.mp3" controls></audio>
  </view>
</template>

2. 检查 manifest.json 配置

在 manifest.json 中，确保你正确配置了 H5 相关的设置。例如：

{
  "h5": {
    "template": "public/index.html",
    "devServer": {
      "port": 8080
    }
  }
}

3. 检查打包配置

如果你使用了自定义的 webpack 配置，请确保没有错误地修改了与 audio 相关的配置。

4. 检查依赖

确保你的项目中所有依赖都已正确安装，并且版本兼容。可以尝试删除 node_modules 文件夹并重新安装依赖：

rm -rf node_modules
npm install

5. 检查浏览器兼容性

某些浏览器可能不支持某些 audio 组件的功能，确保你在支持的浏览器中测试。

6. 查看具体报错信息

查看控制台或打包日志中的具体报错信息，根据错误信息进行排查。常见的错误可能包括：

  • 路径问题：确保 audio 的 src 路径正确。
  • 资源加载失败：确保音频文件可以正常访问。
  • 语法错误：检查代码中是否有语法错误。

7. 使用 uni.createInnerAudioContext

如果你不需要直接使用 audio 组件，可以尝试使用 uni.createInnerAudioContext API 来播放音频。例如：

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.play();

8. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app。可以尝试升级 uni-app 和相关依赖：

npm install @dcloudio/uni-app@latest

9. 清理缓存

有时候缓存可能导致打包问题，可以尝试清理缓存后重新打包：

npm cache clean --force
回到顶部