支持觸摸設備的響應式HTML5音頻播放器 - AudioPlayer.js

日期：2013-5-22  來源：GBin1.com

在線演示

如果你希望開發一款支持響應式的HTML5播放器的話，AudioPlayer.js是一個不錯的選擇。它使用HTML5的audio標簽幫助你生成一個支持響應式的音頻播放器，不使用任何embed代碼，圖片或者flash，完全使用CSS定義界面。壓縮后的大小只有4KB。

主要特性

• 響應式
• 觸摸式
• 自適應
• HTML5音頻的本地支持
• 易用性.
• 無圖片
• 無flash
• 輕量級，壓縮后4KB

如何使用

HTML

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

Javascript

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

是不是非常簡單，當插件調用后，audio標簽會被解析成如下HTML元素：

<div class="audioplayer audioplayer-stopped">
    <audio src="audio.wav" preload="auto" controls></audio>
    <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
    <div class="audioplayer-time audioplayer-time-current">00:00</div>
    <div class="audioplayer-bar">
    <div class="audioplayer-bar-loaded"></div>
    <div class="audioplayer-bar-played"></div>
    </div>
    <div class="audioplayer-time audioplayer-time-duration">&hellip;</div>
    <div class="audioplayer-volume">
    <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
    <div class="audioplayer-volume-adjust"><div><div></div></div></div>
    </div>
    </div>

希望大家喜歡這款音頻插件。

友情提示：因為本文在線演示中沒有包含wave格式音樂，所以不支持IE，請使用Firefox和Chrome來播放音樂。

來源：支持觸摸設備的響應式HTML5音頻播放器 - AudioPlayer.js