首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在pixi中创建播放和暂停按钮

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

Stack Overflow用户
提问于 2018-04-27 21:25:16
回答 2查看 1.4K关注 0票数 0

我已经创建了一个网页page.which有背景音乐。

我想在音乐中添加(播放和暂停)按钮。我刚接触pixi,这就是我不知道怎么做的原因。

我的代码:

代码语言:javascript
复制
<script>

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

</script>
EN

回答 2

Stack Overflow用户

发布于 2018-04-28 04:06:20

简单地说

代码语言:javascript
复制
    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

票数 0
EN

Stack Overflow用户

发布于 2018-04-28 16:30:54

我的代码:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.btn 
 {
    outline: none !important;
 }

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

.btn.off .off`enter code here`,
.btn.on .on {
    display: inline-block;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50063424

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档