一个字符串，提供关于出现问题的原因以及可能如何修复的详细、具体的解释。这不是对 MediaError.code 属性值的通用描述，而是更深入地探讨此特定错误及其发生情况的细节。如果没有可用的具体详细信息，则此字符串为空。
此示例创建一个 <audio> 元素，为其设置一个错误处理程序，然后让用户点击按钮来选择是将有效音频文件还是缺失文件分配给元素的 src 属性。错误处理程序将日志行输出到屏幕上的一个框中，描述错误，包括 code、message，以及一个对访问者可能比诊断 message 更有用的提示。
<audio controls id="audio"></audio>
<div>
<button id="valid-button">Valid file</button>
<button id="invalid-button">Missing file</button>
<button id="svg-button">Wrong format</button>
</div>
<pre id="log">Logs:</pre>
pre {
white-space: wrap;
border: 1px solid grey;
}
该示例创建一个 <audio> 元素，并允许用户为其分配一个有效的音乐文件，或者一个指向不存在的文件的链接。这使我们能够看到 error 事件处理程序的行为，该处理程序由我们添加到 <audio> 元素本身的事件处理程序接收。
首先，它从代表音频播放器的 HTMLAudioElement 的 error 属性中获取描述错误的 MediaError 对象。将错误的数字 code 与 MediaError 常量进行比较，这些常量最初是未定义的。如果 err.code 等于任何常量，它将创建一个通用提示，并将 MediaError.message 添加到日志行中，为开发人员提供更详细的诊断信息。生成的文本被添加到 <pre> 元素中。
const audioElement = document.getElementById("audio");
const validButton = document.getElementById("valid-button");
const invalidButton = document.getElementById("invalid-button");
const svgButton = document.getElementById("svg-button");
const logMessage = (logLine) => {
const now = new Date();
const timestamp = now.toLocaleTimeString();
document.getElementById("log").innerText += `\n[${timestamp}] ${logLine}`;
};
validButton.addEventListener("click", () => {
audioElement.src = "https://mdn.github.io/shared-assets/audio/guitar.mp3";
});
svgButton.addEventListener("click", () => {
audioElement.src =
"https://mdn.github.io/shared-assets/images/examples/dino.svg";
});
invalidButton.addEventListener("click", () => {
audioElement.src = "no-file-here.mp3";
});
audioElement.onerror = () => {
const err = audioElement.error;
let userHint = "";
switch (err.code) {
case MediaError.MEDIA_ERR_ABORTED:
userHint = "Canceled audio playback.";
break;
case MediaError.MEDIA_ERR_NETWORK:
userHint = "A network error occurred while fetching the audio.";
break;
case MediaError.MEDIA_ERR_DECODE:
userHint = "An error occurred while decoding the audio.";
break;
case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
userHint = "Audio is missing or is an unsupported format.";
break;
default:
userHint += "An unknown error occurred.";
break;
}
const message = err.message || "no message available";
logMessage(`Error code ${err.code} (${err.message}), ${userHint}`);
};
点击“有效文件”按钮开始正常播放，“缺失文件”按钮尝试加载一个缺失的资源，以及“错误格式”按钮尝试将 SVG 文件设置为音频元素的源。比较两种错误情况的日志输出，可以说明 MediaError 的 code 和 message 之间的区别。