0

サウンド グリッドの例と同様に、1 つのページに多数のサウンドがあります。これらのトラックのいくつかは音楽トラックであり、それらを別の方法で扱いたいと考えています。ほとんどのサウンドは互いに重ねて再生できますが、それが意図されていますが、音楽トラックは別の音楽トラックの上で再生できるべきではありません。ラジオボタンを考えてみてください。

クリックしたときに他のトラックが再生されているかどうかを検出してトラックを停止し、そのトラックの 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();
    }
}

関連するビットのみを保持して、コードから手動でコピーしたため、上記の構文をチェックしていませんが、これはすべて機能します。音楽 2 が再生されていない場合は、音楽 1 をクリックします。再生されます。音楽 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 に答える