編寫自己的Java腳本插件來創建音頻播放器

Question

編寫自己的Java腳本插件來創建音頻播放器。 我創建了一個文件AudioPlayer.js

(function ($) { 
       jQuery.fn.myPlayer = function (options) { 
       var defaults = { 
        id: "#myPlayer", 
        url: "" 
       }; 

       var settings = $.extend({}, defaults, options); 

       return this.each(function() { 
        var AudioPlayer = $("<audio>"); 
        AudioPlayer.attr('id', settings.id); 
        AudioPlayer.attr('controls', 'true'); 
        AudioPlayer.appendTo(this); 
        var source = $("<source>"); 
        source.attr('src', settings.url); 
        source.attr('type', 'audio/mp3'); 
        source.appendTo(AudioPlayer); 
       }); 

      } 

}(jQuery)); 

上面的代碼是在AudioPlayer.js，而這種引用添加到「HTML」頁面， 現在我已經訪問此文件中像這樣，

html頁面

 <script> 
       $(document).ready(function() { 
        $('.playerDemo').myPlayer({ 
         id: "myAudio", 
         url: "https://vzstr.blob.core.windows.net/media/e2d4255c-a03a-45ac-b34a-42bd3101f902/59006.mp3" 
        }); 
       }); 

     </script> 

使用上面的代碼我的播放器將顯示在瀏覽器中， 和我有兩個按鈕，一個用於播放音頻和第二已暫停音頻， 如何使用Java腳本插件實現這一功能。 我想在java腳本插件中爲「PLAY」和「PAUSE」方法編寫方法。

如何實現此功能？

Answer 1

Write this code in AudioPlayer.js file. 
(function ($) { 

    jQuery.fn.myPlayer = function (options) { 
     var defaults = { 
      id: "#myPlayer", 
      url: "" 
     }; 

     var settings = $.extend({}, defaults, options); 

      var AudioPlayer = $("<audio>"); 
      AudioPlayer.attr('id', settings.id); 
      AudioPlayer.attr('controls', 'true'); 
      AudioPlayer.appendTo(this); 
      var source = $("<source>"); 
      source.attr('src', settings.url); 
      source.attr('type', 'audio/mp3'); 
      source.appendTo(AudioPlayer); 

      var AuPlayer = AudioPlayer[0]; 
      return { 
       play: function() { 
        AuPlayer.play(); 
       }, 
       pause: function() { 
        AuPlayer.pause(); 
       } 
      } 
    } 

}(jQuery)); 

Bellow code in HTML File, 
<script> 
     var playerDemo; 
     $(document).ready(function() { 
      playerDemo = $('.playerDemo').myPlayer({ 
       id: "myAudio", 
       url: "https://vzstr.blob.core.windows.net/media/e2d4255c-a03a-45ac-b34a-42bd3101f902/59006.mp3" 
      }); 
     }); 
     function playAudio() { 
     playerDemo.play(); 
    } 
    </script>