html5音频直播

Question

我正在创建自己的音频,没有浏览器的控件.

<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来做.

请问你能帮帮我吗？非常感谢,

Answer 1

现代浏览器似乎支持从"实时源"播放音频.基本上只使用普通的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可能是另一个很好的跨平台选项,我不确定编解码器是什么样的"最佳"选择.

有一些流(我猜是shoutcast)我不得不添加一个结束';' 到URL,请参阅/sf/answers/222797011/以获取备注,但这基本上只是为了获得"正确"的URL.

Answer 2

不幸的是,仍然没有单一的视频和音频编解码器,所有浏览器都支持它!程序员必须确保为浏览器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)提供了非常强大的接口,这只能帮助您生成更好的代码!

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