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

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来播放，像很多在线试听网站就是用的这种方案。

声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接：http://www.helloweba.com/view-blog-305.html