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?

await · 11 Haziran 2022

Bence bunu text kutusu ile yapmamalisin, direkt sayfa uzerinde bir textbox'a tiklayarak yazmadan tiklandiginda ses cikmali.

Bunu yapmak icin direkt document'a onkeydown verebilirsin.

JavaScript:

document.onkeydown = function(e) {
    if(e.keyCode == 66) {
        // b tusuna basildi b tusunda calan sesi calistiran fonksiyon calistirilabilir
        // ya da direkt audio.play()
      }
}

Senin dedigin gibi bir input alanina yazildiginda ses cikmasini istiyorsan yukaridaki kodda document yerine, input elementini id ile yakalayip verebilirsin

AuEnx · 11 Haziran 2022

await dedi:
Bence bunu text kutusu ile yapmamalisin, direkt sayfa uzerinde bir textbox'a tiklayarak yazmadan tiklandiginda ses cikmali.

Bunu yapmak icin direkt document'a onkeydown verebilirsin.

JavaScript:

document.onkeydown = function(e) { if(e.keyCode == 66) { // b tusuna basildi b tusunda calan sesi calistiran fonksiyon calistirilabilir // ya da direkt audio.play() } }

Senin dedigin gibi bir input alanina yazildiginda ses cikmasini istiyorsan yukaridaki kodda document yerine, input elementini id ile yakalayip verebilirsin

Input alanına sesini çıkarmasını istediğim harfı girdikten sonra aşağıdaki kodla sesi çıkarmasını başarabildim fakat bu seferde ben birden fazla harf girdikten sonra tıkladığım zaman sırasıyla da bana girdiğim harflerin seslerini çıkarmasını istiyorum. Örneğin; Input alanına W,S,D girdikten sonra sırasıyla bana bu harflerin seslerini çıkarsın istiyorum fakat şimdi de burada takıldım bir türlü yapamadım. Bunun dışında tek harf girip butona tıkladığım zaman sesleri çıkarıyor. Son durum aşağıda olan resimdeki gibi.

Kod:

function klavyesesYap()
{
  var girisK=document.getElementById('textt').value;
 
  if ( girisK == 'W' )
  {
    var crash = new Audio("ses/tom-1.mp3");
    crash.play();
  }

  else if (girisK == 'A')
  {
    var tom2 = new Audio("ses/tom-2.mp3");
      tom2.play();
  }
  else if (girisK == 'S')
  {
    var crash2 = new Audio('ses/crash.mp3');
    crash2.play();
  }
  else if ( girisK == 'D')
  {
    var tom4 = new Audio('ses/tom-4.mp3');
    tom4.play();
  }
  else if ( girisK == 'J')
  {
    var snare = new Audio('ses/snare.mp3');
    snare.play();
  }
  else if ( girisK == 'K')
  {
    var crash = new Audio('ses/crash.mp3');
    crash.play();
  }
  else if ( girisK == 'L')
  {
    var kick = new Audio('ses/kick-bass.mp3');
    kick.play();
  }

  else
  {
    var crash = new Audio('ses/crash.mp3');
    crash.play();
  }
}

document.getElementById('tus').addEventListener('click',klavyesesYap,false);

Yuspro · 11 Haziran 2022

AuEnx dedi:
Input alanına sesini çıkarmasını istediğim harfı girdikten sonra aşağıdaki kodla sesi çıkarmasını başarabildim fakat bu seferde ben birden fazla harf girdikten sonra tıkladığım zaman sırasıyla da bana girdiğim harflerin seslerini çıkarmasını istiyorum. Örneğin; Input alanına W,S,D girdikten sonra sırasıyla bana bu harflerin seslerini çıkarsın istiyorum fakat şimdi de burada takıldım bir türlü yapamadım. Bunun dışında tek harf girip butona tıkladığım zaman sesleri çıkarıyor. Son durum aşağıda olan resimdeki gibi.

Input alanındaki değeri aldıktan sonra, const myArray = girisK.split(""); bu şeklide parçalayıp girilen harfleri bir diziye atayın. Daha sonra bu diziyi forEach döngüsü ile dolaşarak sesleri çalabilirsiniz. Seslerin belirli aralıklarla çalmasını sağlamak için setTimeout() fonksiyonu ile callback ve promise gibi kavramları araştırabilirsiniz.

AuEnx · 11 Haziran 2022

Yuspro dedi:
Input alanındaki değeri aldıktan sonra, const myArray = girisK.split(""); bu şeklide parçalayıp girilen harfleri bir diziye atayın. Daha sonra bu diziyi forEach döngüsü ile dolaşarak sesleri çalabilirsiniz. Seslerin belirli aralıklarla çalmasını sağlamak için setTimeout() fonksiyonu ile callback ve promise gibi kavramları araştırabilirsiniz.

Kod:

const array = girisK.split(",");

  for(j = 0; j < array.length; j++)
  {
    if ( array[j] == 'W' )
    {
      var tom1 = new Audio("ses/tom-1.mp3");
      
      tom1.play();
    }
    else if (array[j] == 'A')
    {
      var tom2 = new Audio("ses/tom-2.mp3");

      tom2.play();
    }
    else if (array[j] == 'S')
    {
      var crash = new Audio("ses/crash.mp3");
  
      crash.play();
    }
    else if (array[j] == 'D')
    {
      var tom4 = new Audio("ses/tom-4.mp3");

      tom4.play();
    }
    else if (array[j] == 'J')
    {
      var snare = new Audio("ses/snare.mp3");
    
      snare.play();
    }
    else if (array[j] == 'K')
    {
      var crash = new Audio("ses/crash.mp3");

      crash.play();
    }
    else if (array[j] == 'L')
    {
      var kick = new Audio("ses/kick-bass.mp3");
      
      kick.play();
    }
    else
    {
      var bip = new Audio('ses/bip.mp3');
      bip.play();
    }
  }

An itibari ile düzelttim kodları hocam, split'e "," atayıp inputa örneğin; A,S girdiğim zaman bana iki sesi de çıkarıyor. Şimdi tek kalan örneğin ben yine bu iki harfı girip bastığım zaman sesleri yine çalsın ama belirli aralıkla çalmasını istiyorum. İlk önce A harfini çalsın 2 saniye sonra S harfini çalsın istiyorum. setTimeout ile ilgili kaynaklara baktım ama bulamadım. Bu yukarıdaki kodumun neresine ve nasıl yazmalıyım settimeout komutunu?

tabii efendim · 11 Haziran 2022

if ... else if kullanarak tek tek bakmak yerine tüm butonlara aynı ismi verip, const btns = document.querySelectorAll("[name='btn_name']") şeklinde tanımlayarak döngüyle kontrol edebilirsin(Array.from(btns).forEach()). Denemek istersen örnek kod(harfleri girdikten sonra enter tuşuna basınca oynatıyor):

HTML:

<body>
    <div>

        <button name="audio_btn">
            Q
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-tone-3.mp3">
        </button>

        <button name="audio_btn">
            W
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-hi-hat-14-inch-1.mp3">
        </button>

        <button name="audio_btn">
            E
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-short-3.mp3">
        </button>

        <button name="audio_btn">
            R
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-distorted-3.mp3">
        </button>

        <button name="audio_btn">
            T
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-distorted-5.mp3">
        </button>

        <input name="audio_input">

    </div>
</body>

JavaScript:

const audio_btns = document.querySelectorAll("[name='audio_btn']");
const audio_input = document.querySelector("[name='audio_input']");
const sounds = [];

document.addEventListener('input', function(inp) {
  const { target } = inp;
  if (target.name === "audio_input") {
    if (!target.value.match(/^[a-zA-Z],?((,[a-zA-Z],?)?)*$/)) {
      target.value = target.value.slice(0, -1);
    }
    target.value = target.value.toUpperCase();
  }
});

audio_input.addEventListener("keypress", (event) => {
  const { key } = event;
  if (key === "Enter") {
    if (sounds.length > 0) return;
    const values = audio_input.value.split(",");
    values.forEach((value) => {
      Array.from(audio_btns).find((btn) => {
        if (btn.textContent.trim() === value) {
          sounds.push(btn.children[0]);
        }
      })
    });
    playSounds(sounds);
  }
});

document.addEventListener('click', async (event) => {
  const { target } = event;
  if (target.name === "audio_btn") {
    const audio = target.children[0];
    await audio.play();
  }
})

const playSounds = (sounds) => {
  if (sounds.length > 0) {
    const sound = sounds[0];
    sound.play();
    sound.addEventListener('ended', () => {
      sounds.shift();
      if (sounds.length > 0) {
        playSounds(sounds);
      }
    }, {once: true});
  }
}

AuEnx · 11 Haziran 2022

tabii efendim dedi:

if ... else if kullanarak tek tek bakmak yerine tüm butonlara aynı ismi verip, const btns = document.querySelectorAll("[name='btn_name']") şeklinde tanımlayarak döngüyle kontrol edebilirsin(Array.from(btns).forEach()). Denemek istersen örnek kod(harfleri girdikten sonra enter tuşuna basınca oynatıyor):

HTML:

<body>
    <div>

        <button name="audio_btn">
            Q
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-tone-3.mp3">
        </button>

        <button name="audio_btn">
            W
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-hi-hat-14-inch-1.mp3">
        </button>

        <button name="audio_btn">
            E
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-short-3.mp3">
        </button>

        <button name="audio_btn">
            R
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-distorted-3.mp3">
        </button>

        <button name="audio_btn">
            T
            <audio src="https://cdn.staticcrate.com/stock-hd/audio/soundscrate-electronic-kick-distorted-5.mp3">
        </button>

        <input name="audio_input">

    </div>
</body>

JavaScript:

const audio_btns = document.querySelectorAll("[name='audio_btn']");
const audio_input = document.querySelector("[name='audio_input']");
const sounds = [];

document.addEventListener('input', function(inp) {
  const { target } = inp;
  if (target.name === "audio_input") {
    if (!target.value.match(/^[a-zA-Z],?((,[a-zA-Z],?)?)*$/)) {
      target.value = target.value.slice(0, -1);
    }
    target.value = target.value.toUpperCase();
  }
});

audio_input.addEventListener("keypress", (event) => {
  const { key } = event;
  if (key === "Enter") {
    if (sounds.length > 0) return;
    const values = audio_input.value.split(",");
    values.forEach((value) => {
      Array.from(audio_btns).find((btn) => {
        if (btn.textContent.trim() === value) {
          sounds.push(btn.children[0]);
        }
      })
    });
    playSounds(sounds);
  }
});

document.addEventListener('click', async (event) => {
  const { target } = event;
  if (target.name === "audio_btn") {
    const audio = target.children[0];
    await audio.play();
  }
})

const playSounds = (sounds) => {
  if (sounds.length > 0) {
    const sound = sounds[0];
    sound.play();
    sound.addEventListener('ended', () => {
      sounds.shift();
      if (sounds.length > 0) {
        playSounds(sounds);
      }
    }, {once: true});
  }
}

Örnek kodlar için teşekkürler hocam. Zaten fazla bir şey kalmadı, son olarak sadece inputa girdiğim harfleri butona tıkladıktan sonra harfleri belirli bir süre içerisinde arka arkaya çalmasını ayarlamaya çalışıyorum bundan sonra bitiyor bu kodlarla işim. Inputa 4 harf girdikten sonra butona tıklar tıklamaz bana 2 saniye aralıklarla o harfleri çalmasını nasıl sağlayabilirim?

tabii efendim · 11 Haziran 2022

if blokları içinde sesi oynatmak yerine attığım koddaki gibi(const sounds = []) boş bir array tanımla, if bloklarının içinde audio.play() yerine sounds.push(audio) kodunu kullan. Paylaştığım kodun sonundaki playSounds fonksiyonunu kendi koduna ekle ve for döngün bittikten sonra playSounds() fonksiyonunu çağır(playSounds(sounds)).

AuEnx dedi:
2 saniye aralıklarla o harfleri çalmasını nasıl sağlayabilirim?

Yukarıda yazdığım şekilde yaparsan bir ses bittikten sonra diğerini oynatır. 2 saniye aralıklarla oynatmasını istiyorsan playSounds() fonksiyonunu aşağıdaki gibi düzenleyebilirsin:

JavaScript:

const playSounds = (sounds) => {
  if (sounds.length === 0) return;
  sounds[0].play();
  setTimeout(() => {
    sounds.shift();
    if (sounds.length > 0) {
      playSounds(sounds);
    };
  }, 2000);
}

AuEnx · 11 Haziran 2022

tabii efendim dedi:
if blokları içinde sesi oynatmak yerine attığım koddaki gibi(const sounds = []) boş bir array tanımla, if bloklarının içinde audio.play() yerine sounds.push(audio) kodunu kullan. Paylaştığım kodun sonundaki playSounds fonksiyonunu kendi koduna ekle ve for döngün bittikten sonra playSounds() fonksiyonunu çağır(playSounds(sounds)).

Yukarıda yazdığım şekilde yaparsan bir ses bittikten sonra diğerini oynatır. 2 saniye aralıklarla oynatmasını istiyorsan playSounds() fonksiyonunu aşağıdaki gibi düzenleyebilirsin:

JavaScript:

const playSounds = (sounds) => { if (sounds.length === 0) return; sounds[0].play(); setTimeout(() => { sounds.shift(); if (sounds.length > 0) { playSounds(sounds); }; }, 2000); }

Yeniden çok teşekkür ederim hocam ama beceremedim tüm kodları karman çorman ettim az daha elimdeki de gidiyordu setTimeout kodunu mevcut koduma koymaya çalışıyorum.

Kod:

function klavyesesYap()
{
  var girisK=document.getElementById('textt').value;
  const array = girisK.split(",");
 
  for(j = 0; j < array.length; j++)
  {

    if ( array[j] == 'W' )
    {
      var tom1 = new Audio("ses/tom-1.mp3");
      tom1.play();
    }
    else if (array[j] == 'A')
    {
      var tom2 = new Audio("ses/tom-2.mp3");
      tom2.play();
    }
    else if (array[j] == 'S')
    {
      var crash = new Audio("ses/crash.mp3");
      crash.play();
    }
    else if (array[j] == 'D')
    {
      var tom4 = new Audio("ses/tom-4.mp3");
      tom4.play();
    }
    else if (array[j] == 'J')
    {
      var snare = new Audio("ses/snare.mp3");  
      snare.play();
    }
    else if (array[j] == 'K')
    {
      var crash = new Audio("ses/crash.mp3");
      crash.play();
    }
    else if (array[j] == 'L')
    {
      var kick = new Audio("ses/kick-bass.mp3");    
      kick.play();
    }
    else
    {
      var bip = new Audio('ses/bip.mp3');
      bip.play();
    }
  }
 
}

Mevcut kodum şu an böyle.

tabii efendim · 11 Haziran 2022

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

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

Ayrıntılı düzenleme

AuEnx

Kilopat

Dosya Ekleri

await

Hectopat

AuEnx

Kilopat

Dosya Ekleri

Yuspro

Megapat

AuEnx

Kilopat

tabii efendim

Centipat

AuEnx

Kilopat

tabii efendim

Centipat

AuEnx

Kilopat

tabii efendim

Centipat

Benzer konular