AudioPlayer.js是一個響應式、支持觸摸操作的HTML5 的音樂播放器。本文是對其官網的說用說明文檔得翻譯，博主第一次翻譯外文。不到之處還請諒解、之處。
JS文件地址：http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js
你可以在右鍵點擊上面的地址，然后選擇另存為把JS文件保存到本地。
英文原文地址：http://osvaldas.info/audio-player-responsive-and-touch-friendly
Audio Player：響應式且支持觸摸操作
幾個月前，我做了一個Jquery插件，用自定義的HTMl代碼來取代<audio>標簽。通過寫一些css你可以得到一個全新的、個性化的並且和功能和默認一樣強大的播放器。沒有辦法直接修改元素的樣式。但是html5文檔模型中的元素有方法、屬性、和事件，這樣就可以很容易實現了。由DragonDean翻譯，首發於碼農自留地
總而言之，這個插件就是允許你自定義樣式<audio>元素的樣式。這就是為什么我制作了這個插件的原因。我希望播放器可以適應我門前的一個項目(商用IP電話-VOIP)的主題。audio元素提供IVR(交互式語音響應)功能，客戶們可以建立自己的聲音響應程序/菜單，記錄、回放音頻。
幾個星期之前，我就這個插件為Codrops寫了一篇深入介紹的文章，我推薦給那些在這個領域經驗較少的人。收到了一些很有幫助的反饋，幫助我改進這個播放器。很明顯，這還不是結尾，我希望在這也能收到您的反饋信息。由DragonDean翻譯，首發於碼農自留地
特點
在決定自己做這個插件之前，我對現有的可選方案做了一些小的調查。我有明確和嚴格的要求：(1)必須是輕量級的、可定制的、正確的。(2)必須能解決當前的問題，比如響應式的、支持觸摸操作的。(3)必須解決了我目前沒解決的問題。然而，沒有一個通過篩選。事實上重點是我做的這個播放器是：
響應式的
為達到這個要求，所有的責任都在你的CSS。我的例子是響應式的，你也可以做一個非響應式的，雖然我不推薦這樣做。響應式是好的網頁體驗的一個標志。
可觸摸操作
支持觸摸操作也是好的網頁體驗的一個標志。有了這兩項你就從設備和屏幕中獨立出來了。工作已經完成了一半。
自適應的
當瀏覽器完全不支持audio元素或是音頻文件的時候，播放器自動更改為一個基於使用第三方插件的播放器(基本上是在mac上市quickTime,在windows上就是windows media player)單按鈕(只有播放/暫停按鈕)<embed/>的元素來播放因為文件。還有一種情況就是不支持javascript的瀏覽器。然后就調用瀏覽器的默認播放器。這也挺好的。
原生的
播放器沒辦法直接就是原生的。插件支持audio元素的屬性(src,autoplay,loop,preload)和標簽(<sorce>)。基於這幾點，“autoplay”和“loop”屬性繼承於剛提到了情況。
實用的
關鍵的播放/暫停和回放進度控制，開關，增減控制以及音頻的加載進度(緩存)等。
無圖
這個也依賴於你的css,我做的播放器完全使用css的，一個圖片文件都沒有用到。做這個以及改變大小都用了em元素。讓播放器可以縮放，拉伸。
無Flash
再見，flash。我現在不需要你。
輕量級的
壓縮版的插件只有4KB大小。
使用方法
添加一個audio元素，設置你需要的屬性並添加資源。你添加的資源越多就有越多的用戶可以聽到你的音頻(因為沒有一種音頻格式支持所有的劉拉你)。由DragonDean翻譯，首發於碼農自留地
三個例子：
<audio src="audio.wav" preload="auto" controls></audio>
這個只加載audio.wav文件並且在點擊播放按鈕之前不會播放。另一個加載值(none,metadata)不會加載文件。
加載后自動循環播放文件可以采用這種方式：
<audio src="audio.wav" preload="auto" controls autoplay loop></audio>
指定多個音頻格式來解決之前提到的問題(譯者注：沒有一種音頻文件支持所有的瀏覽器):、
<audio preload="auto" controls> <source src="audio.wav" /> <source src="audio.mp3" /> <source src="audio.ogg" /> </audio>
神秘的控件？這是一個任何方式都不能影響插件的布爾屬性，但是確保了不支持javascript時瀏覽器的默認播放器被顯示且顯示出控件。
最后一步-在audio元素上調用插件(如果之前沒有引入jquery和插件文件的話，先引入)：
<audio src="audio.wav" preload="auto" controls></audio> <script src="jquery.js"></script> <script src="audioplayer.js"></script> <script> $( function() { $( 'audio' ).audioPlayer(); }); </script>
插件有一些可選的參數。最重要的就是classPrefix。傳遞的值會成為父元素的類名和子元素的類前綴名。其他參數可能只對非英語有利。舉個默認值得例子：
$( 'audio' ).audioPlayer(
{
classPrefix: 'audioplayer',
strPlay: 'Play',
strPause: 'Pause',
strVolume: 'Volume'
});
HTML
在開始第一段提到的，插件被調用的時候，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">…</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>
當發生下列情況時會有一些類被分配給父元素：
- 播放器播放時-音頻正在播放
<div class="audioplayer audioplayer-playing">
- 播放器停止-音頻播放已經停止
<div class="audioplayer audioplayer-stopped">
- 播放器靜音-聲音靜音狀態
<div class="audioplayer audioplayer-muted">
- 播放器沒有音量-音量調節不可用：
<div class="audioplayer audioplayer-novolume">
注意：當瀏覽器不支持audio元素或者不支持給出的音頻文件時，播放器轉為最小化模式，只顯示播放器的播放/暫停按鈕(因為embed元素在操作上是受限制的)：
<div class="audioplayer audioplayer-stopped audioplayer-mini"> <embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" /> <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div> </div>
提示：在插件初始化時使用classPrefix參數，你就可以在html中用你自己的值來替換每個音頻播放器外觀，這樣就可以在一個網站里有多個不同外觀的多媒體播放器了。
現在一切取決於你怎么用css來定義你的播放器樣式。我將跳過這部分，直接舉例，你可以隨時查閱我在Codrops上關於怎么定義樣式的文章。由DragonDean翻譯，首發於碼農自留地
Demo：
之前提到過很多次，我的播放器是響應式的，甚至不依賴媒體查詢。我有一個安排來解釋布局：
父元素.audioplayer是position: relative;子元素.audioplayer-*是position: absolute;
demo鏈接：http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/ (譯者注：由於是國外網站，加載時間可能稍微長點)
獲取audioplayer.js(未壓縮版：8KB),audioplayer.min.js (壓縮版; 4KB).
本文由DragonDean翻譯，首發於碼農自留地，轉載請注明出處！