A HTML5 segítségével egyszerűen hozzáadhat hangot és zenét a weboldaladhoz az elemhez. Valójában a legnehezebb dolog az, hogy hozzon létre több forrást, amellyel meg kell győződnie arról, hogy a hangfájlok a lehető legszélesebb böngészőn játszanak.
A HTML5 használatának előnye, hogy a hangot csak néhány címke használatával ágyazhatja be. A böngészők, majd játssza le a hangot, mintha egy IMG elem használatakor megjelenítenék a képet.
Hang hozzáadása a HTML5 weboldalhoz
Szüksége lesz egy HTML-szerkesztőre , egy hangfájlra (lehetőleg MP3 formátumban) és egy hangfájl-konvertálóra.
- Először hangfájlra van szüksége. A legjobb fájl rögzítése MP3-fájlként ( .mp3 ), mivel ez nagy hangminőséget biztosít, és a legtöbb böngésző támogatja (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ és Safari 5+).
- A fájl konvertálása Vorbis formátumba ( .ogg ) a Firefox 3.6+ és az Opera 10.5+ támogatásához. Használhat olyan átalakítót, mint a Vorbis.com-on. MP3 és WAV fájlformátumát ( .wav ) is átalakíthatja Firefox és Opera támogatásához. Azt javaslom, hogy a fájlt mindhárom típusba küldted, csak a biztonságért, de a leginkább szüksége van MP3-re és egy másikra.
- Töltsön fel minden audiofájlt a webszerverre, és jegyezze fel a könyvtárat, amelyben tárolta őket. Jó ötlet, hogy azokat alkönyvtárba helyezzük csak audiofájlokhoz, minthogy a legtöbb tervező a képeket a képek könyvtárába menti.
- Adja hozzá az AUDIO elemet a HTML fájlhoz, ahová a hangfájl vezérlőit megjeleníteni kívánja.
- Helyezze el a SOURCE elemeket az AUDIO elemen belül feltöltött audiorészletekhez :
-
- Az AUDIO elem bármely HTML-kódja az alapértelmezést nem támogató böngészők számára használható. Szóval adj hozzá néhány HTML-t. A legegyszerűbb módja a HTML hozzáadásának lehetővé tétele a fájl letöltéséhez, de a hang lejátszásához HTML 4.01 beágyazási módszereket is használhat. Itt van egy egyszerű tartalék:
A böngészője nem támogatja az audio lejátszást, töltse le a fájlt:
- Az utolsó dolog, amire szükséged van, zárja be az AUDIO elemet:
- Ha elkészült, a HTML-nek így kell kinéznie:
További tippek
- Győződjön meg róla, hogy a HTML5 doctype () függvényt használja annak érdekében, hogy a HTML érvényesítse
- Tekintse át az elemhez rendelkezésre álló attribútumokat, és nézze meg, milyen más lehetőségeket adhat hozzá eleméhez.
- Felhívjuk a figyelmet arra, hogy alapértelmezés szerint beállítjuk a HTML-t, és az automatikus lejátszást kikapcsoljuk. Természetesen megváltoztathatja ezt, de ne feledje, hogy sokan olyan hangot találnak, amely automatikusan elindul, és hogy nem tudja ellenőrizni, hogy a legjobb esetben bosszantó, és gyakran csak hagyja el az oldalt, ha ez megtörténik.