オーディオプレーヤーを作成するための独自のJavaスクリプトプラグインを作成します。

Question

オーディオプレーヤーを作成するための独自のJavaスクリプトプラグインを作成します。 私は1 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> 

ブラウザ上に表示されるコードの上に私のプレーヤーを使用して

、 と私は2つのボタンジャバスクリプトプラグインを使用してこの機能を実現することができますどのようにプレイオーディオや一時停止、オーディオのための第二のための1つ、 を持っています。 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>