HTML Mouse resmin üzerine geldiğinde ses oynatma

**Hasan** · 03-10-2025, 01:34 PM

Aklımı kurcalayan bir soruydu eski sitemde bunu yapmak için bakmadığım kod kalmamıştır. Hazır aklıma gelmişken sizinlede paylaşayım dedim.

Amaç sayfada belirli yerde müzik çalmak. Bunun button olanı var bana saçma geliyor yazı veya resim daha iyi. Ben bunu logo da kullanmıştım. Millet logoya gelince "OOhh yeeeaahh" diyordu. Siz kendinize göre sentezleyebilirsiniz. Ancak unutmayınız ki HTML sayfasında fare bir öğenin üzerine geldiğinde ses çalmak için sadece HTML kodu değil bunun bağlı olduğu JavaScript kodu kullanmamız da gerekmektedir. Vereceğim kodlar bir bütün hatalı bir şey olursa kodlar çalışmaz.

Peki bunu nasıl yapacağız:

1.adım

Öncelikle, çalmak istediğiniz ses dosyasını HTML belgenize eklemeniz gerekir. Bunu <audio> etiketiyle yapabilirsiniz.

Kod:
<audio id="sesCal" src="calacak.mp3"></audio>

2.adım

Hangi resimde alacaksa onu ayarlayacağız. Bunun için resme kimlik vermemiz gerekecek yani "id" ekleyeceğiz.

Kod:
<img id="resimMouse" src="resminiz.jpg" alt="Resminiz">

Kodların son hali:

Kod:
<img id="resimMouse" src="resminiz.jpg" alt="Resminiz">

<audio id="sesCal" src="calacak.mp3"></audio>

3.adım
HTML kodları yazdığımıza göre artık tek bir işlem kaldı bunu oynatmak için gerekli olan javascript kodu:

Kod:
script>

  var resimMouse = document.getElementById("resimMouse");

  var sesCal = document.getElementById("sesCal");

  resimMouse.addEventListener("mouseover", function() {

    sesCal.play();

  });

</script>

işlem bu kadar Smile

» Son Düzenleme: 03-10-2025, 01:44 PM, Düzenleyen: Hasan.