最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5响应式可触控的音频播放器实现例子
时间:2015-05-26 编辑:简简单单 来源:一聚教程网
HTML5的audio提供了音频播放功能,但是原生的播放器样式不怎么好看,而且各浏览器对audio的外观展现不统一。我们可以对audio稍微包装下,便可实现一个响应式的可触控的漂亮的播放器。
HTML
其实如果只有以上代码,在支持HTML5的浏览器上就可以正常显示并播放。而我们需要做的是将播放器美化,并做适当包装,如此我们引用了一个jQuery插件。
jQuery
首先我们将必要的CSS3效果渲染样式文件和jQuery库文件引入。
css" />
接着,我们调用播放器插件,请看一下代码:
插件还提供了一些必要的操作选项设置,用户可以设置如样式绑定,按钮语言等设置。
$('audio').audioPlayer({
classPrefix: 'audioplayer',
strPlay: 'Play',
strPause: 'Pause',
strVolume: 'Volume'
});
到这里你就可以看到一个如DEMO演示中的漂亮的音频播放器了。还有个问题是我们知道还有些老的浏览器不支持html5,如IE8及以下,以及firefox不支持mp3,尤其是我们一般提供的源很少有ogg格式的,那么我们如何解决兼容性的问题呢?有好的方案就是在不支持html5的浏览器上使用flash来播放,像很多在线试听网站就是用的这种方案。
-
上一个: JS时间戳和时间之间转换例子
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31