javascript - 如何使用 SoundJS 切换播放/暂停？-6ren

javascript - 如何使用 SoundJS 切换播放/暂停？

转载作者：行者123 更新时间：2023-12-02 16:35:51

我正在使用 SoundJS 构建一个伪 MPC。我按照我想要的方式编程了声音套件按钮，但我无法让循环按照我想要的方式工作。

我希望用户单击“loop1”并播放。
如果用户再次点击“loop1”，它应该停止并重置。
如果用户在播放“loop1”时点击“loop2”，则“loop1”会停止并重置，同时“loop2”开始播放。

我该如何解决这个问题。警告，我本质上是一名 UI/UX 设计师，并且仍在学习 Javascript，所以如果你能在解释时给我更多细节，那就太好了。谢谢!

下面是我的一些代码，但要查看它的实际效果，请在此处查看:http://nowthatsgenius.com/clients/beatbox/

<body onload="init();">
    <section class="player-container">
        <article class="player-controls">
            <ul class="player-controls">
                <li class="player-controls-button" id="loop1" onclick="playSound(this)">Loop 1</li>
                <li class="player-controls-button" id="loop2" onclick="playSound(this)">Loop 2</li>
            </ul>
        </article>
    </section>
    <section class="mpc-container">
        <article class="mpc-title mpc-col">
            <span class="text">V1</span>
        </article>
        <article class="mpc-controls mpc-col">
            <ul class="mpc-controls-wrap">
                <li class="mpc-controls-row">
                    <ul>
                        <li class="mpc-controls-button" id="a1" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a2" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a3" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a4" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a5" onclick="playSound(this)"></li>
                    </ul>
                    <ul>
                        <li class="mpc-controls-button" id="a6" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a7" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a8" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a9" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a10" onclick="playSound(this)"></li>
                    </ul>
                </li>
            </ul>
        </article>
    </section>

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://code.createjs.com/soundjs-0.6.0.min.js"></script>
    <script>
        var preload;

        function init() {
            if (!createjs.Sound.initializeDefaultPlugins()) {
                document.getElementById("error").style.display = "block";
                document.getElementById("content").style.display = "none";
                return;
            }

            var assetsPath = "assets/";
        var sounds = [
                {id:"loop1", src:"loop1.mp3"},
                {id:"loop2", src:"loop2.mp3"},

            {id:"a1", src:"snare.wav"},
            {id:"a2", src:"kick1.wav"},
            {id:"a3", src:"clap1.wav"},
            {id:"a4", src:"closedhat.wav"},
            {id:"a5", src:"cymbal.wav"},
            {id:"a6", src:"kick2.wav"},
            {id:"a7", src:"clap2.wav"},
            {id:"a8", src:"openhat.wav"},
            {id:"a9", src:"voice1.wav"},
            {id:"a10", src:"voice2.wav"},
        ];

        $('.player-controls-button').attr("disabled",true);

        createjs.Sound.alternateExtensions = ["mp3"];   
        createjs.Sound.addEventListener("fileload", createjs.proxy(handleLoadComplete, this));
        createjs.Sound.registerSounds(sounds, assetsPath);
      }


        function playSound(target) {

            var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);

            $(".player-controls-button").click(function(event) {
                if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
                    instance.stop();
                } 
                else {
                    instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
                }
            });

            console.log(instance.playState);
        }


    </script>

</body>

最佳答案

开始播放声音后，您可以通过将声音分配给变量来修改声音。在本例中，我创建了变量 loop1 和 loop2。

// Creating variables outside playSound() so they exist in the global scope.
var loop1 = null;
var loop2 = null;

