JS ile HTML text kutusuna girilen harf ile ses çıkarma

AuEnx · 10 Haziran 2022

Merhaba, resimde gördüğünüz üzere bir baterinin üstünde butonlar var ve bu butonlara mouse ile tıklayınca sesler çıkarıyor. Fakat bu sesleri aynı şekil HTML'de bir text kutusu yaratıp bu text kutusuna, belirlenen harfleri girip text kutuna bağlanacak butona tıkladığım zamanda çalmasını istiyorum fakat bunu bir türlü beceremedim. Bakmadığım yabancı kaynak kalmadı, belki de bulamadım ama bir türlü yapamadım. Nasıl bir text kutusu ve o text kutusunun değerini okuyan buton yaratıp ve JavaScript ile ses çıkarmasını sağlayabilirim?

AuEnx · 11 Haziran 2022

tabii efendim dedi:

Aşağıdaki şekilde çalışması gerek.

JavaScript:

function klavyesesYap()
{
  var girisK=document.getElementById('textt').value;
  const array = girisK.split(",");
  const sounds = [];
 
  for(j = 0; j < array.length; j++)
  {
    if ( array[j] == 'W' )
    {
      var tom1 = new Audio("ses/tom-1.mp3");
      sounds.push(tom1);
    }
    else if (array[j] == 'A')
    {
      var tom2 = new Audio("ses/tom-2.mp3");
      sounds.push(tom2);
    }
    else if (array[j] == 'S')
    {
      var crash = new Audio("ses/crash.mp3");
      sounds.push(crash);
    }
    else if (array[j] == 'D')
    {
      var tom4 = new Audio("ses/tom-4.mp3");
      sounds.push(tom4);
    }
    else if (array[j] == 'J')
    {
      var snare = new Audio("ses/snare.mp3");  
      sounds.push(snare);
    }
    else if (array[j] == 'K')
    {
      var crash = new Audio("ses/crash.mp3");
      sounds.push(crash);
    }
    else if (array[j] == 'L')
    {
      var kick = new Audio("ses/kick-bass.mp3");    
      sounds.push(kick);
    }
    else
    {
      var bip = new Audio('ses/bip.mp3');
      sounds.push(bip);
    }
  }
  if (sounds.length > 0) {
    sounds.forEach((sound, index) => {
      setTimeout(() => {
        sound.play();
      }, index * 2000);
    });
    sounds.length = 0;
  }
}

Çok çok teşekkür ederim, şu an tam işte çalıştı. Yardım ettiğiniz ve zaman ayırdığınız için ne kadar teşekkür etsem azdır. Şu an tam istediğim gibi çalışıyor.

tabii efendim · 11 Haziran 2022

AuEnx dedi:
Çok çok teşekkür ederim, şu an tam işte çalıştı. Yardım ettiğiniz ve zaman ayırdığınız için ne kadar teşekkür etsem azdır. Şu an tam istediğim gibi çalışıyor.

Kodu ilk paylaştığımda sonuna sounds.length = 0 eklemeyi unutmuşum. İlk halini aldıysan birden fazla denemede üst üste eklenerek çalmaya başlar sesler. Son halini deneyebilirsin.

249873 · 11 Haziran 2022

Arkadaşlar Ses ardı ardına bastığımızda stackleniyor. Bunun çözümünü nedir?
Mesela 2 kere W basınca ses tekrar ediyor bayağı karışıyor.

AuEnx · 11 Haziran 2022

tabii efendim dedi:
Kodu ilk paylaştığımda sonuna sounds.length = 0 eklemeyi unutmuşum. İlk halini aldıysan birden fazla denemede üst üste eklenerek çalmaya başlar sesler. Son halini deneyebilirsin.

sounds.lenght = 0'i belirtilen yere ekledim ama şimdi fark ettim harfleri girip üst üste butona tıkladığım zaman her harften butona üst üste tıkladığım kadar çalıyor.

tabii efendim · 11 Haziran 2022

Sorunu anlayamadım tam olarak. Üst üste basınca aynı anda mı çalmaya başlıyor? Örnek olarak bir kez bastın ve sırada 'Q' ve 'E' sesleri var, 'E' harfi oynatılırken tekrar butona bastığında ilk 'E' ile ikinci 'Q' aynı anda mı çalıyor? Sorun bu yazdığımsa yapmak istediğin sesler çalarken tekrar ses eklenememesi mi yoksa butona basıldığında yeni seslerin, eski seslerin olduğu sıraya eklenmesi mi?

AuEnx · 11 Haziran 2022

tabii efendim dedi:
Sorunu anlayamadım tam olarak. Üst üste basınca aynı anda mı çalmaya başlıyor? Örnek olarak bir kez bastın ve sırada 'Q' ve 'E' sesleri var, 'E' harfi oynatılırken tekrar butona bastığında ilk 'E' ile ikinci 'Q' aynı anda mı çalıyor? Sorun bu yazdığımsa yapmak istediğin sesler çalarken tekrar ses eklenememesi mi yoksa butona basıldığında yeni seslerin, eski seslerin olduğu sıraya eklenmesi mi?

Evet hocam, resimdeki gibi inputa değer girip tıkla butonuna üst üste 2 kere bastığım zaman aynı anda her harften 2 kere çalmaya başlıyor ve sesler karışıyor. Mesela fotoğraftaki harfleri yazıp bastıktan hemen sonra çalmaya başlar başlamaz başka bir harf daha ekleyip basayım en başa almıyor direk diğer harfler daha çalmaya başlarken yeniden girilen harfleri de aynı anda çalmaya başlıyor

tabii efendim · 11 Haziran 2022

