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

AuEnx

AuEnx

Kilopat
Katılım
25 Aralık 2018
Mesajlar
497
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
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?
 

Dosya Ekleri

  • Ekran Alıntısı.JPG
    Ekran Alıntısı.JPG
    98 KB · Görüntüleme: 80
Tarihe göre sırala Puana göre sırala
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
 
Artı 0 Eksi
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
Genişletmek için tıkla...
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);
 

Dosya Ekleri

  • Ekran Alıntısı.JPG
    Ekran Alıntısı.JPG
    84,4 KB · Görüntüleme: 42
Artı 0 Eksi
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.
Genişletmek için tıkla...
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.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
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?
 
Son düzenleme:
Artı 0 Eksi
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});
  }
}
 
Son düzenleme:
Artı 0 Eksi
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});
  }
}
Genişletmek için tıkla...
Ö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?
 
Artı 0 Eksi
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?
Genişletmek için tıkla...
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);
}
 
Son düzenleme:
Artı 0 Eksi
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);
}
Genişletmek için tıkla...
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.
 
Artı 0 Eksi
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;
  }
}
 
Artı 0 Eksi

Benzer konular

Eşref Bey
  • Çözüldü
Çözüldü  HTML, JS ile nasıl bağlanır?
Mesaj
4
Görüntüleme
2.712
AhmetKnKc
AhmetKnKc
G
HTML-CSS-JS ile e-ticaret sitesi yapılabilir mi?
Mesaj
7
Görüntüleme
922
Black Mesa Çalışanı
B
Berkay Davas
HTML, CSS ve JS ile RGB zaman sayacı uygulaması
2
Mesaj
11
Görüntüleme
2.927
Shrp
Shrp
B
HTML, CSS, JS ile baştan sonra bir web sitesi yapılabilir mi?
2
Mesaj
17
Görüntüleme
7.703
pikachuadam
P
eater
  • Soru
JS ile HTML'de açılabilir menü nasıl yapılır?
Mesaj
6
Görüntüleme
1.271
Berkay Davas
Berkay Davas

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı