很多 Web 应用需要实时播放音频，比如一个音乐播放器或者一个在线会议系统。传统的做法是使用 WebSocket，但是该协议没有专门为音频流设计，而且代码较为复杂。我们可以使用 Server-sent Events（SSE）来实现更简单和高效的音频播放。
什么是 Server-sent Events（SSE）
Server-sent Events（SSE）是一种浏览器与服务器通信的技术，允许服务器向浏览器发送事件流。与 WebSocket 不同，SSE 是单向通信，即服务器可以推送数据给浏览器，但是浏览器无法向服务器发送消息。SSE 是 HTML5 标准的一部分，目前得到了大多数主流浏览器的支持。
SSE 实现实时音频流的技术细节
实现一个 SSE 客户端的第一步是创建一个 EventSource 对象。在该对象接收到服务器推送的消息时，触发一个回调函数来处理这些事件。我们可以使用事件监听器来处理这些事件，并在这些事件上发送音频流。
SSE 服务器应该使用 chunked 编码来发送音频流，因为这样可以使数据流保持在打开的连接上，并始终保持连接处于活动状态。这意味着服务器可以在需要时立即发送数据，而不必等待所有数据都准备好。
另一个重要的技术细节是为 SSE 连接设置适当的超时时间，这将确保服务器可以在一段时间内保持连接处于活动状态，而不会因为连接超时而关闭连接。超时时间应该足够长，以便即使在数据不再流动时，也可以使连接保持活动状态。如果超时时间设置得太短，则可能会导致连接断开。
使用 SSE 实现实时音频播放的最佳实践
下面是使用 SSE 实现实时音频播放的最佳实践：
创建 EventSource 对象并将其连接到 SSE 服务器。
var source = new EventSource('/stream');处理接收到的事件，并在这些事件上发送音频流。
source.onmessage = function(event) { var audioBlob = new Blob([event.data], {type: 'audio/mp3'}); var audioURL = URL.createObjectURL(audioBlob); var audio = new Audio(audioURL); audio.play(); }在 SSE 服务器上，使用末尾添加的数据流式传输音频。
-- -------------------- ---- ------- --- --------- --- - ------ --- ----------- ---- --------------------- ----- -- -- ----- ----- ---- - ------------------ -- --- ----- ----- ----- ------- - - ---- - ------- ---------------------- ------ -------------------- -----------------------------为 SSE 连接设置适当的超时时间。
如果出于某种原因需要重新连接 SSE 流，则可以使用下面的代码清除音频：
source.close(); audio.pause(); audio.remove();
示例代码
下面是使用 SSE 实现实时音频播放的完整示例代码：
客户端 HTML：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------ ---------------
-------
------
------- ----------------------------- ------------------
------- --------------------------- ------------------
---- ------------------
-------
--------
--- -------
--- ------
-------- ------------- -
-- ---------- - ------- -
------ - --- -----------------------
------------- - ---------- -
---------------- - ---------------
-
-------------- - ---------- -
---------------- - ---------- -------
-
---------------- - --------------- -
--- --------- - --- ------------------ ------ --------------
--- -------- - -------------------------------
-- --------- -
--------------
---------------
-
----- - --- ----------------
-------------
-
-
-------- ------------ -
-- ---------- -
---------------
------ - -----
-
-- --------- -
--------------
---------------
-
---------------- - ---------- ---------
-
---------
-------SSE 服务器 Python：
-- -------------------- ---- -------
---- ----- ------ ------ --------
------ ----
--- - ---------------
---------------
--- --------
------ ----------------------------------
---------------------
--- ---------
---------- - ----
---------- - ---
--------------- - ----------------
--- -----------
---- --------------------- ----- -- --
----- -----
---- - ------------------
-- --- -----
-----
----- ------- - - ---- - -------
----------------------
------ -------------------- -----------------------------
-- -------- -- -----------
---------总结
使用 SSE 实现实时音频播放可以简单高效，而且代码量较小。本文介绍了使用 SSE 实现实时音频流的技术细节，并提供了示例代码。SSE 也可以用于其他基于流的应用程序，如股票行情更新和即时通讯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9d261f6b2d6eab34f9e07