html5音频组件实现在线广播、回播

最近做了一个微信里广播电台的一个在线收听、往期回播的功能，利用hmtl5的标签<audio>

这个项目从决定采用audio到最后实现可谓是一波三折，这里我主要介绍下我实现的过程和遇到的一些问题，希望对也想实现此功能的亲们能少走些弯路。

 

一、音频<audio>标签

 html5音频和视频功能完全取代对插件的依赖，方便使用，具体使用格式如下：

 

<audio id="player2" type="audio/mp3" controls>
   <source src="../../media/echo-hereweare.ogv">
   <source src="../../media/big_buck_bunny.webm">
   <source src="../../media/a.mp3">
  </audio>

 

这个的写法是为了让主流浏览器都支持，做测试的时候最好这么写，微信里只要mp3格式的就都支持

 

简写格式：

 

<audio id="player2" src="../../media/a.mp3" preload="none"  controls></audio>

 

ogv是html5中的一个名为Ogg Theora的视频格式，而且涉及到版权之类
的问题，各个浏览器比如ff、chrome之类的标准也不统一，FF只支持ogv，
而Safari则支持h264

WebM由Google提出，是一个开放、免费的媒体文件格式

 

各个浏览器支持的音频格式列表

 

浏览器	wave	ogg/ogv	aiff	Mp3	au
Firefox	√	√	×	×	×
Google Chrome	×	√	×	√	×
Safari	√	×	√	×	√
Opera	√	√	×	×	×

 

二、ios和android对音频的支持

 

因为是在微信里实现属于网页端，苹果和安卓系统对权限的控制是不一样的。

最初在我们产品效果图设计完，设计师设计的很全面，包括音量控制、前进后退、静音等。

ios声音控制没有放开权限，不允许，这个也是我纠结了很久才知道的，咨询了一个国外大师

 

1、在线广播支持格式：ios支持在线音频格式为m3u8

                                     andorid支持RTSP实时流协议

 

如果想要都支持必须得在服务器端转码，得到想要操作系统支持的音频格式，这个转码是技术核心，不容易实现需要时间

 

2、历史收听：mp3格式都支持