2018年04月6日网站服务器迁移完成……

HTML5响应式可触控的音频播放器

html5 苏 demo 1831℃ 0评论

HTML5的audio提供了音频播放功能,但是原生的播放器样式不怎么好看,而且各浏览器对audio的外观展现不统一。我们可以对audio稍微包装下,便可实现一个响应式的可触控的漂亮的播放器。

查看演示 下载源码

HTML


<audio preload="auto" controls autoplay>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
</audio>

其实如果只有以上代码,在支持HTML5的浏览器上就可以正常显示并播放。而我们需要做的是将播放器美化,并做适当包装,如此我们引用了一个jQuery插件。

jQuery

首先我们将必要的CSS3效果渲染样式文件和jQuery库文件引入。


<link rel="stylesheet" href="audioplayer.css" />
<script src="jquery.js"></script>

接着,我们调用播放器插件,请看一下代码:


<script src="audioplayer.min.js"></script>
<script>
$(function() { 
  $('audio').audioPlayer();
});
</script>

插件还提供了一些必要的操作选项设置,用户可以设置如样式绑定,按钮语言等设置。


$('audio').audioPlayer({
  classPrefix: 'audioplayer',
  strPlay: 'Play',
  strPause: 'Pause',
  strVolume: 'Volume'
});

到这里你就可以看到一个如DEMO演示中的漂亮的音频播放器了。还有个问题是我们知道还有些老的浏览器不支持html5,如IE8及以下,以及firefox不支持mp3,尤其是我们一般提供的源很少有ogg格式的,那么我们如何解决兼容性的问题呢?有好的方案就是在不支持html5的浏览器上使用flash来播放,像很多在线试听网站就是用的这种方案。

打赏

转载请注明:苏demo的别样人生 » HTML5响应式可触控的音频播放器

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情