Question

我在页面上有一堆声音，类似于声音网格示例。其中一些曲目是音乐曲目，我想以不同的方式对待它们。大多数声音可以相互播放，这是意图，但是，没有音乐曲目应该能够在另一个音乐曲目上播放。想想单选按钮。

我有一些非常粗糙的代码，可以检测其他曲目是否在点击时播放并停止曲目，并切换曲目的css（播放图标等）。但是现在，在混音中加入第3或第4首歌曲变得难以驾驭。

声音被加载并存储在可重复使用的声音实例的散列中，如下所示：

  mySounds["sound1"]= createjs.Sound.createInstance("sound1");
  ...

当单击html中的按钮时（我目前没有使用数据类型属性，这是来自之前的尝试，但我认为它可能有用）：

    <button type="button" class="btn btn-vol btn-sm" data-type="music" data-track="music1" onclick="play(this)">
    <span class="glyphicon glyphicon-play bplay"></span></button>

我目前正在做：

function play(target) {

    //define some stuff from html
    musicTrack = $(target).attr('data-track');
    music1 = $('button[data-track="music1"]');
    music2 = $('button[data-track="music2"]');
    myInstance = mySounds[id] //id is defined elsewhere

    toggle = $(target).find('span.bplay'); //this is where I have the play/pause icons

    //For all cases, not just music I find the play icon and swap it.
    if(toggle.hasClass('glyphicon-play')){ //the sound is ready to play. if it had a stop icon it would mean it was already playing

    toggle.removeClass('glyphicon-play');
    toggle.addClass('glyphicon-stop')

    //special case for music Tracks
    if(musicTrack == "music1") { //If I clicked on music track 1
        if(mySounds[musicTrack2].position !=0){ //if it isn't 0, it's playing!
            music2.find('span.bplay).removeClass('glyphicon-stop');
            music2.find('span.bplay').addClass('glyphicon-play');
            mySounds[musicTrack2].stop();
        }
        else {
            //do nothing because track 2 isn't playing
        }

    } else if (musicTrack=="music2"){ //If I clicked on music track 2
        if(mySounds[musicTrack2].position !=0){
            music1.find('span.bplay').removeClass('glyphicon-stop');
            music1.find('span.bplay').addClass('glyphicon-play');
            mySounds[musicTrack1].stop();
        }
        else {
            //do nothing because track 1 isn't playing
        }

        myInstance.play(); // play the clicked on instance 

    }
    else {
        //if the glyphicon does not say play (says stop) then we stop the sound etc..
        toggle.removeClass('glyphicon-stop');
        toggle.addClass('glyphicon-play');
        myInstance.stop();
    }
}

我没有检查上面的语法，因为我从我的代码手动复制它，只保留相关位，但所有这些都有效。我点击music1，如果音乐2没有播放 - 它会播放。如果正在播放音乐2，则会停止播放音乐2，切换它的停止图标以播放和播放音乐1.我的实际代码会在声音停止之前对声音进行一些补间，以便它们可以很好地交叉淡入淡出。

我不是程序员，但我希望能够以更有效/更优雅的方式做到这一点。当然有办法！

Answer 1

更好的方法是为音乐按钮提供不同的点击处理功能，并使用app / global变量跟踪当前播放的音乐。然后使用该图标确定行为。您需要添加一种获取当前播放音乐的方法，这可能是另一个变量。像这样：

var currentMusic;

function playMusic(target) {

//define some stuff from html
musicTrack = $(target).attr('data-track');
myInstance = mySounds[id]; //id is defined elsewhere

toggle = $(target).find('span.bplay'); //this is where I have the play/pause icons

//For all cases, not just music I find the play icon and swap it.
if(toggle.hasClass('glyphicon-stop')){ 
    toggle.removeClass('glyphicon-stop');
    toggle.addClass('glyphicon-play');
    currentMusic = null;
    myInstance.stop();
}
else {
    if(currentMusic) {
      // get current instance and call stop
      currentMusic.addClass('glyphicon-play');
      currentMusic.removeClass('glyphicon-stop');
    }
    toggle.removeClass('glyphicon-play');
    toggle.addClass('glyphicon-stop');
    currentMusic = toggle;
    myInstance.play();
    }
}

SoundJS音乐片段应相互打开/关闭

1 个答案: