HTML Academy · Ders

audio Öğesi: src controls loop autoplay

Yerel HTML5 öznitelikleriyle ses oynatıcıları gömün

audio Öğesi: src controls loop autoplay, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

HTML5'te Yerel audio

HTML5, eklenti kullanmadan audio gömmek için <audio> öğesini kullanıma sundu:

<audio src="podcast.mp3" controls>
  Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->

Denetimler Özniteliği

controls özniteliği, tarayıcının yerleşik audio oynatıcısını görüntüler:

<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>

<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>

<!-- Always include controls for user-accessible audio
     Unless it is a background ambient sound (use controls anyway for accessibility) -->

Döngü Özniteliği

loop özniteliği, sona erdiğinde audio oynatımını yeniden başlatır:

<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->

Otomatik Oynatma Özniteliği

autoplay özniteliği, sayfa yüklendiğinde oynatmayı başlatır:

<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->

<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>

Sessiz Özniteliği

muted özniteliği, audio oynatımını sessiz olarak başlatır:

<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>

<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>

Önceden Yükleme Özniteliği

preload özniteliği, ne kadar veri yükleneceğine ilişkin ipucu verir:

<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->

<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->

<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->

JavaScript ile audio Denetimi

audio denetimini JavaScript ile gerçekleştirin:

const audio = document.getElementById('my-audio');

// Play:
audio.play();

// Pause:
audio.pause();

// Current time (seconds):
audio.currentTime = 30;  // jump to 30 seconds

// Volume (0 to 1):
audio.volume = 0.5;

// Duration:
console.log(audio.duration);

audio Olayları

Yaygın audio olayları:

audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
  console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));

Özel audio Oynatıcı

JavaScript ve CSS ile özel bir oynatıcı oluşturun:

<div class="audio-player">
  <audio id="player" src="podcast.mp3" preload="metadata"></audio>
  <button id="play-btn" aria-label="Play">▶</button>
  <input type="range" id="scrubber" value="0" min="0" max="100">
  <span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});
</script>

Erişilebilir audio

audio için erişilebilirlik gereksinimleri:

Tüm audio içeriği için metin dökümü sağlayın
Podcast'ler için: bir metin dökümüne bağlantı verin
Otomatik oynatılan audio 3 saniyeden uzun sürerse WCAG 1.4.2'yi ihlal eder
Denetimlerin klavyeyle kullanılabildiğinden emin olun (yerel denetimler kullanılabilir)

src ve source Öğesi

<source> ile biçim seçeneklerini belirtin (sonraki ders):

<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>

<!-- Multiple formats: -->
<audio controls>
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Hızlı Kontrol

Hangi audio özniteliği tarayıcının yerleşik oynatıcı arayüzünü gösterir?

Özet: audio Öğesi

audio öğesinin temel özellikleri:

controls — oynatıcı arayüzünü gösterir (neredeyse her zaman ekleyin)
loop — bittiğinde yeniden başlatır
autoplay — yükleme sırasında oynatır (çoğu tarayıcı engeller)
muted — sessiz başlatır (çoğu tarayıcıda otomatik oynatmayı etkinleştirir)
preload="metadata" — podcast/müzik için iyi bir varsayılan
Erişilebilirlik için metin dökümleri sağlayın

Sıkça Sorulan Sorular

“audio Öğesi: src controls loop autoplay” dersi ücretsiz mi?

Evet — “audio Öğesi: src controls loop autoplay” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“audio Öğesi: src controls loop autoplay” dersinde ne öğreneceğim?

Yerel HTML5 öznitelikleriyle ses oynatıcıları gömün HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“audio Öğesi: src controls loop autoplay” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön