Çalıştırılabilir HTML Dokümanları: HTML audio

Q: Bir HTML sayfasına nasıl ses eklenir?

kullan. controls özelliği tarayıcının oynat butonu, zaman çizelgesi ve ses kontrolü olan oynatıcısını gösterir. O olmadan element görünmezdir.

Q: HTML'de ses nasıl döngüye alınır?

loop özelliğini ekle: . Dosya bittiğinde baştan yeniden başlar.

Q: JavaScript ile nasıl ses çalınır?

Bir audio elementi oluştur ya da seç ve play() çağır, örneğin bir tıklama işleyicisinin içinde new Audio('click.mp3').play(). play(), tarayıcı oynatmayı engellerse reddedilen bir promise döndürür.

Ses nasıl eklenir

<audio> elementini bir ses dosyasına yönlendir ve controls ekle:

<audio src="song.mp3" controls></audio>

controls tarayıcının oynatıcısını gösterir: oynat ve duraklat, bir zaman çizelgesi, süre ve bir ses kontrolü. controls olmadan element hiç yer kaplamaz. Önizleme bilgisayarından dosya yükleyemez, bu yüzden bu örnek tarayıcıda bir script ile kısa bir WAV dosyası oluşturur ve onu src olarak kullanır. Oynat'a bas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

Oynatıcı Chrome, Firefox ve Safari'de farklı görünür, çünkü her tarayıcı kendininkini çizer. controls değerini sil, oynatıcı kaybolur, ama ses JavaScript'in çalması için hâlâ oradadır.

Audio özellikleri

Özellik	Ne yapar
`controls`	Tarayıcının oynatıcısını gösterir
`autoplay`	Yüklenince çalmaya başlamayı dener (sesliyse engellenir, aşağıya bak)
`loop`	Dosya bittiğinde yeniden başlar
`muted`	Ses kapalı başlar
`preload`	`none` (oynatılana kadar hiçbir şey indirme), `metadata` (yalnızca uzunluk) ya da `auto` (tarayıcı karar verir)
`src`	Çalınacak dosya; ya da birkaç biçim için `<source>` alt elementleri kullan

Bir podcast bölüm listesi gibi çok sayıda oynatıcı olan sayfalarda, sayfa her dosyayı en baştan indirmesin diye preload="none" ya da "metadata" kullan.

Biçimler ve yedekler

<source> ile birkaç dosya listele, tarayıcı desteklediği ilkini çalar. Elementin içindeki metin yalnızca <audio> desteği olmayan tarayıcılarda görünür:

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

Biçim	MIME türü	Notlar
MP3	`audio/mpeg`	Güncel her tarayıcıda çalar; güvenli tek seçim
AAC (`.m4a`)	`audio/mp4`	Yaygın olarak desteklenir, küçük boyutlarda iyi kalite
Opus ya da Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	Küçük dosyalar; Safari desteği sürüme göre değiştiği için yedek olarak MP3 listele
WAV	`audio/wav`	Sıkıştırılmamış ve büyük; kısa ses efektleri için uygun

Otomatik oynatma neden başarısız olur

Tarayıcılar bir sayfanın kendi kendine ses çıkarmaya başlamasına izin vermez. autoplay ya da kullanıcı tıklamadan veya dokunmadan önce play() çağırmak reddedilir. Bu örnek yüklenirken çalmayı dener ve ne olduğunu yazdırır, sonra bir buton sunar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

Genellikle bir tarayıcının oynatmayı engellediğinde verdiği hata olan NotAllowedError görürsün. Buton çalışır, çünkü bir tıklama izin sayılır. Her tarayıcının kendi ek kuralları vardır (örneğin Chrome sık medya oynattığın siteleri hatırlar), bu yüzden asla otomatik oynatmaya güvenme: sesi bir kullanıcı eyleminden başlat ve play() çağrısının döndürdüğü promise'i her zaman ele al.

