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來播放，像很多線上試聽網站就是用的這種方案。