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

Posted 2023-05-09

【中文标题】编写自己的 Javascript 插件来创建音频播放器

【英文标题】：Write own Javascript plugins for creating audio player

【发布时间】：2017-05-12 10:44:23

【问题描述】：

我编写了自己的 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”方法编写方法。

如何实现这个功能？

【参考方案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>