Skip to main content

Kako dodati zvuk na HTML5 web stranicu

[HTML Tutorials] - Kako dodati audio efekat u html-u (Travanj 2025)

[HTML Tutorials] - Kako dodati audio efekat u html-u (Travanj 2025)
Anonim

HTML5 olakšava dodavanje zvuka i glazbe na vaše web stranice s elementom. Zapravo, najteže je napraviti više izvora potrebnih da biste bili sigurni da se vaše zvučne datoteke reproduciraju na najširem rasponu preglednika.

Prednost korištenja HTML5 je da možete ugraditi zvuk samo pomoću nekoliko oznaka. Preglednici, dakle, reproduciraju zvuk baš kao što bi prikazivali sliku prilikom korištenja

IMG element.

Kako dodati zvuk na HTML5 web stranicu

Trebat će vam HTML uređivač, zvučna datoteka (po mogućnosti u MP3 formatu) i pretvornik zvučnih datoteka.

  1. Prvo, potrebna vam je zvučna datoteka. Najbolje je snimiti datoteku kao MP3 (

    .mp3) jer to ima visoku kvalitetu zvuka i podržava većina preglednika (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ i Safari 5+).

  2. Pretvorite datoteku u Vorbis format (

    .ogg) da biste dodali Firefox 3.6+ i Opera 10.5+ podršku. Možete koristiti pretvarač poput onog pronađen na Vorbis.com. Također možete pretvoriti svoj MP3 u format WAV datoteke (

    .wav) da biste dobili Firefox i Opera podršku. Preporučujem postavljanje datoteke u sve tri vrste, samo za sigurnost, ali najviše vam je potrebna MP3 i jedna druga vrsta.

  3. Prenesite sve audiodatoteke na svoj web poslužitelj i zabilježite imenik u kojem ste ih pohranili. Dobro je staviti ih u poddirektorij samo za audio datoteke, kao što većina dizajnera spremaju slike u

    slika imenik.

  4. Dodaj

    AUDIO elementu u svoju HTML datoteku gdje želite da se kontrola zvučne datoteke prikazuje.

  5. Mjesto

    IZVOR elementi za svaku zvučnu datoteku koju prenesete unutar

    AUDIO element:

    1. Bilo koji HTML unutar

      AUDIO element će se koristiti kao zamjena za preglednike koji ne podržavaju

      AUDIO element. Zato dodajte neki HTML. Najjednostavniji način je dodavanje HTML-a da bi ih preuzeli, ali možete koristiti i HTML 4.01 metode ugrađivanja za reprodukciju zvuka. Ovdje je jednostavan zamisao:

      Vaš preglednik ne podržava reprodukciju zvuka, preuzmite datoteku: MP3,

    2. Vorbis, WAV

  6. Posljednje što trebate učiniti je zatvoriti svoj AUDIO element:

    1. Kada završite, HTML bi trebao izgledati ovako:

    2. Vaš preglednik ne podržava reprodukciju zvuka, preuzmite datoteku:

    3. MP3,

    4. Vorbis,

    5. WAV

Dodatni savjeti

  • Svakako upotrebljavajte HTML5 doctype () kako bi HTML potvrdio
  • Pregledajte atribute dostupne elementu da biste vidjeli koje druge opcije možete dodati elementu.
  • Imajte na umu da smo postavili HTML da uključimo kontrole prema zadanim postavkama i isključili automatsku reprodukciju. Možete, naravno, promijeniti to, ali imajte na umu da mnogi ljudi pronađu zvuk koji automatski pokreće / da ne može kontrolirati da je u najboljem slučaju neugodno i često će napustiti stranicu kada se to dogodi.