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

有用的链接：

Complete Working example

More smart Demo from docs

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

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

2 个答案: