如何在 Chrome 上自动播放音频?
随着互联网应用的不断增长，在网页浏览器上启用音频自动播放功能已成为网页设计师日益重要的技能。然而，对于缺乏必要技术能力的人来说，在 Chrome(广泛使用的网页浏览器之一)上自动播放音频可能是一项艰巨的任务。不过，只要配备合适的工具并了解基本技术，在 Chrome 上自动播放音频的过程就相当简单。在本文中，我们将深入探讨在 Chrome 上自动播放音频的系统方法，涵盖完成此任务所需的相关 HTML、JavaScript 和 Chrome 特定设置。读完本文后，读者将掌握在 Chrome 上自动播放音频所必需的方法，从而提升为用户打造引人入胜、身临其境的网页体验的能力。
我们将介绍在 Chrome 上自动播放音频的四种不同方法 -
使用 autoplay 属性
使用 <iframe> 标签
使用 preload 属性
使用循环播放
自动播放属性
"autoplay"特性是 HTML 中用于"audio"和"video"标签的功能，用于在网页加载期间自动开始播放多媒体文件，而无需用户按下播放按钮。此特性通常用于包含丰富多媒体内容的网站，通过提供无需任何用户输入即可立即访问音频或视频资料的功能，从而提供更便捷、更令人满意的用户体验。
<iframe> 标签
<iframe> 元素是一个 HTML 标签，用于将另一个 HTML 文档或网页插入到现有文档中。"iframe"代表"内联框架"。它允许您在自己的网页范围内展示外部资料，例如网页、视频、地图或文档。<iframe> 中展示的资料被限制在主网页内的特定窗口或框架内。<iframe> 标签需要使用 src 属性来指定要展示内容的 URL。此外，它还支持宽度、高度、沙盒和允许全屏等补充属性，以控制嵌入内容的呈现和行为。
HTML 中 <iframe> 标签的语法如下 -
<iframe src="URL" width="width" height="height" frameborder="0" scrolling="auto"></iframe>
<iframe> 标签中使用的关键属性为 -
src - 指定要在 iframe 中显示的内容的 URL。
width - 指定 iframe 的宽度(以像素为单位)或父容器的百分比。
height - 指定 iframe 的高度(以像素为单位)或父容器的百分比。
frameborder - 设置是否在 iframe 周围显示边框。使用 0 隐藏边框，使用 1 显示边框。
scrolling - 确定是否显示 iframe 内容的滚动条。使用 auto 可在必要时显示滚动条，使用 yes 则始终显示滚动条。
方法 1:使用自动播放属性
使用 autoplay 属性在 Google Chrome 中启用音频自动播放 -
确保音频文件为受支持的格式，并托管在允许自动播放的网站上。
将 audio 标签添加到 HTML 代码中，指定音频文件的来源并设置 autoplay="autoplay"。
使用 control 属性配置音频播放器以允许用户交互。
浏览器将在网页加载时自动播放音频。
考虑提供其他播放选项或允许手动控制，以适应用户偏好和潜在的侵犯版权行为。
示例
以下是完整代码，我们将在这个例子中看一下 -
<!DOCTYPE html>
<html>
<head>
<title>How to autoplay audio on chrome?</title>
</head>
<body>
<h4>How to autoplay audio on chrome?</h4>
<audio id="audio" controls autoplay>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
在上述代码中，我们为"audio"标签附加了"autoplay"属性，这将在页面首次加载时启动声音文件的自动播放。此外，我们还插入了"controls"属性，该属性为音频播放器提供了正常运行所需的必要工具，例如播放、暂停、音量等。
方法 2:使用 iframe 标签
要使用 iframe 标签在 Chrome 上自动播放音频，请按以下步骤操作:找到音频文件网址，在 HTML 文档中创建 iframe 元素，将 iframe 标签中的 src 属性设置为音频文件网址，添加 allow 属性并将其值设置为"autoplay"以进行自动播放，并使用 CSS 样式或其他属性(例如宽度、高度和控件)自定义 iframe 的外观和功能。
示例
在以下代码片段中，将路径替换为您要自动播放的音频文件的实际网址或相对路径。
需要注意的是，自动播放功能可能会受到某些浏览器设置或策略的限制，尤其是在 Chrome 中。Chrome 引入了自动播放策略，以防止不必要的媒体播放。但是，自动播放行为可能因用户偏好和浏览器配置而异。
<!DOCTYPE html> <html> <head> <title>How to autoplay audio on Chrome?</title> </head> <body> <h4>How to autoplay audio on Chrome?</h4> <iframe src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" allow="autoplay" width="800" height="100"></iframe> </body> </html>
方法 3:使用 Preload 属性
要使用 preload 属性在 Chrome 上自动播放音频，请添加一个 HTML 音频元素，并使用 src 属性指定音频文件来源。将 preload 属性设置为"auto"，以便在解析后立即下载，从而提高自动播放的可能性。或者，将其设置为"metadata"，以便在用户启动播放之前仅加载必要信息，例如时长和曲目详情。
示例
以下是我们将在本示例中查看的完整代码 -
<!DOCTYPE html>
<html>
<head>
<title>How to autoplay audio on Chrome?</title>
</head>
<body>
<h4>How to autoplay audio on Chrome?</h4>
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" preload="auto" autoplay controls>
Your browser does not support the audio element.
</audio>
</body>
</html>
方法 4:使用循环
要实现 Chrome 浏览器特有的循环自动播放音频功能，我们可以使用 HTML5 音频元素。我们需要在 HTML 文档中使用 <audio> 标签创建一个音频元素。在 <audio> 标签内，我们使用 src 属性指定音频文件的来源。此外，我们还可以添加 loop 属性来确保音频持续循环播放。
示例
以下是我们将在本例中查看的完整代码 -
<!DOCTYPE html> <html> <head> <title>How to autoplay audio on Chrome?</title> </head> <body> <h4>How to autoplay audio on Chrome?</h4> <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" autoplay loop controls></audio> </body> </html>
提供的代码片段演示了 HTML(一种用于构建网页的标记语言)，重点介绍了如何在 Chrome 浏览器中自动播放音频。该代码包含一个 doctype 声明、包含 html 标签的 header 部分、一个包含 title 元素的 head 部分以及一个包含副标题和 audio 元素的 body 部分。audio 元素的 src 属性指定音频文件的 URL，而 autoplay 属性触发自动播放。loop 属性确保音频连续播放，controls 属性添加音频控件。执行后，网页将在 Chrome 浏览器中渲染，自动播放指定的音频文件，从而提供无缝的用户体验。
结论
总而言之，使用上述方法在 Google Chrome 浏览器中实现音频自动播放是有效的。然而，使用此属性时务必谨慎，因为它可能会给某些用户带来困扰。通过谨慎地执行此策略，用户可以优化其在 Web 浏览器上的音频播放体验。最终，这强调了及时了解 Google Chrome 的最新属性和操作以充分利用其功能的重要性。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
