随着 Web 技术的发展和普及，前端界的图片和视频组件已经相当成熟，而音频组件的开发也日渐成熟。越来越多的网站和应用使用音频以增强用户体验，但一些 iOS 设备上的浏览器无法自动播放音频组件，这给前端开发者带来了一定的困扰。本文将介绍如何使用 Custom Elements 解决 iOS 设备上自动播放音频组件的问题，同时提供相应的代码示例。
Custom Elements 简介
Custom Elements 允许开发者创建独立的 HTML 标签，这些标签可以不受浏览器内置标签的限制，例如，我们可以在页面上创建一个名为 <my-audio> 的自定义标签，并在其中添加自定义属性和方法。同时，可以使用 JavaScript 来扩展这些自定义标签的行为。使用 Custom Elements 对于创建自定义组件和模块化 Web 应用程序非常实用。
Custom Elements API 定义了以下方法和属性：
define(): 定义自定义元素构造函数。connectedCallback(): 当元素首次被插入文档 DOM 时被调用。attributeChangedCallback(): 在元素添加、删除、修改自身属性时被调用。disconnectedCallback(): 当元素从文档 DOM 中删除时被调用。
Custom Elements 的使用可以通过以下的包装器库来简化：
- Polymer : Google 推出的 Web 组件库。
- Bosonic : 一套轻量级的原生 Web 组件库。
- Skate : 一套用于创建 Web 组件的库。
在本文中，我们将以上述 Bosonic 组件库为例来说明如何解决自动播放音频组件问题。
iOS 设备上的音频组件问题
在 iOS 设备上，Safari 允许用户主动播放媒体，但不允许自动播放。这意味着如果您在 iOS 设备上使用了一个自动播放的音频组件，则该组件将不会播放。相反，用户必须先使用 UI 控件（例如播放按钮），然后才能播放。这是从 iOS 10 以来的限制。
解决 iOS 设备上的音频组件问题
为了解决 iOS 设备上的音频组件问题，我们需要使用以下的技巧：
- 在用户操作后自动播放；
- 必要时移动播放组件以激活音频播放；
- 模拟用户操作以启动播放。
在用户操作后自动播放
我们可以使用 JavaScript 来捕获用户操作，并在操作后自动生成音频组件实例，然后通过调用 play() 函数进行自动播放。
window.addEventListener('touchstart', function () {
var audio = document.querySelector('my-audio');
if (audio) audio.play();
});可以看到，我们在用户触摸设备时监听 touchstart 事件，并使用 querySelector 函数获取自定义音频组件。然后，判断是否存在该组件，并在其存在时调用 play() 函数。
必要时移动播放组件以激活音频播放
iOS 设备在用户交互的情况下才会播放音频组件。当我们在网页中有特定位置或交互元素与音频组件相关时，可以在交互事件发生时移动音频组件以激活音频播放。下面是一个示例：
var container = document.querySelector('#container');
var audio = document.querySelector('my-audio');
container.addEventListener('touchend', function () {
audio.style.display = 'none';
container.appendChild(audio);
audio.style.display = 'block';
});在这个示例中，我们获取包含 my-audio 组件的容器，并为其添加 touchend 事件监听器。当收到事件后，我们移动该组件以进行播放。将音频组件设置为 display:none 可以防止出现不必要的闪烁和动态效果，并通过 appendChild 将该组件移动到容器末尾。最后，将组件的样式设置为 display:block，以便播放该音频。
模拟用户操作以启动播放
在 iOS 设备上，使用 JavaScript 播放音频需要符合以下几点要求：
- 页面必须在用户交互的情况下加载。
- 元素、音频和视频必须通过用户控制进行播放。
对于自定义元素，它们不受 iOS 限制并且可以播放多个音频组件。我们可以通过模拟用户操作来启动自动播放。下面是一个模拟用户操作的示例：
document.querySelector('#play-button').addEventListener('click', function (event) {
event.stopPropagation();
var audio = document.querySelector('#my-audio');
audio.currentTime = 0;
audio.play();
});在这个示例中，我们为播放按钮添加了 click 监听器，并获取 selfHosted-audio 元素。在播放该音频组件时，我们将音频组件的 currentTime 设置为 0，并调用 play() 函数来启动播放音频。在这种情况下，播放按钮用于触发音频组件的播放，而非在用户交互的情况下。这个技巧避开了 iOS 自动播放限制，不会影响 UI 的触发效果。
最终例子
-- -------------------- ---- -------
--------- -----
------
------
------- ------ -------- ---- --------
----- ----------------
----- --------------- ---------------------------- -------------------
------- --------------------------------------------------------------
-------
-------- -
-------- ---- --
----------- -------
-------- ------
------- --- ----- -----
----------------- -----
-
------ -
----------------- --------
------- -----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-
--------
-------
------
----------
------ --------------- -----------------
------- ----------------------------
-----------
--------
---------------------------------------------------------------- -------- ------- -
------------------------
--- ----- - ------------------------------------
----------------- - --
-------------
---
------------------------------------- -------- -- -
--- ----- - -----------------------------------
-- ------- -------------
---
--- --------- - -------------------------------------
--- ----- - -----------------------------------
-------------------------------------- -------- -- -
------------------- - -------
-----------------------------
------------------- - --------
---
---------
-------
-------总结
在本文中，我们了解了 Custom Elements，介绍了 iOS 设备上的音频组件问题，以及如何使用 Custom Elements 来解决自动播放音频组件的问题。需要注意，上述技巧只是一个示例，您可以根据您的需求和场景选择相应的策略。同时，学习 Custom Elements 还有更多内容剩余，希望本文可以为大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f45390f6b2d6eab3d629a7