jquery - 如何在 pixi 中创建播放和暂停按钮

Question

我创建了一个网页。其中有背景音乐。

我想在音乐中添加（播放和暂停）按钮。我是 pixi 的新手，所以我不知道该怎么做。

我的代码：

<script>

        PIXI.sound.Sound.from({
        url: 'musical-11.mp3',
        loop:true,
        preload: true,
        loaded: function(err, sound) {
            sound.play();
        }
    });

</script>

标签： jquerypixi.js

Answer 1

我的代码：

<button class="btn btn-lg btn-primary off" id="paused">
        <span class="glyphicon glyphicon-pause off"></span>
        <span class="glyphicon glyphicon-play on"></span>
</button>

<script>

        PIXI.sound.Sound.from({
        url: 'vsg-music2.mp3',
        loop:true,
        preload: true,
        loaded: function(err, sound) {
            sound.play();

        document.querySelector("#paused").addEventListener('click', function() {
        const paused = PIXI.sound.togglePauseAll();

        this.className = this.className.replace(/\b(on|off)/g, '');
        this.className += paused ? 'on' : 'off'; 

        });
        }
        });

</script>

CSS：

.btn 
 {
    outline: none !important;
 }

.btn .off,
.btn .on {
    display: none;
}

.btn.off .off`enter code here`,
.btn.on .on {
    display: inline-block;
}