0

配列と for ループを使用して、いくつかのハウルとハウル トリガー ボタンにインデックスを付けて名前を付けようとしています。

私が達成しようとしていることについて、この質問を参照しました: Howler - Random sound
私のものとの違いは、ランダムな側面がないことと、いくつかのメソッド呼び出しを追加したことです。

ハウルをループにトリガーするために使用されるボタンを追加していますが、それが失敗しているように見えます-つまり、ボタンがクリックされたときです。

いずれかのボタンがクリックされると、コンソールは次のように報告します
Uncaught TypeError: Cannot read property 'play' of undefined
。sounds[i].play();sounds[i].pause();

JS は次のとおりです。

var sounds = ['sound1', 'sound2'];
var howls = {};
for (var i=0; i<sounds.length; i++) {
    howls[sounds[i]] = new Howl({
        urls: ['http://powellian.com/assets/audio/' + sounds[i] + '.mp3', 'http://powellian.com/assets/audio/' + sounds[i] + '.ogg'],
        volume: 1,
        onplay: function() {
            console.log('Playing: ' + sounds[i]);
            $(sounds[i]).removeClass('static').addClass('playing');
            $(sounds[i] + ' span.ascii-play').addClass('hide');
            $(sounds[i] + ' span.ascii-pause').removeClass('hide');
        },
        onpause: function() {
            console.log('Paused: ' + sounds[i]);
            $(sounds[i]).removeClass('playing').addClass('paused');
            $(sounds[i] + ' span.ascii-play').removeClass('hide');
            $(sounds[i] + ' span.ascii-pause').addClass('hide');
        },
        onend: function() {
            console.log('Finished: ' + sounds[i]);
            $(sounds[i]).removeClass().addClass('static');
            $(sounds[i] + ' span.ascii-play').removeClass('hide');
            $(sounds[i] + ' span.ascii-pause').addClass('hide');
        }
    });

    // PLAY btn
    $('#' + sounds[i] + ' span.ascii-play').on('click', function (e) {
        sounds[i].play();
    });
    // PAUSE btn
   $('#' + sounds[i] + ' span.ascii-pause').on('click', function (e) {
        sounds[i].pause();
    });
}

非配列/for ループ バージョンが 2 つの Howl で正常に動作していましたが、クラスの追加/削除は正常に動作するため、無視してください。

最終的には、アレイから 16 個のハウルを生成します。

マークアップ構造を含むフィドルは次のとおりです: Howler Fiddle

事前に感謝します。

4

1 に答える 1

1

ここには 2 つの問題があります。

  1. スコープを維持せずにハンドラーi内の変数を参照しています。clickこのため、常にi最後の値として表示されます。bindこれを修正する1つの方法として使用できます：

$('#' + sounds[i] + ' span.ascii-play').on('click', function (i2, e) { sounds[i2].play(); }.bind(null, i));

  1. オブジェクトへの参照を保持していないplayonを呼び出そうとしています。代わりに電話をかけるべきです。soundsHowlplayhowls[sounds[i2]]

編集:この場合、を使用する方が簡単なforEachので、フィドルを更新してそれを行い、スコープの問題を修正しました: http://jsfiddle.net/zmjz7sf3/1/。

于 2016-07-06T17:40:22.960 に答える