一個字串，提供關於出現問題的原因以及可能如何修復的詳細、具體的解釋。這不是對 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 之間的區別。