欢迎关注路条编程的公众号，通过学习无障碍网页设计这一系列文章，你将会逐步掌握无障碍的代码编写，为图片、音频及视频等非文本内容提供文本替代及创建更好用户体验的 Web 页面相关的基础知识。
今天我们介绍的内容是使用 audio 标签提高音频内容的可访问性。HTML5 的 audio 标签用于呈现音频内容，它也具有语义化特性。audio 控件属性如下所示：
属性 描述src 音频文件路径。autobuffer 设置是否在页面加载时自动缓冲音频。autoplay 设置音频是否自动播放。loop 设置音频是否要循环播放。controls 属性供添加播放、暂停和音量控件。
可以在 audio 控件中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。audio 支持 controls 属性，可以为浏览器提供音频的播放、暂停等音频播放功能。controls 属性是一个布尔属性，只要这个属性出现在 audio 标签中，浏览器就会开启播放控件。以下代码为一个音频控件的使用示例：
<audio id="icode-road-audio" controls><source src="./assets/audio/demo.mp3" type="audio/mpeg" /></audio>
注：主流的音频文件格式有：mp3、wav、ogg 。不同的浏览器对三种格式支持程度不一样。其中 mp3 格式支持度最好。多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。
在文章 “无障碍网页设计：「05」使用 header、nav、footer 标签使屏幕阅读器更容易导航” 代码基础上，在页面 style 区增加音频样式类定义 .card audio , 设置音频控件占模块 4 宽度的 90% , 距离模块边框顶部 20px，调整样式代码如下所示：
<style type="text/css">.card audio {width:90%;margin-top:20px;}</style>
调整模块 4 位置的 html 代码，在模块 4 位置增加一个 audio 标签，设置 controls autoplay loop 多个属性，controls 属性设置 audio 控件显示播放相关功能按钮，autoplay 属性设置页面加载后自动播放音频，loop 属性设置音频循环播放。 然后在 audio 标签内添加一个 source 标签，并且设置 src 属性为 "https://www.icoderoad.com/admin/assets/yqxs.mp3"， type 属性为 "audio/mpeg". 如果浏览器不支持audio 标签，会显示提示性文字 ‘您的浏览器不支持音频标签，这是一首半阳的歌曲 “一曲相思” ’，
注意：页面在本地直接打开时，默认不会自动播放音频，只有将页面部署至应用服务器才会自动播放。请自行比较本地页面和线上页面的效果，线上页面请打开 https://www.icoderoad.com 左下角文章示例目录进行查看。
调整代码如下所示：
<article class="article ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6"><div class="card"><audio id="icode-road-model4-audio" controls autoplay loop ><source src="https://www.icoderoad.com/admin/assets/yqxs.mp3" type="audio/mpeg" autoplay />您的浏览器不支持音频标签，这是一首半阳的歌曲 “一曲相思”</audio></div></article>
保存页面代码，预览页面，整体效果图如下所示：
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
