javascript - 编写自己的 Javascript 插件来创建音频播放器

Question

我编写了自己的 Javascript 插件来创建音频播放器。 我在 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>

使用上面的代码我的播放器将显示在浏览器上， 我有两个按钮，一个用于播放音频，第二个用于暂停音频， 如何使用 Javascript 插件实现此功能。 我想在Javascript插件中编写“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>