html5音频直播答案

【问题标题】：html5 audio livestreaminghtml5音频直播
【发布时间】：2013-06-03 10:02:23
【问题描述】：

我正在创建自己的音频，没有浏览器的控制。

<audio src="http://50.7.98.194:8081/~dl3/cgi-bin/dl.cgi/bqmu5mltxcqy43mxecgo4gnw743qr7fd7io22q5xj4/gl1mwvp6b326.mp3" id="audio">
</audio>

我有这些函数，当点击一些按钮时调用：

function play()
{
   audio.play();
}

function play()
{
   audio.pause
}

function stop()
{
   audio.pause();
   audio.src = audio.src;
}

但目前，我只能复制 mp3 或 ogg 文件，不能播放直播电台。我读过一些插件，但我需要用纯 html5 来做。

你能帮帮我吗？非常感谢，

【问题讨论】：

标签： html audio live-streaming

【解决方案1】：

很遗憾，目前还没有任何浏览器都支持的单一视频和音频编解码器！程序员必须确保为浏览器 A 不支持编解码器 B 的用例提供回退，反之亦然。

您可以查看此兼容性表，适用于桌面浏览器和移动浏览器。

桌面：

Internet Explorer (9.0+) 支持 MP3 和 AAC 编解码器
Chrome (6.0+) 支持 Ogg Vorbis、MP3、WAV+
Firefox (3.6+) 支持 Ogg Vorbis, WAV
Safari (5.0+) 支持 MP3、AAC、WAV
Opera (10.0+) 支持 Ogg Vorbis, WAV

手机：

Opera Mobile (11.0+) 支持的编解码器取决于设备
Android (2.3+) 支持的编解码器取决于设备
Mobile Safari（iDevices with iOS 3.0+）支持 MP3、AAC
黑莓 (6.0+) 支持 MP3、AAC

由于闪存仍然足够广泛，它可能是最安全的后备方案。

另外，我想指出，使用某些库没有什么比这更糟糕的了，其中一些（例如jPlayer）提供了非常强大的接口，这只可以帮助您生成更好的代码！

我想你可以在下面的文章中找到你想知道的一切：HTML5 Audio Radio Player by Opera Devs

【讨论】：

您好，感谢您的回答。我的 url 收音机似乎有问题，我无法收听...我尝试使用此收音机 listen.radionomy.com/abc-jazz 并且听得很好！可以是什么？也许是端口的问题？
我认为这就是它无法启动的原因，您可以尝试使用其他来源（例如 mp3/ogg 流媒体）吗？
他们都支持作品吗？

【解决方案2】：

现代浏览器似乎支持从“实时源”播放音频。基本上只需使用普通的 HTML 5 音频标签，并输入“直播” URL 作为源，例如：

<audio controls>
  <source src="http://audio-mp3.ibiblio.org:8000/wcpe.mp3" type="audio/mpeg">
  <source src="http://audio-ogg.ibiblio.org:8000/wcpe.ogg" type="audio/ogg">
</audio>

尽管尝试使用默认控件进行搜索，但流“正常工作”。因此，最终您可能希望以正常的 HTML 5 媒体样式将控件替换为“自定义”控件。为了向后兼容非 HTML 5 浏览器，此项目可能有用：https://github.com/etianen/html5media/wiki/Embedding-audio（尚未通过实时流媒体对其进行测试，但可以/应该工作）。主流浏览器似乎都支持 Mp3 编解码器（Linux 上可能不支持 firefox [?]）。 Opus 可能是另一个很好的跨平台选项，我不确定编解码器明智的选择是什么。

对于一些流（我想是喊声），我不得不添加一个结束 ';'到 URL，请参阅 https://stackoverflow.com/a/3182814/32453 那里的注释，但这基本上只是为了获得“正确”的 url。

【讨论】：

根据我的测试，截至今天（2017-03-05），Firefox、Edge 可以相当快地开始播放实时音频流（延迟 1 到 3 秒），而 Opera 的延迟是大约 10 秒。使用“audio/wav”进行测试。