1

Howler.js を使用して、いくつかのボタンをオーディオ ソースに接続することができました。しかし、Howl は毎回新しい Howl インスタンスを作成するため、停止機能を動作させることができません。sound.stop() を直接 sound.start() で作成された同じインスタンスに接続するためのヒントはありますか? 各サウンドのすべてのコードをコピーせずに、この方法で複数のボタンを作成できるようにしたいと思います! これが私のコードです：

var arrayVariable = ["Kick","Snare","HiHats"];
var newArr = [];
var arrayLength = arrayVariable.length;
var temp;

$(document).ready(function(){

// create buttons //
for (i = 0; i < arrayLength; i++) {
      newArr[i] = './audio/checklist/' + arrayVariable[i] + '.ogg';
      temp = document.createElement('button');
      temp.innerHTML = arrayVariable[i];
      var assign = $('#buttonDiv')[0].appendChild(temp);
      }
$('button').on('click',function() {
      var index = $( "button" ).index( this );
      //$( "div" ).text( "That was div index #" + index );
      var i = $('#buttonDiv').index(this);

// configure howler //
      var sound = new Howl({
      src: [newArr[index]],
      autoplay: false,
      loop: true,
      volume: 0.5
      });

// start stop buttons //
      if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      sound.stop();
      $(this).css('background-color', 'red')

      } else {

      $(this).attr('data-click-state', 1)
      sound.play();
      $(this).css('background-color', 'green')
      }
      });
      });
4

0 に答える 0