React'de Ses Dosyası Nasıl Oynatılır?

React projelerinizde bazı durumlarda ses dosyalarını oynatmak isteyebilirsiniz. Örneğin bildirim geldiğinde tatlı bir bildirim sesi çalsın isteyebilirsiniz, ya da bir oyun yazıyorsanız buton aksiyonların da, skor değiştiğinde, oyun bittiğinde vs. ses çalsın isteyebilirsiniz.

Peki React'de nasıl ses dosyalarını oynatıyoruz? Aslında çok kolay bir konu, javascript'deki Audio sınıfını kullanıyoruz, yani teknik olarak React'e özgü bir konu olmasa da, yine de şöyle uyguluyoruz:

// calinacak ses dosyasi
import ses from "./ses.mp3";

const App = () => {

  // ses dosyasini baslatiyoruz
  const audio = new Audio(ses);
  
  // donguye sokup surekli caldiracaksak bu alani kullanabilirsiniz
  // audio.loop = true;

  return (
    <div>
      <button
        onClick={() => {
          // butona basinca, oynatiyoruz
          audio.play();
        }}
      >
        Oynt
      </button>
      <button onClick={() => {
        // butona basinca, durduruyoruz
        audio.pause()
      }}>
        Durdur
      </button>
    </div>
  );
};