使用HTML5的Audio API编写的简单组件

针对客户的需求,要能在手机HTML5页面中播放蜻蜓FM的音频。为此写了个简易的H5组件。

见下面图标,就是这个组件,可点击收听,Hexo的MarkDown写法真方便,可以任意嵌入HTML代码。

组件的运行

如果加载中,会显示加载图片。加载完毕,出现:

点击播放

点击后开始播放:

点击暂停

如果播放到结束,自动停止。再次点击,将重新播放。

在开发中使用

源代码在这里:https://github.com/MarshalW/SimpleH5Audio

可以在这里看到完整的Demo:http://statics.shiqichan.com/simple-h5-audio/

依赖jQuery,需要引用一下:

1
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>

组件的js文件需要引用:

1
<script type="text/javascript" src='simple-audio.js'></script>

充当按钮的span标签:

1
<span id='playSoundButton' style='width:50px;height:50px;background-color: silver;display: inline-block;background-image: url(http://shiqichan.qiniudn.com/Using-HTML5-Audio-API/music_loading.png);background-size:contain'></span>

创建播放器的代码:

1
2
3
4
5
6
7
8
9
10
11
12
var playButton=$('#playSoundButton');

new SimpleAudio({
src:'http://od.qingting.fm/vod/00/00/0000000000000000000025253003_64.m4a',
element:playButton,
setPlay:function(){
$(playButton).css('background-image','url(play.png)');
},
setPause:function(){
$(playButton).css('background-image','url(pause.png)');
}
});

这样就可以正常播放了。

有些场景下,播放器不是全局的,比如我们碰到的需求,有多个页面,离开这个页面的时候,就要销毁播放器:

1
$('#soundPannels').empty();

做法是,只要删除播放器对应的HTML元素,组件会监听到删除事件,并清空/释放相关的资源。经过在chrome的开发者工具,Profiles的Take Heap Snapshot测试,清空后就没有组件的SimpleAudio对象了。说明内存释放没有问题。