audio-elementti: src, controls, loop ja autoplay
Upota äänentoistimet HTML5:n natiiveilla attribuuteilla
audio-elementti: src, controls, loop ja autoplay on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Natiivi ääni HTML5:ssä
HTML5 toi käyttöön <audio>-elementin äänen upottamiseen ilman laajennuksia:
<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 -->controls-attribuutti
controls-attribuutti näyttää selaimen sisäänrakennetun äänisoittimen:
<!-- 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) -->loop-attribuutti
loop-attribuutti aloittaa äänen uudelleen sen päätyttyä:
<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 -->autoplay-attribuutti
autoplay-attribuutti aloittaa toiston sivun latautuessa:
<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>muted-attribuutti
muted-attribuutti aloittaa äänen mykistettynä:
<!-- 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>preload-attribuutti
preload-attribuutti antaa selaimelle vihjeen ladattavan datan määrästä:
<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) -->Äänen ohjaaminen JavaScriptillä
Ohjaa ääntä JavaScriptillä:
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);Äänitapahtumat
Yleisiä äänitapahtumia:
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'));Mukautettu äänisoitin
Rakenna mukautettu soitin JavaScriptillä ja CSS:llä:
<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>Äänen saavutettavuus
Äänen saavutettavuusvaatimukset:
- Tarjoa tekstivastine kaikesta äänisisällöstä
- Podcasteille: lisää linkki tekstimuotoiseen litterointiin
- Automaattisesti toistuva ääni rikkoo WCAG 1.4.2 -vaatimusta, jos se kestää yli 3 sekuntia
- Varmista, että ohjaimet ovat käytettävissä näppäimistöllä (natiiviohjaimet ovat)
src ja source-elementti
Määritä vaihtoehtoiset muodot <source>-elementillä (seuraava oppitunti):
<!-- 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>Pikatarkistus
Mikä audio-attribuutti näyttää selaimen sisäänrakennetun soitinkäyttöliittymän?
Kertaus: audio-elementti
audio-elementin perusteet:
controls— näytä soitinkäyttöliittymä (lisää tämä lähes aina)loop— aloita toisto uudelleen, kun ääni päättyyautoplay— toista latauksen yhteydessä (useimmat selaimet estävät tämän)muted— aloita mykistettynä (mahdollistaa automaattisen toiston useimmissa selaimissa)preload="metadata"— hyvä oletusasetus podcasteille ja musiikille- Tarjoa tekstivastineet saavutettavuutta varten
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”audio-elementti: src, controls, loop ja autoplay” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “audio-elementti: src, controls, loop ja autoplay”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”audio-elementti: src, controls, loop ja autoplay”?
Upota äänentoistimet HTML5:n natiiveilla attribuuteilla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”audio-elementti: src, controls, loop ja autoplay”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- audio-elementti: src, controls, loop ja autoplay
- video-elementti ja kuvasuhde
- source-elementti useille formaateille
- Tekstitykset track-elementillä ja WebVTT:llä