如何在 HTML 文档中嵌入音频元素?

htmlweb developmentfront end technology更新于 2024/7/24 22:36:17

HTML 包含一个音频元素，可用于在 HTML 文档中嵌入音频元素。通过在网页中添加音轨或音效，可以提升用户体验。只需在 HTML 代码中添加 <audio> 元素，并使用"src"属性指定音频文件源即可嵌入音频文件。您还可以添加其他属性，例如"controls"用于启用音频播放控件，以及"autoplay"用于自动启动播放。我们可以通过这些直接步骤轻松地将音频添加到您的 HTML 网页，以提升受众参与度。

语法

<audio>
<source src= "" type= "audio/mp3"> </source>
</audio>

HTML 元素 <audio> 用于在文档中嵌入声音内容。它可以包含一个或多个音频源，由 src 属性或 <source> 元素表示。

<audio controls>

audio 元素提供了一个名为 control 的属性，用于控制音量的增/减、播放时长、菜单选项等。

<audio playing>

HTML audio 元素中的 playing 属性仅用于启用给定链接中任何声音的自动播放。

示例 1

在下面的示例中，我们将使用 audio 元素将音频文件嵌入到 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 的音频属性，该属性提供自动播放功能来播放声音。然后，它会添加包含属性 src(用于粘贴音频链接)和 type(用于指定音频文件类型)的 source 元素。为了更好地呈现网页效果，它会在 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>