成都小程序設計通常認為網頁主要是視覺體驗，當然這是事實。但是如果您想在網頁中添加聲音元素怎么辦？如果您不害怕一些簡單的HTML，HTML音頻標簽是一種讓用戶在您的網站上播放音頻文件的簡單方法。
HTML音頻標簽允許您在網頁上播放音頻文件，例如音樂、錄制的語音或聲音效果。該元素允許用戶控制音頻文件的播放，并支持MP3、WAV和OGG格式。
要創建HTML音頻標簽，有幾種方法可以編寫音頻標簽的語法。
該標簽還包含controls屬性，該屬性顯示瀏覽器對音頻文件播放的默認控件（如播放/暫停按鈕、時間調整、音量等）。如果刪除控件屬性，這些控件將不會顯示，用戶將無法與它們交互。僅當您想創建自己的控制界面時才建議這樣做-但最簡單的方法是保持瀏覽器的默認控件可見。
另外，文本“您的瀏覽器不支持音頻元素。”是后備文本，僅在音頻元素由于缺乏瀏覽器支持而無法加載時才會顯示。這種情況不太可能發生，因為幾乎所有現代瀏覽器都支持HTML5音頻元素，并且不需要后備內容，但以防萬一添加它也沒有什么壞處。
您還可以編寫音頻標簽，并在其中嵌套一個或多個<source>標簽。如果您想要包含多個音頻文件源作為后備，以防瀏覽器不支持列出的第一個文件源，這非常有用。如果列出了多個源，瀏覽器將播放它支持的第一個文件。
默認情況下，HTML音頻元素不會播放音頻，直到用戶通過單擊播放按鈕控件（或發生JavaScript觸發器）來觸發它。但是，添加autoplay屬性將使音頻在元素加載后立即播放。
重要的是，自動播放音頻（和視頻）會導致較差的用戶體驗和較差的可訪問性，因為突然的聲音會擾亂用戶的流程，還會消耗大量的移動數據。人們通常喜歡在沒有輸入的情況下突然播放聲音，這就是為什么Chromium瀏覽器（例如Chrome、Edge、Opera）不允許音頻自動播放。
但是，如果還使用靜音屬性，音頻將自動播放，我們將在接下來討論。
如果您想在頁面加載后自動播放音頻，請使用muted屬性。這樣，音頻將自動播放，用戶可以選擇打開它。
最后，循環屬性使音頻文件結束后重新開始，因此它會連續循環播放。例如，如果您想一遍又一遍地演奏甜美的鼓樂，它會很有用。
網站音頻是否方便用戶使用？
簡短的回答：是的，如果使用得當，音頻是用戶友好的。
更長的答案：在我看來，正確使用音頻可以成就或破壞網站的用戶體驗，并且是網絡開發和用戶體驗交叉的一個很好的例子。
例如，如果用戶打開您的網站并聽到他們意想不到的聲音，這將立即影響他們對您的網站和品牌的印象。特別是當他們在一家安靜的咖啡店里時，尤其是當每個人都能聽到響亮的、具有破壞性的音效時。（是的，這發生在我身上。）
這就是為什么我認為允許所有用戶控制其網站的音頻是最佳實踐。如果您要在頁面上展示音頻元素，請確保用戶能夠啟動/停止它并靜音（如果這是他們的偏好）。出于這個原因，我通常不鼓勵在網站或網絡應用程序上伴隨通知發出聲音，或者默認將其關閉。
我能想到的一個例外是一個旨在流式傳輸視頻或音軌的頁面（例如YouTube視頻頁面）。當用戶打開此頁面時，他們期望視頻或音頻自動播放-但這是他規則的一個例外。
此外，在向頁面添加音頻時，請考慮是否真的有必要打造體驗。它會增強體驗還是分散體驗？如果它是一個移動網站，這聽起來是否證明加載時間和數據使用的額外成本是合理的？
通過成都小程序設計的總結您就了解了音頻在HTML頁面上如何工作的基礎知識。盡管從概念上講，此元素使用起來很簡單，但您可以利用它使您的網站更具活力和吸引力。只是盡量不要用意外的噪音嚇到任何人，好嗎？
