成都小程序开发通常认为网页主要是视觉体验,当然这是事实。但是如果您想在网页中添加声音元素怎么办?如果您不害怕一些简单的HTML,HTML音频标签是一种让用户在您的小程序上播放音频文件的简单方法。
HTML音频标签允许您在网页上播放音频文件,例如音乐、录制的语音或声音效果。该元素允许用户控制音频文件的播放,并支持MP3、WAV和OGG格式。
要创建HTML音频标签,有几种方法可以编写音频标签的语法。
该标签还包含controls属性,该属性显示浏览器对音频文件播放的默认控件(如播放/暂停按钮、时间调整、音量等)。如果删除控件属性,这些控件将不会显示,用户将无法与它们交互。仅当您想创建自己的控制界面时才建议这样做-但最简单的方法是保持浏览器的默认控件可见。
另外,文本“您的浏览器不支持音频元素。”是后备文本,仅在音频元素由于缺乏浏览器支持而无法加载时才会显示。这种情况不太可能发生,因为几乎所有现代浏览器都支持HTML5音频元素,并且不需要后备内容,但以防万一添加它也没有什么坏处。
您还可以编写音频标签,并在其中嵌套一个或多个
默认情况下,HTML音频元素不会播放音频,直到用户通过单击播放按钮控件(或发生Javascript触发器)来触发它。但是,添加autoplay属性将使音频在元素加载后立即播放。
重要的是,自动播放音频(和视频)会导致较差的用户体验和较差的可访问性,因为突然的声音会扰乱用户的流程,还会消耗大量的移动数据。人们通常喜欢在没有输入的情况下突然播放声音,这就是为什么Chromium浏览器(例如Chrome、Edge、Opera)不允许音频自动播放。
但是,如果还使用静音属性,音频将自动播放,我们将在接下来讨论。
如果您想在页面加载后自动播放音频,请使用muted属性。这样,音频将自动播放,用户可以选择打开它。
最后,循环属性使音频文件结束后重新开始,因此它会连续循环播放。例如,如果您想一遍又一遍地演奏甜美的鼓乐,它会很有用。
小程序音频是否方便用户使用?
简短的回答:是的,如果使用得当,音频是用户友好的。
更长的答案:在我看来,正确使用音频可以成就或破坏小程序的用户体验,并且是网络开发和用户体验交叉的一个很好的例子。
例如,如果用户打开您的小程序并听到他们意想不到的声音,这将立即影响他们对您的小程序和品牌的印象。特别是当他们在一家安静的咖啡店里时,尤其是当每个人都能听到响亮的、具有破坏性的音效时。(是的,这发生在我身上。)
这就是为什么我认为允许所有用户控制其小程序的音频是最佳实践。如果您要在页面上展示音频元素,请确保用户能够启动/停止它并静音(如果这是他们的偏好)。出于这个原因,我通常不鼓励在小程序或网络应用程序上伴随通知发出声音,或者默认将其关闭。
我能想到的一个例外是一个旨在流式传输视频或音轨的页面(例如YouTube视频页面)。当用户打开此页面时,他们期望视频或音频自动播放-但这是他规则的一个例外。
此外,在向页面添加音频时,请考虑是否真的有必要打造体验。它会增强体验还是分散体验?如果它是一个移动小程序,这听起来是否证明加载时间和数据使用的额外成本是合理的?
通过成都小程序开发的总结您就了解了音频在HTML页面上如何工作的基础知识。尽管从概念上讲,此元素使用起来很简单,但您可以利用它使您的小程序更具活力和吸引力。只是尽量不要用意外的噪音吓到任何人,好吗?