new Audio(url) JavaScript'te sayfaya eklemeden bir audio elementi oluşturur; ses efektleri için kullanışlıdır.

Kendi kontrollerini yap

controls yazmayarak yerleşik oynatıcıyı gizle, sonra elementi JavaScript API'siyle yönet: play(), pause(), currentTime, duration, volume ve timeupdate ile ended gibi olaylar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

Buton gerçek bir <button> olduğu için klavyeyle çalışır ve yazısı Play ile Pause arasında değişir. Dosyanın sonunda tarayıcı elementi duraklatır ve ended olayını tetikler, böylece buton kendiliğinden Play'e döner. Özel kontroller yaparsan, yerleşik olanların sana hiçbir ek iş olmadan verdiklerini de üstlenirsin: klavye desteği, etiketler ve bir ses kontrolü.

Erişilebilirlik

Sesi asla kendiliğinden başlatma. Ekran okuyucuları böler ve insanları irkiltir. Sesi bir tıklamadan başlat.
Podcast'ler ve konuşma içeren sesler için bir metin dökümü sun. Oynatıcının altında bir metin sürümüne giden link yeterlidir ve arama motorları onu okuyabilir.
controls değerini koru ya da ses klavyeyle duraklatılabilsin diye kontrolleri gerçek butonlardan yap.

Altyazı ve poster içeren sesli videolar için video etiketi sayfasına bak; <audio> özelliklerinin çoğunu ve JavaScript API'sinin tamamını onunla paylaşır.

Sık yapılan hatalar

controls unutmak. Element onsuz görünmezdir ve hiçbir şey olmamış gibi görünür.
autoplay özelliğinin çalışmasını beklemek. Oynatmayı bir tıklamadan başlat ve play() çağrısından gelen promise'i ele al.
Yanlış bir dosya yolu ya da türü. Kontrol etmek için dosya URL'sini doğrudan aç ve type değerini gerçek biçimle eşleştir (MP3 için audio/mpeg).
Uzun bir listedeki her dosyayı yüklemek. preload="none" ya da "metadata" kullan.
Durdurulamayan arka plan müziği. İnsanlara her zaman duraklatmanın görünür bir yolunu ver.

Sıkça Sorulan Sorular

Bir HTML sayfasına nasıl ses eklenir?

<audio src="song.mp3" controls></audio> kullan. controls özelliği tarayıcının oynat butonu, zaman çizelgesi ve ses kontrolü olan oynatıcısını gösterir. O olmadan element görünmezdir.

Sesim neden otomatik çalmıyor?

Tarayıcılar, kullanıcı sayfayla etkileşime girmeden sesli başlayan sesleri engeller. Onun yerine oynatmayı bir tıklamadan audio.play() ile başlat. Sessiz bir element otomatik çalabilir, ama ses için bu nadiren işe yarar.

HTML'de hangi ses biçimini kullanmalıyım?

MP3 güncel her tarayıcıda çalar, bu yüzden tek bir dosya için güvenli seçimdir. .m4a dosyasındaki AAC de yaygın olarak desteklenir. Birden fazla biçim sunmak için <source> elementleri kullan.

HTML'de ses nasıl döngüye alınır?

loop özelliğini ekle: <audio src="rain.mp3" controls loop>. Dosya bittiğinde baştan yeniden başlar.

JavaScript ile nasıl ses çalınır?

Bir audio elementi oluştur ya da seç ve play() çağır, örneğin bir tıklama işleyicisinin içinde new Audio('click.mp3').play(). play(), tarayıcı oynatmayı engellerse reddedilen bir promise döndürür.

HTML ses oynatıcısına stil verebilir miyim?

Yalnızca biraz: genişliğini, margin'ini ve display değerini ayarlayabilirsin, ama içindeki butonları tarayıcı çizer ve her birinde farklı görünürler. Özel bir görünüm için kontrolleri gizle ve butonlar ile audio JavaScript API'si kullanarak kendininkini yap.

İlgili kavramlar