如何在Pixi中创建游戏和暂停按钮

Question

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

我想在音乐中添加(播放和暂停(按钮。我是Pixi的新手，这就是为什么我不知道该怎么做。

我的代码：

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

Answer 1

简单地说

    PIXI.loader.add('loop2', 'loop2.mp3');
    PIXI.loader.load(function(loader, resources) {
        // Data may actually be in data property, see https://github.com/pixijs/pixi-sound/issues/55
        const sound = resources.loop2.sound || resources.loop2.data;
        sound.loop = true; // Loop in case of music.
        const button = document.getElementById('test-button');
        button.addEventListener('mousedown', function() {
            const button = this;
            if(sound.isPlaying) {
                sound.stop();
            } else {
                sound.play();
            }
            button.innerHTML = sound.isPlaying ? 'Stop' : 'Play';
        });
    });

有用的链接：

完成工作示例

来自文档的更多智能演示

Answer 2

我的代码：

<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;
}