播放报错音效踩坑日记：从 HTML5 的 Audio 到 UniApp 的 InnerAudioContext

🎵 播放报错音效踩坑日记：从 HTML5 的 Audio 到 UniApp 的 InnerAudioContext

Hello，大家好呀！👋 今天我来和大家分享一个让人又爱又恨的音效播放踩坑故事，讲一讲从 HTML5 的 Audio 到 UniApp 的 createInnerAudioContext 的心路历程，带你看看为什么音效在安卓基座里突然哑巴了，以及如何优雅地解决这个问题！🤯

🌟 起因：报错音效不响了

先说说场景，今天写代码的时候需要在页面上输入错误信息时播放一个提示音效，比如用户输入了无效的单号，就播放个 “滴滴滴” 的音效，提醒用户别再乱搞了。

我的初始代码是这样的，使用了 HTML5 的 Audio：

// 文件路径：common/utils/playErrorSound.js

export function playErrorSound() {
    const audio = new Audio('/static/sound/error.mp3');
    audio.play().catch((err) => {
        console.error("播放声音失败：", err);
    });
}

**在 H5 模式下运行良好，音效响得贼清脆。**🎉

结果当我跑到安卓PDA的自定义基座上测试时，它就彻底哑火了！而且，连一丁点报错都没有。🤦‍♂️

🧐 分析问题，Audio 为什么在安卓不行？

Audio 是 HTML5 的特性： Audio 是 HTML5 的一个接口，它运行在浏览器环境里，依赖 WebView。而安卓基座运行的环境是 原生容器，并不是浏览器。所以 Audio 直接就挂掉了。
资源路径问题：
- 在 H5 模式中，/static/ 是浏览器能直接解析的静态资源目录。
- 在安卓基座中，/static/ 的资源会被打包进 App 的内部，直接用 Audio 是找不到这个文件的。
平台限制：
- 安卓和 iOS 对 HTML5 的支持存在差异。
- UniApp 直接运行在原生容器中，HTML5 的某些特性可能不被支持。

总之，Audio 是无法继续在 App 模式中服役的。😔

🛠 解决方案：UniApp 的 InnerAudioContext

UniApp 为跨平台提供了一个很棒的解决方案——uni.createInnerAudioContext，这是官方推荐的音频播放 API，能同时支持 H5 和 App（安卓、iOS）。

修改后的代码：让安卓 PDA 响起来！

// 文件路径：common/utils/playErrorSound.js

export function playErrorSound() {
    const audio = uni.createInnerAudioContext(); // 创建音频上下文
    audio.src = '/static/sound/error.mp3'; // 设置音频文件路径
    audio.autoplay = true; // 自动播放

    // 监听播放成功
    audio.onPlay(() => {
        console.log("Error sound played successfully.");
    });

    // 监听播放失败
    audio.onError((err) => {
        console.error("播放声音失败：", err);
    });
}

🎯 这个版本的亮点：

兼容性提升：
- uni.createInnerAudioContext 是 UniApp 提供的跨平台 API，支持 H5、安卓和 iOS。
- 不管你是 PDA、手机还是浏览器，都能正常播放音效。
路径问题解决：
- src 设置为 /static/ 路径时，UniApp 会正确解析并加载文件（确保文件放在 static 目录下）。
错误处理：
- 添加了 onError 监听，万一文件路径不对或者音频格式不支持，可以及时发现问题。

🤔 为什么旧版本不行？

回顾一下旧版本的代码，问题出在哪？

export function playErrorSound() {
    const audio = new Audio(require('@/static/sound/error.mp3'));
    audio.play().catch((err) => {
        console.error("播放声音失败：", err);
    });
}

主要问题：

Audio 不兼容安卓基座：
- 旧代码依赖浏览器环境，而安卓基座中并没有完整的 HTML5 支持。
require('@/static/sound/error.mp3') 的路径问题：
- 在 H5 模式下可以正常解析，但在 App 模式中这个路径不对。
缺少错误监听：
- 没有 onError 或其他报错机制，导致问题排查更困难。

🚀 总结：如何优雅地实现跨平台音效？

优先选择 UniApp 官方 API：
- 使用 uni.createInnerAudioContext 代替 HTML5 的 Audio。
- 这样不仅兼容 H5，还能支持 App 和小程序。
检查资源路径：
- 确保音效文件放在 static 目录下，路径设置为 /static/sound/error.mp3。
调试音效播放：
- 添加 onPlay 和 onError 日志，确认音效是否被正确加载和播放。

🌟 彩蛋：路径问题引发的思考

今天还遇到了另一个路径问题，在 manifest.json 中配置了接口转发代理。开发环境下 /pawlapi 转发到后端的 http://localhost:8080/pawl。

这里我一开始直接把 baseURL 改成了 http://localhost:8080/pawl，结果开发环境的代理功能失效了，前端直接报了 跨域问题。最后通过设置正确的 转发路径 /pawlapi 解决了这个问题。

经验总结：

在开发环境中，务必使用代理转发，不要直接改为后端接口的完整路径。
确保 manifest.json 和 baseURL 的配置匹配。

🎉 今天的收获

音效播放：从 HTML5 的 Audio 到 UniApp 的 createInnerAudioContext。
跨平台兼容性的重要性：要对 H5 和 App 的环境差异心中有数。
路径配置的细节：理解代理转发和资源路径的解析规则。