Element audio — src, controls, loop i autoplay
Osadzanie odtwarzaczy audio za pomocą natywnych atrybutów HTML5
Element audio — src, controls, loop i autoplay to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Natywny dźwięk w HTML5
HTML5 wprowadził element <audio> do osadzania dźwięku bez wtyczek:
<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 -->Atrybut controls
Atrybut controls wyświetla wbudowany odtwarzacz dźwięku przeglądarki:
<!-- 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) -->Atrybut loop
Atrybut loop ponownie uruchamia dźwięk po jego zakończeniu:
<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 -->Atrybut autoplay
Atrybut autoplay rozpoczyna odtwarzanie po wczytaniu strony:
<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>Atrybut muted
Atrybut muted uruchamia dźwięk z wyciszeniem:
<!-- 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>Atrybut preload
Atrybut preload wskazuje, ile danych należy wczytać:
<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) -->Sterowanie dźwiękiem za pomocą JavaScriptu
Sterowanie dźwiękiem za pomocą JavaScriptu:
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);Zdarzenia dźwięku
Typowe zdarzenia dźwięku:
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'));Niestandardowy odtwarzacz dźwięku
Odtwarzacz niestandardowy można zbudować za pomocą JavaScriptu i CSS:
<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>Dostępność dźwięku
Wymagania dotyczące dostępności dźwięku:
- Należy udostępnić transkrypcję całej zawartości dźwiękowej
- W przypadku podcastów należy umieścić odnośnik do transkrypcji tekstowej
- Automatyczne odtwarzanie dźwięku narusza WCAG 1.4.2, jeśli trwa on dłużej niż 3 sekundy
- Należy upewnić się, że elementy sterujące są dostępne z klawiatury (natywne elementy sterujące są dostępne)
Element src a source
Alternatywne formaty należy określać za pomocą elementu <source> (w następnej lekcji):
<!-- 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>Szybkie sprawdzenie
Jaki atrybut audio wyświetla wbudowany interfejs odtwarzacza przeglądarki?
Powtórzenie: element audio
Najważniejsze informacje o elemencie audio:
controls— wyświetla interfejs odtwarzacza (prawie zawsze należy go uwzględniać)loop— ponownie uruchamia odtwarzanie po zakończeniuautoplay— odtwarza po wczytaniu (większość przeglądarek blokuje tę funkcję)muted— rozpoczyna odtwarzanie z wyciszeniem (w większości przeglądarek umożliwia autoplay)preload="metadata"— dobślne ustawienie dla podcastów i muzyki- Należy zapewnić transkrypcje ze względu na dostępność
Często zadawane pytania
Czy lekcja „Element audio — src, controls, loop i autoplay” jest bezpłatna?
Tak — pełny tekst „Element audio — src, controls, loop i autoplay” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Element audio — src, controls, loop i autoplay”?
Osadzanie odtwarzaczy audio za pomocą natywnych atrybutów HTML5 Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Element audio — src, controls, loop i autoplay”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Element audio — src, controls, loop i autoplay
- Element video i współczynnik proporcji
- Element source dla wielu formatów
- Napisy za pomocą track i WebVTT