微信小程序 - 解决报错 Failed to load because no supported source was found.（小程序AudioContext创建音频/播放音乐等操作时出现报错）

### 浏览器中处理 `NotSupportedError` 错误的方法 当浏览器抛出 `Uncaught (in promise) NotSupportedError: Failed to load because no supported source was found.` 这类错误时，通常意味着尝试加载的内容源不受支持或未能成功定位资源。具体原因可能涉及多种因素。 对于视频文件而言，如果从服务器获取的数据量为零字节，则表明传输过程中出现了问题[^1]。此时客户端试图解析并播放一个实际上为空的媒体流，自然会导致失败。因此，在前端逻辑里加入对返回数据大小的有效性验证是非常必要的： ```javascript async function checkVideoValidity(url){ try { const response = await fetch(url); if (!response.ok || !(await response.blob()).size > 0) throw new Error('Invalid video file'); console.log("Valid Video"); } catch(error){ console.error(`Failed to validate video at ${url}:`, error.message); } } ``` 另外一种常见的情况是在 HTML5 `<video>` 或者其他多媒体标签内指定的 media URL 并不存在于预期位置，或是其 MIME 类型不符合要求。针对这种情况，可以通过监听 `error` 事件来捕获异常状况，并采取相应措施防止程序崩溃[^2]。 ```html <video id="my-video"> <source src="path/to/video.mp4" type="video/mp4"/> </video> <script> document.getElementById('my-video').addEventListener('error',function(event){ let target=event.target; switch(target.networkState){ case 3://MEDIA_ERR_SRC_NOT_SUPPORTED alert("The provided video format is not supported."); break; default: alert("An unknown error occurred while trying to play the video."); } }); </script> ``` 最后值得注意的是不同类型的 Web 应用框架可能会有不同的实现细节。例如某些特定场景下的插件如 EasyWasmPlayer 可能会有自己独特的配置选项影响着最终的表现形式[^3]；而对于基于 uni-app 开发的应用来说，确保静态资源路径设置无误也是解决问题的关键之一[^4]。 通过上述方法可以在很大程度上减少由于资源缺失而导致的加载失败现象的发生频率，提高用户体验质量。