function playSound(target) {
    if(loop1){  // If loop1 exists, stop it.
        loop1.stop();
    }
    if(loop2){  // If loop2 exists, stop it.
        loop2.stop();
    }


    if(target.id == "loop1"){
        // Assign value to var loop1
        loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
    else if(target.id == "loop2"){
        // Assign value to var loop2
        loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
    else{
        // Otherwise, create generic sound
        var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }

    $(".player-controls-button").click(function(event) {
        if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
            instance.stop();
        }else {
            instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
        }
    });

    console.log(instance.playState);
}

我建议您将用于音效的 playSound(target) 函数分开，并为您的音乐循环创建一个名为 playLoop(target) 的新函数，只是为了使其更容易阅读。但这取决于你。

版本 2

var loop1 = null;
var loop2 = null;
function playLoop(target){

    // If loop1 exists, stop it and delete it
    if(loop1){
        loop1.stop();
        loop1 = null;
    }else if(target.id == "loop1"){
        loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }

    // If loop2 exists, stop it and delete it
    if(loop2){
        loop2.stop();
        loop2 = null;
    }else if(target.id == "loop2"){
        loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
}

当您将 createjs.Sound.play() 分配给变量时，该变量将成为 AbstractSoundInstance 对象。您可以通过许多很酷的方式修改它，here's the documentation如果您想了解可以使用这些变量做更多事情。

关于javascript - 如何使用 SoundJS 切换播放/暂停？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27934839/

文章推荐： javascript - 在输入类型复选框上使用 JQuery ReplaceWith

文章推荐： javascript - 删除表单元素时，AngularJS 验证不同步

文章推荐： javascript - 计算每行汇率变化的金额

文章推荐： javascript - 在 javascript (meteorJs) 中单击时传递按钮 ID

audio - SoundJS-将声音分配给变量
我正在使用loadManifest加载多个mp3文件，但是对于如何将加载的声音分配给变量感到有些困惑。我可以在这里使用createInstance吗？我的代码当前如下所示: var myRoot =
javascript - 检测歌曲结束 - SoundJS
我正在使用 SoundJS演奏音乐。如何检测歌曲何时结束？ SoundJS 可以检测事件，歌曲结束时是否有事件？像这样: var songInstance = createjs.Sound.play(
javascript - SoundJS 上传后不工作
我正在尝试使用 SoundJS(一个免费的 Javascript 库 ( http://www.createjs.com/#!/SoundJS ))向我的 HTML5 游戏添加声音。我正在使用 zi
javascript - SoundJS:为什么FireFox无法播放mp3文件？
这个问题已经有答案了: Why doesn't Firefox support the MP3 file format in (9 个回答) 已关闭 9 年前。当我尝试播放声音时，这是一个 mp3
audio - 如何检测 soundJS 中当前是否正在播放任何声音？
如何检测 soundJS 中是否正在播放任何声音？我有很多声音会时断时续，有时会合法地相互重叠。我需要一种方法来确定在任何给定时间是否正在播放任何声音 IE。就像是 createjs.Sound.i
audio - Safari 和移动浏览器上的 Soundjs
目前我的音频无法在 Safari 和移动设备上播放。它在 FireFox、Chrome 和 IE 上的普通电脑上运行良好 var manifest = [ { id: "correct",
javascript - createjs SoundJS 播放单声道而不是立体声
我使用 createjs.Sound 为我的项目播放简短的声音。我无法使用 .mp3 格式文件并将其转换为 .ogg 格式。 .ogg 可以播放，但声音是单声道(我只在耳机的一侧听到)。当我尝试用 V
javascript - SoundJS:Firefox 无法播放 mp3
我目前正在开发一个网站，其中包含一个用 SoundJS 制作的音乐播放器。我本人正在使用 Google Chrome 来测试和调试我的网站，它的工作非常顺利，但是当我最近在 FireFox 中测试它时
javascript - 如何使用 SoundJS 切换播放/暂停？
我正在使用 SoundJS 构建一个伪 MPC。我按照我想要的方式编程了声音套件按钮，但我无法让循环按照我想要的方式工作。我希望用户单击“loop1”并播放。如果用户再次点击“loop1”，它
javascript - SoundJS:混合 html 和网络音频
我想在我的游戏中为长音乐文件(流媒体类型)播放缓冲音频。看来我必须使用 html 音频: Buffered audio in SoundJS 但是，我仍然想使用 webaudio 来制作音效(例如，为
createjs - 将已加载的声音注册为 soundjs 库中的 base64 或二进制文件
我有一个大问题，我还没有找到解决方案。简而言之，我有一个前端网页，其中自定义 API 构建在动态音轨上。所有轨道都作为 base64 字符串临时存储在浏览器内的变量中。我的问题是我想在 createj
javascript - 如何为 IOS 9 初始化 SoundJS
我们使用 CreateJS 套件已有一段时间了，但刚刚意识到我们的音频无法在 IOS9 上运行。不幸的是，我们只有一台运行 IOS9.2.4 的 IOS9 测试设备，但在音频播放方面却得到了混合结果。
javascript - 如何在 SoundJS for Firefox, IE 中正确设置位置
我正在尝试使用 SoundJS播放 sn mp3 文件并定位到特定位置。我正在使用: instance.setPosition(10000); 在 Google Chrome 中可以正常工作。但在 M
audio - 如何使用 soundjs "createjs.Sound.registersound"捕获加载错误？
例如，在 Firefox 之类的浏览器中使用 SoundJS 0.5.2，我可以很好地加载存在的文件。从加载不存在或有其他问题的文件中恢复不太好似乎 registerSound不会告诉我有问题。也许
javascript - 在 React Web 应用程序中使用 createjs-soundjs
我想使用 https://www.npmjs.com/package/createjs-soundjs在 react 网络应用程序上播放声音。我通常使用 npm install createjs-s
javascript - 使用 SoundJS 离开网页会导致 Google Chrome 崩溃
我有一个网页 index.php，其中包含指向 sound.php 的链接。在 sound.php 上，使用 SoundJS 播放声音。当我从 sound.php 导航到 index.php 时，G
javascript - 最新的 Chrome 桌面更新阻止 SoundJS 播放声音(与自动播放相关)
我在最新版本的 Chrome 桌面上收到此 JavaScript 警告，它现在可以防止在没有用户交互的情况下自动播放声音:http://bgr.com/2018/03/22/google-chrome
javascript - 让 SoundJS 与 Cordova/Phonegap 一起工作
我正在构建一个具有广泛音频要求的应用程序，因此我为此使用了 SoundJS，并且我正在使用 phonegap 编译该应用程序。我正在使用 mobile safe approach构建一个 sound
javascript - SoundJS 如何/可以加载由其他 Preloader(例如 Pixi.loaders.Loader())加载的声音文件？
我目前正在使用 Pixi.js 及其内置的 Loader，当我浏览代码时，我注意到我也可以加载声音。我正在使用不同的 Sound 加载器，它也是专门内置在 SoundJS 中的。问题是，我必须管理两

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用 SoundJS 切换播放/暂停？