如何添加聲音到您的網站設計中，而不激怒用戶發(fā)布者：本站     時間：2019-11-13 09:11:14

偶爾，每個專業(yè)人士都會遇到巨大、荒謬的挑戰(zhàn)，以至于他們無法控制自己，但他們必須去爭取。就像大衛(wèi)和歌利亞的故事…如果大衛(wèi)只是覺得無聊歌利亞并沒有威脅到他的整個國家。今天我們將來討論如何把聲音放到一個網站設計上，并討論它如何會做得更好。

是的，我知道，我是那種“永遠不要在你的網站上自動播放聲音”的人。即便如此，我們還是在這里，我不會通過討論嵌入式視頻、播客或Soundcloud包裝器來作弊。我也不會談論背景音樂，甚至只是環(huán)境背景音，因為在我看來，所有這些都是邪惡的。

即使是尋找關于聲音處理正確的網站設計的例子也幾乎是不可能的，因為所有的搜索結果要么是以音樂為中心的例子，要么是關于你永遠不應該使用聲音的文章。

但不得不承認，在某些情況下，在你的網站設計和網站應用程序中添加聲音，在某些特定的情況下，不會為你可能失去的客戶負責，明白嗎？這是一種智力練習，不用說，不管你做什么，總有辦法讓它永遠消失。

添加聲音的例子

通知和提醒

很少有事情能像高音調的噪音那樣讓你知道你應該集中注意力，老師的手指甲在黑板上，電話有鈴聲，貓和嬰兒用非常相似的音調來讓我們抓狂。早在個人電腦出現(xiàn)之前，界面和產品設計師就已經利用了這一原則。它是有效的。

個人認為這些只適用于聊天對話，或者用戶特別要求的通知。當你在等待信息的時候，你需要在信息到來的那一刻集中注意力，一個警報的聲音可能會很受歡迎。

例如，從Facebook Messenger和Slack，到新聞聚合器，再到各種約會應用，無所不包。

成功的警報

在我們的網站設計和應用程序設計中，我們可能會更多地使用一種模式，那就是一點聲音，告訴用戶事情進展順利。至少對于我們這些游戲玩家來說，每次你贏得一場戰(zhàn)斗或完成一個關卡時都會播放勝利音樂。如果你能找到一個簡短的“成功”的聲音，喚起懷舊和多巴胺的打擊，而不只是惱人的人，你可能有一個贏家。

可訪問性增強

警報聲音都很好，但是如何利用聲音的力量來幫助人們解決視力問題呢？當然，也有屏幕閱讀器之類的，但是如果你知道你的大部分用戶都有視力問題，你可以考慮給他們一些可選的音頻提示，讓事情變得更簡單。

想想按鈕上的“點擊”聲，當你使用滑塊上的“點擊”和“拖動”按鈕時，它的音調會發(fā)生變化，這是一種觸覺反饋的一般感覺，通?？梢杂脛赢嫳憩F(xiàn)出來。對于視力不好的人來說，聲音是一種非常有用的擬物化形式。

藝術實驗

當然，我們有可能在您的投資組合的“實驗”部分，或在您的CodePen配置文件中。這是一個滿是他們的網站：Chrome音樂實驗室。

實現(xiàn)聲音的一般技巧

播放聲音

JavaScript是唯一的方法，當然，你可以用HTML5嵌入一個聲音，但那只會為你提供一個音頻播放器。如果你想以一種更實用的方式將聲音整合到你的UI中，JS是唯一的方法。意思是，當然，技術上我們仍然有Silverlight，但是誰會回到使用插件呢？

如果你從來沒有故意添加聲音到你自己的頁面，或者只是不太熟悉JS，這里是如何播放聲音點擊?，F(xiàn)在，這已經很好了，但是如果你的用戶在尋找按鈕時遇到了麻煩呢？您可能想看看本教程的css技巧，如何播放聲音時，有人懸停在一個元素。

你還是要盡量不去惹惱別人

總是給用戶預留一種方法來關閉聲音，下一個問題當然是，默認情況下是否應該將聲音設為不。同樣，如果你希望有很多視障人士在你的網站設計上，你可以考慮讓聲音默認播放，然后寫上一個大大的“你可以關掉這些聲音，請不要關閉頁面！”注意前面和中間。

最后

聲音文件可以，根據它們的質量，在帶寬上給人們造成很大的沖擊。使用CDN的帶寬，并緩存出所有的聲音文件，為您的用戶的帶寬。接下來，看看聽覺樣式表，認真思考你的網站設計是如何呈現(xiàn)給屏幕用戶的。