分享製作jQuery plugin - 範例 音樂播放器

花了好多時間做 jQuery plugin，終於告一個段落了，這次是做音樂播放器，我就來解說一下吧！

範例網址：宮崎駿動畫 小提琴曲集 - ytsAudio

建立和連接

  ※紅字可自訂
寫 jQuery plugin 時，通常外圍的方法都是

(function($) {
  var default = {
    id: 0,
    url: null
    // 程式碼...
  }
  
  $.fn.ytsaudio = function(options){
    data = $.extend({}, default, options);
    
    // 程式碼......
    
  }
})(jQuery)

html連結Plugin則是

<div id="player" class="player"></div>

<script>
$(function(){
  $('#player').ytsaudio();
})
</script>

$.fn.ytsaudio可以建立一個Plugin，ytsaudio是Plugin的名字。default是json物件，Plugin的屬性及方法。

內容

主要是在html是原本就有的元素(本範例是ID為player的div)裡面，增加Plugin的內容及變化。

var setup = function() {
  // 本段程式碼是增加音樂播放器主要的區塊，音檔、標題、控制項、音樂時間、進度條等。
}

var setupList = function() {
  // 本段程式碼是增加播放烈表
}

var appendAudio = function(){
  // 本段程式碼是增加音檔
}

var appendTitle = function(){
  // 本段程式碼是增加音樂標題
}

var appendControls = function(){
  // 本段程式碼是增加控制項(播放/暫停按鈕、上/下首...等等)
}

var appendTime = function(){
  // 本段程式碼是增加音樂時間(當前音樂時間、全部音樂時間)
}

var appendProgressbar = function(){
  // 本段程式碼是增加進度條(目前只能點擊，無法拖曳，正在做)
}

完成播放器截圖：

大致上是這樣，如果想了解細部的話，請在留言版上留言，謝謝。