如何添加声音到您的网站设计中，而不激怒用户发布者：本站     时间：2019-11-13 09:11:14

偶尔，每个专业人士都会遇到巨大、荒谬的挑战，以至于他们无法控制自己，但他们必须去争取。就像大卫和歌利亚的故事…如果大卫只是觉得无聊歌利亚并没有威胁到他的整个国家。今天我们将来讨论如何把声音放到一个网站设计上，并讨论它如何会做得更好。

是的，我知道，我是那种“永远不要在你的网站上自动播放声音”的人。即便如此，我们还是在这里，我不会通过讨论嵌入式视频、播客或Soundcloud包装器来作弊。我也不会谈论背景音乐，甚至只是环境背景音，因为在我看来，所有这些都是邪恶的。

即使是寻找关于声音处理正确的网站设计的例子也几乎是不可能的，因为所有的搜索结果要么是以音乐为中心的例子，要么是关于你永远不应该使用声音的文章。

但不得不承认，在某些情况下，在你的网站设计和网站应用程序中添加声音，在某些特定的情况下，不会为你可能失去的客户负责，明白吗？这是一种智力练习，不用说，不管你做什么，总有办法让它永远消失。

添加声音的例子

通知和提醒

很少有事情能像高音调的噪音那样让你知道你应该集中注意力，老师的手指甲在黑板上，电话有铃声，猫和婴儿用非常相似的音调来让我们抓狂。早在个人电脑出现之前，界面和产品设计师就已经利用了这一原则。它是有效的。

个人认为这些只适用于聊天对话，或者用户特别要求的通知。当你在等待信息的时候，你需要在信息到来的那一刻集中注意力，一个警报的声音可能会很受欢迎。

例如，从Facebook Messenger和Slack，到新闻聚合器，再到各种约会应用，无所不包。

成功的警报

在我们的网站设计和应用程序设计中，我们可能会更多地使用一种模式，那就是一点声音，告诉用户事情进展顺利。至少对于我们这些游戏玩家来说，每次你赢得一场战斗或完成一个关卡时都会播放胜利音乐。如果你能找到一个简短的“成功”的声音，唤起怀旧和多巴胺的打击，而不只是恼人的人，你可能有一个赢家。

可访问性增强

警报声音都很好，但是如何利用声音的力量来帮助人们解决视力问题呢？当然，也有屏幕阅读器之类的，但是如果你知道你的大部分用户都有视力问题，你可以考虑给他们一些可选的音频提示，让事情变得更简单。

想想按钮上的“点击”声，当你使用滑块上的“点击”和“拖动”按钮时，它的音调会发生变化，这是一种触觉反馈的一般感觉，通常可以用动画表现出来。对于视力不好的人来说，声音是一种非常有用的拟物化形式。

艺术实验

当然，我们有可能在您的投资组合的“实验”部分，或在您的CodePen配置文件中。这是一个满是他们的网站：Chrome音乐实验室。

实现声音的一般技巧

播放声音

JavaScript是唯一的方法，当然，你可以用HTML5嵌入一个声音，但那只会为你提供一个音频播放器。如果你想以一种更实用的方式将声音整合到你的UI中，JS是唯一的方法。意思是，当然，技术上我们仍然有Silverlight，但是谁会回到使用插件呢？

如果你从来没有故意添加声音到你自己的页面，或者只是不太熟悉JS，这里是如何播放声音点击。现在，这已经很好了，但是如果你的用户在寻找按钮时遇到了麻烦呢？您可能想看看本教程的css技巧，如何播放声音时，有人悬停在一个元素。

你还是要尽量不去惹恼别人

总是给用户预留一种方法来关闭声音，下一个问题当然是，默认情况下是否应该将声音设为不。同样，如果你希望有很多视障人士在你的网站设计上，你可以考虑让声音默认播放，然后写上一个大大的“你可以关掉这些声音，请不要关闭页面！”注意前面和中间。

最后

声音文件可以，根据它们的质量，在带宽上给人们造成很大的冲击。使用CDN的带宽，并缓存出所有的声音文件，为您的用户的带宽。接下来，看看听觉样式表，认真思考你的网站设计是如何呈现给屏幕用户的。