问题

I'm creating my own audio, without controls of the browser.

I have these functions, called when clicked some buttons:

function play()

{

audio.play();

}

function play()

{

audio.pause

}

function stop()

{

audio.pause();

audio.src = audio.src;

}

But for now, I only can reproduce mp3 or ogg files, but not a live stream radio.

I read about some plugins, but I need do it with pure html5.

Could you help me, please?

Thanks very much,

回答1:

Unfortunately, there is still no single video and audio codec, which is supported by all browsers! The programmers have to ensure that there is fallback provided for use-cases where browser A doesn't support codec B and vice versa.

You can take a look at this compatibility table, for both desktop and mobile browsers.

Desktop:

Internet Explorer (9.0+) support MP3 and AAC codecs

Chrome (6.0+) support Ogg Vorbis, MP3, WAV+

Firefox (3.6+) support Ogg Vorbis, WAV

Safari (5.0+) support MP3, AAC, WAV

Opera (10.0+) support Ogg Vorbis, WAV

Mobile:

Opera Mobile (11.0+) supported codecs are device-dependent

Android (2.3+) supported codecs are device-dependent

Mobile Safari (iDevices with iOS 3.0+) support MP3, AAC

Blackberry (6.0+) support MP3, AAC

Since flash is still widespread enough, it's probably the safest fallback.

Also, I want to note that there's nothing worse to use some library, some of them (e.g. jPlayer) provides very powerful interface and this only can help you to produce better code!

I think you can find everything you want to know in the following article: HTML5 Audio Radio Player by Opera Devs

回答2:

Playing audio from a "live source" seems to be supported by modern browsers. Basically just use the normal HTML 5 audio tags, and input the "live stream" URL as the source, ex:

And the stream "just works" as it were, though attempting to seek with the default controls does nothing. So eventually you may want to replace the controls with "custom" ones, in normal HTML 5 media style. For backward compatibility to non HTML 5 browsers, this project may be useful: https://github.com/etianen/html5media/wiki/Embedding-audio (haven't tested it with live streaming but could/should work). Mp3 codec seems to be supported in major browsers (barring possibly firefox on Linux [?]). Opus might be another nicely cross platform option, I'm not sure codec wise what is the "best" choice as it were.

With some streams (shoutcast I presume) I have had to add a closing ';' to the URL, see https://stackoverflow.com/a/3182814/32453 for notes there, but that's basically just to get the "right" url.

来源:https://stackoverflow.com/questions/16978301/html5-audio-livestreaming

html5 live,html5 audio livestreaming相关推荐

  1. 免费html5代码,HTML5(示例代码)

    一.什么是HTML5 1.1 HTML5 简介 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素.属性和行为 XHTML可扩展 ...

  2. 兄弟连html5在线画板,IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容

    原标题:IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容 为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几 ...

  3. 对html5的了解,HTML5——对HTML5的认识

    首先非常感谢李刚老师出的这本书<HTML5/CSS3/JavaScript讲义>,今天读了第一章节的内容,趁热打铁,总结一下. HTML5的时代已经到来,它对所有的前端开发人员来说是一种福 ...

  4. html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生

    原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...

  5. 下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1...

    原标题:IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...

  6. 这不仅仅是html5的HTML5问题

    这不仅仅是html5的HTML5问题,它还关系到了我们应该如何工作这类原则性的问题,css working group更青睐于使用www-风格的输入.因为目标人群是web开发者,所以lea并不担心向后 ...

  7. css html5简介,HTML5 简介......

    HTML5 示例 实例 Your browser does not support the video tag. 什么是 HTML5? HTML5 简介 HTML5 是最新的 HTML 标准. HTM ...

  8. html5代码好学吗,0基础能学习Html5吗?Html5好学吗?

    原标题:0基础能学习Html5吗?Html5好学吗? 0基础可以学习Html5吗?这两年一直是被挂在嘴边的话题,随着人们对用户体验的要求越来越高,前端开发技术难度越来越大,所以对于IT从业者来讲,前端 ...

  9. 200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se

    200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...

  10. 一个html基本写法,HTML5教程:HTML5的基础写法

    HTML5教程:HTML5的基础写法 对比一下XHTML 1.0 Transitional的规范,html5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西. •文 ...

最新文章

  1. 大陆唯一7nm光刻机被抵押!武汉千亿投资、台积电大牛掌舵的芯片项目官宣停摆...
  2. Java HashMap、Hashset、ArrayList和函数间调用的练习
  3. 在VS2017中用c#编写程序执行python遇到中文不能处理出现乱码的情况
  4. 【Transformer】ViT:An image is worth 16x16: transformers for image recognition at scale
  5. 设计模式学习笔记-观察者模式
  6. 类string的构造函数、拷贝构造函数和析构函数
  7. 反应堆模式(reactor)
  8. 正在使用的项目,项目名那里出现了红色感叹号?怎么去除?
  9. Java中下载jar包
  10. PHP中百度地图和高德地图经纬度互相转换
  11. maya导入abc动画_大佬养成宝典:教你四十二招玩转MAYA(三)
  12. Android将数据导出为excel文件的方法
  13. 判断合法标识符(c语言或c++)
  14. centos8修改主机名称
  15. 浙江省中职院校春季技能竞赛中职计算机项目数字影视后期制作技术...,数字影视后期制作竞赛试卷.doc...
  16. html 怎么布局ui,移动端UI快速布局解决方案AUI
  17. linux系统hostapd强制使用40MHz频宽
  18. 启嘉春秋:《三字经》
  19. 系统集成项目管理 : 挣值管理(PV、EV、AC、SV、CV、SPI、CPI、VAC、BAC、ETC、EAC、)公式全集
  20. html网页比赛演讲稿,故事大王比赛的演讲稿范文(精选5篇)

热门文章

  1. 服务器无线网络禁用启用无效,无线网络卡一直被禁用,无法启用
  2. 应用程序正常初始化失败 VS2005
  3. 使用opencv应用程序正常初始化失败0xc000000d解决办法
  4. 沪深300指数的跟踪基金排名
  5. MySQL基础(约束 多表查询)
  6. MATLAB实现对比度计算
  7. 蓝桥杯练习题之圆的面积
  8. html5 聊天机器人,发挥你想象力,BotUI – 聊天机器人 JS 框架
  9. BNUOJ 1043 旋转方块
  10. php在线电子小说网站毕业设计源码