数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML文档中嵌入音频元素？
HTML 有一个音频元素，可以用来在 HTML 文档中嵌入音频元素。通过在网页上添加音轨或音效，可以改善用户体验，在 HTML 文档中包含音频元素。只需在我们的 HTML 代码中包含 <audio> 元素，并使用“src”属性指定音频文件源即可嵌入音频文件。还可以添加其他属性，例如“controls”启用音频播放控件，“autoplay”自动开始播放。我们可以通过这些简单的步骤轻松地将音频添加到您的 HTML 网页，以提高受众参与度。
语法
<audio> <source src= "" type= "audio/mp3"> </source> </audio>
HTML 元素 <audio> 用于在文档中嵌入声音内容。它可以拥有一个或多个音频源，这些源由 src 属性或 <source> 元素表示。
<audio controls>
音频元素提供一个名为 controls 的属性，可以启用音量增大/减小、时间长度、菜单选项等。
<audio playback>
HTML 音频元素中的播放属性 simply 启用给定链接的任何声音的自动播放。
示例 1
在下面的示例中，我们将使用音频元素将音频文件嵌入到 HTML 文档中。音频有一个名为 controls 的属性，它会向音频元素添加播放控件。这允许用户播放、暂停和调整音量。页面上还包含标题和段落，其中包含有关音乐在冥想中作用的消息。网页背景颜色为橙色，标题文字颜色为白色。
<!DOCTYPE html>
<html>
<title>Embed audio using HTML</title>
<head>
</head>
<body style="background-color: orange;">
<center>
<h1 style="color:white;"> My world Music </h1>
<audio controls>
<source
src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
type="audio/mp3">
</source>
</audio>
</center>
</body>
</html>
示例 2
在下面的示例中，我们将使用名为 autoplay 的音频属性，该属性提供自动播放功能来播放声音。然后它添加 source 元素，其中包含属性 - src（粘贴音频链接）和 type（给出音频文件类型）。为了使网页看起来更好，它在 body 元素中添加背景图像并在网页上获取输出。
<!DOCTYPE html>
<html>
<title>Embed audio using HTML</title>
<head>
</head>
<body style="background-image: url('https://images.pexels.com/photos/11356284/pexels-photo-11356284.jpeg?auto=compress&cs=tinysrgb&w=450&h=750&dpr=1'); background-repeat: no-repeat; width: 153px; height: 86px;";>
<center>
<h1 style="color: white;">Meditation Music with autoplay feature</h1>
<audio autoplay controls>
<source src="https://audio-previews.elements.envatousercontent.com/files/304799645/preview.mp3?response-content-disposition=attachment%3B+filename%3D%22XYFTLYY-this-is-meditation.mp3%22"
type="audio/mp3">
</source>
</audio>
</center>
</body>
</html>
结论
我们了解了音频元素中的 src 属性，它为用户提供不同的功能。controls 属性添加音量按钮、暂停、继续等，而 autoplay 控件由布尔属性定义，该属性将自动开始播放视频。例如，此类型的代码通常用于播客、音乐或任何组织。
3K+ 次查看
