音频

要添加音频元素，只需在元素搜索中搜索“音频”并拖动音频元素。

一旦你添加了元素，你会在设置窗格中看到:

下设置，你会看到嵌入而且球员．让我们讨论一下嵌入第一。

音频嵌入设置

在嵌入安装时，您将看到一个名为嵌入代码．SoundCloud和TuneIn(仅举几例)等网站允许您在网站上显示他们的音频条目。假设你想在你的网站上的SoundCloud上添加这个音频，只需点击分享按钮:

然后按嵌入模式上的TAB:

复制Embed代码:

然后将该代码粘贴到音频元素的Embed code字段:

然后你会看到音频已经与SoundCloud上的设计和控件一起添加。这与你在网站上嵌入Youtube视频时所做的事情是一样的，只是这个是音频的。

注意:不同的网站有自己的嵌入代码。

最后，你会看到设置最大宽度和播放器宽度以及设置边缘的选项。

音频播放器设置

现在第二个设置选项是球员．

基本上，与使用音频托管网站的嵌入代码不同，你必须输入实际音频文件的URL。如果您托管您的音频文件，无论是在您的网站上还是在CDN提供商上，这是您将选择的选项。

您只需在上输入文件的URL(例如，example.com/audio/music.mp3)来源字段。

现在你会注意到在括号里来源字段，有一个文本说“每行1个。”我来解释一下。

因为有很多设备和浏览器可以浏览你的网站，并想要收听你的音频文件，所以建议你提供多个文件来源。基本上,一个源是以不同的文件格式提供的相同音频文件。如果你有一个MP3文件格式，建议大家放一个OGG还有版本。

这样做的目的是，如果某个浏览器不能播放某种音频格式(例如MP3)，你就可以使用浏览器支持的备份格式。

下面是你如何实现它:

音频控制设置

如果您选择球员设置，添加了一组额外的选项，允许您自定义音频播放器控件。它们是:

控制设置

这里有一个标签的下拉列表预加载内容有三个选项:

1. 没有一个—请求浏览器不预加载音频文件。

2. 音频-请求浏览器在页面加载时立即下载音频文件的元数据。

3. 元数据-请求浏览器下载整个音频文件，不管用户是否要播放它。

注意:并不能100%保证浏览器会遵循这个规则。有些浏览器会忽略这个选项。

您还将看到显示&函数选项，有三个复选框:

1. 先进的

2. 播放-选中后，一旦页面加载，音频文件将自动播放。

3. 循环—如果选中，音频文件将在播放完毕后重新播放。

控制颜色

使用此设置组可设置音频控件的颜色。

控制填充

使用此设置组可设置音频控件的填充。

控制边界

使用此设置组可在音频控件周围设置边框。

控制边界半径

使用这组设置来设置音频控件边界的曲线。

控制框阴影

使用此设置组可在音频控制框周围设置阴影。

时间轨道边界半径

使用此设置组设置时间轨道边界曲线。时间轨道是显示正在播放的音频的时间的线。

时间轨道箱影

使用此设置组在时间轨道框上添加阴影。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看音频元素的现场演示，请单击在这里．

总结

在本文中，您学习了如何使用Audio Element。你也学过嵌入而且球员设置。此外，您已经学习了如何使用音频元素将音频托管网站的代码嵌入到Themeco网站。最后，您学习了如何添加自托管音频文件以及如何自定义控件。