是否可以在 div 悬停时从 .m3u 源流式传输？

Posted 2023-03-15

【中文标题】是否可以在 div 悬停时从 .m3u 源流式传输？

【英文标题】：Is it possible to stream from a .m3u source on hover of a div?

【发布时间】：2014-11-07 15:50:17

【问题描述】：

我正在开发一个有关世界语言的交互式网站。 计划的一部分是制作一张世界地图，当不同的国家悬停时，它会发出声音。重点是语言的声音。

我想嵌入来自每个国家/地区的网络广播流。只要将鼠标悬停在一个国家上空，就会播放流。当光标离开国家轮廓时它会停止。

Codewise 的方法是监听鼠标事件，例如使用 jQuery 并将流分配给函数。

我设法将 mp3 文件嵌入到我服务器上的一个单独目录中。如何用 m3u 做到这一点？据我所知，html5 无法处理 m3u 流。

感谢您的帮助。

【参考方案1】：

M3U 不是流，而是播放列表。如果您在文本编辑器中打开一个 M3U 文件，您会看到它是 just a list of URLs。

#EXTM3U
http://example.com/stream
http://example.com/stream2

出于您的目的，删除任何以井号 # 开头的行，然后使用文件中的 URL 作为 HTML5 音频的来源。

另请注意，还有另一个使用 M3U8 的标准（同样的，只是 UTF-8 编码）HTTP Live Streaming (HLS)，但目前没有广泛的浏览器支持。现在，如果您偶然发现一个 M3U 文件，可以肯定地说您正在查看一个 HTTP 渐进式流，通常由 SHOUTcast 或 Icecast 提供。不过，这可能会在未来发生变化。

【讨论】：

我完全按照你说的做了，确实 标签从 webradio 的服务器中提取 mp3 流。现在我有以下问题。既然是流，就没有尽头。当鼠标离开该区域时是否有可能停止流？

@YuliyanIlev 是的，只需删除<audio> 元素。如果你只是停止元素并将其留在页面上，它将继续下载，浪费内存。

我使用了jQuery的.remove功能。现在正在发生奇怪的事情。第一次工作。当光标离开该区域时，流停止。第二次继续播放。有两个或更多实例在播放。即使在页面重新加载时它也不会停止。

我会在删除它之前调用停止它。不过，它应该可以在没有这个的情况下工作......听起来你还有其他事情要做。如果您可以将代码缩小到可重现的示例，我建议为此发布一个新问题，然后在此处留下一个链接，我会查看它。

感谢您的快速回复。这对我帮助很大！我在这里找到了问题的答案：link 有趣的是，资源列表中没有流。这是否意味着只有在流式传输音频时才有缓冲？这可以与一页上的 150 个无线电流一起使用吗？