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