Sen nasıl çalışmasını istiyorsun? Butona tekrar bastığında eskisinin silinmesini ve yenisinin çalmasını mı, mevcut çalan ses varsa yeni ses eklenememesini mi yoksa yeni eklenen seslerin eskileri bittikten sonra çalması mı?

AuEnx · 11 Haziran 2022

tabii efendim dedi:
Sen nasıl çalışmasını istiyorsun? Butona tekrar bastığında eskisinin silinmesini ve yenisinin çalmasını mı, mevcut çalan ses varsa yeni ses eklenememesini mi yoksa yeni eklenen seslerin eskileri bittikten sonra çalması mı?

Butona tekrar bastığım zaman eskisinin devam etmemesini ve yeni girilen harflerin ya da mevcut harflerin başa dönüp tekrar çalmasını istiyorum hocam

tabii efendim · 11 Haziran 2022

Aşağıdaki şekilde dener misin? Sıkıntı çıkarabilecek tek şey ended eventi. Birkaç denemeden sonra herhangi bir sorun olursa yazarsın. removeEventListener() eklemek gerekebilir ama denemem gerekiyor onun için.

JavaScript:

const sounds = [];
function klavyesesYap()
{
  var girisK=document.getElementById('textt').value;
  const array = girisK.split(",");

  if (sounds.length > 0) {
    sounds.forEach((sound) => {
      sound.pause();
      sound.currentTime = 0;
    })
    sounds.length = 0;
  }

  for(j = 0; j < array.length; j++)
  {
    if ( array[j] == 'W' )
    {
      var tom1 = new Audio("ses/tom-1.mp3");
      sounds.push(tom1);
    }
    else if (array[j] == 'A')
    {
      var tom2 = new Audio("ses/tom-2.mp3");
      sounds.push(tom2);
    }
    else if (array[j] == 'S')
    {
      var crash = new Audio("ses/crash.mp3");
      sounds.push(crash);
    }
    else if (array[j] == 'D')
    {
      var tom4 = new Audio("ses/tom-4.mp3");
      sounds.push(tom4);
    }
    else if (array[j] == 'J')
    {
      var snare = new Audio("ses/snare.mp3");
      sounds.push(snare);
    }
    else if (array[j] == 'K')
    {
      var crash = new Audio("ses/crash.mp3");
      sounds.push(crash);
    }
    else if (array[j] == 'L')
    {
      var kick = new Audio("ses/kick-bass.mp3");  
      sounds.push(kick);
    }
    else
    {
      var bip = new Audio('ses/bip.mp3');
      sounds.push(bip);
    }
  }
  if (sounds.length > 0) {
    sounds.forEach((sound, index) => {
      setTimeout(() => {
        sound.play();
        if (index === sounds.length - 1) {
          sound.addEventListener('ended', () => {
            sounds.length = 0;
          }, {once: true});
        }
      }, index * 2000);
    });
  }
}

AuEnx · 11 Haziran 2022

tabii efendim dedi:

Aşağıdaki şekilde dener misin? Sıkıntı çıkarabilecek tek şey ended eventi. Birkaç denemeden sonra herhangi bir sorun olursa yazarsın. removeEventListener() eklemek gerekebilir ama denemem gerekiyor onun için.

JavaScript:

const sounds = [];
function klavyesesYap()
{
  var girisK=document.getElementById('textt').value;
  const array = girisK.split(",");

  if (sounds.length > 0) {
    sounds.forEach((sound) => {
      sound.pause();
      sound.currentTime = 0;
    })
    sounds.length = 0;
  }

  for(j = 0; j < array.length; j++)
  {
    if ( array[j] == 'W' )
    {
      var tom1 = new Audio("ses/tom-1.mp3");
      sounds.push(tom1);
    }
    else if (array[j] == 'A')
    {
      var tom2 = new Audio("ses/tom-2.mp3");
      sounds.push(tom2);
    }
    else if (array[j] == 'S')
    {
      var crash = new Audio("ses/crash.mp3");
      sounds.push(crash);
    }
    else if (array[j] == 'D')
    {
      var tom4 = new Audio("ses/tom-4.mp3");
      sounds.push(tom4);
    }
    else if (array[j] == 'J')
    {
      var snare = new Audio("ses/snare.mp3");
      sounds.push(snare);
    }
    else if (array[j] == 'K')
    {
      var crash = new Audio("ses/crash.mp3");
      sounds.push(crash);
    }
    else if (array[j] == 'L')
    {
      var kick = new Audio("ses/kick-bass.mp3"); 
      sounds.push(kick);
    }
    else
    {
      var bip = new Audio('ses/bip.mp3');
      sounds.push(bip);
    }
  }
  if (sounds.length > 0) {
    sounds.forEach((sound, index) => {
      setTimeout(() => {
        sound.play();
        if (index === sounds.length - 1) {
          sound.addEventListener('ended', () => {
            sounds.length = 0;
          }, {once: true});
        }
      }, index * 2000);
    });
  }
}

Yok hocam, olmadı sesler yine karışıyor. Butona basıp çalarken yeniden butona basılırsa o çalan kısım direk durup inputtakine en baştan çalmaya başlayıp bitirmesi lazım. Sanırım removelistener ile olacak galiba çözemedim tam.

JS ile HTML text kutusuna girilen harf ile ses çıkarma

Ayrıntılı düzenleme

AuEnx

Kilopat

Dosya Ekleri

AuEnx

Kilopat

tabii efendim

Centipat

249873

Kilopat

AuEnx

Kilopat

tabii efendim

Centipat

AuEnx

Kilopat

Dosya Ekleri

tabii efendim

Centipat

AuEnx

Kilopat

tabii efendim

Centipat

AuEnx

Kilopat

Benzer konular