如何在 pixi 中创建播放和暂停按钮答案

【问题标题】：How to create Play and Pause button in pixi如何在 pixi 中创建播放和暂停按钮
【发布时间】：2018-10-08 08:37:50
【问题描述】：

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

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

我的代码：

<script>

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

</script>

【问题讨论】：

标签： jquery pixi.js

【解决方案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';
        });
    });

对您有用的链接：

Complete Working example

More smart Demo from docs

【讨论】：

我想在页面加载时自动播放音乐。和按钮来暂停和播放正在进行的音乐。

【解决方案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;
}

【讨论】：