0

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

我有一些非常模糊的代码，可以检测单击时是否正在播放另一首曲目并停止曲目，并切换该曲目的 css（播放图标等）。但现在，在混音中添加第 3 或第 4 首曲目变得不守规矩。

声音被加载并存储在可重用声音实例的哈希中，如下所示：

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

当点击 html 中的按钮时（我目前没有使用 data-type 属性，这是来自之前的尝试，但我认为它可能有用）：

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

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

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

4

1 回答 1

0

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

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();
    }
}
于 2015-05-13T16:10:30.563 回答