Skip to main content

Jak dodać dźwięk do strony WWW HTML5

Zielony Poradnik #6 - Jak dodać muzykę do Bloga/strony w HTML (Kwiecień 2025)

Zielony Poradnik #6 - Jak dodać muzykę do Bloga/strony w HTML (Kwiecień 2025)
Anonim

HTML5 ułatwia dodawanie dźwięku i muzyki do stron internetowych za pomocą tego elementu. W rzeczywistości najtrudniejszą rzeczą jest stworzenie wielu źródeł, dzięki którym pliki dźwiękowe będą odtwarzane w najszerszej gamie przeglądarek.

Zaletą używania HTML5 jest to, że możesz osadzić dźwięk za pomocą kilku tagów. Przeglądarki odtwarzają dźwięk tak, jakby wyświetlały obraz podczas używania

IMG element.

Jak dodać dźwięk do strony WWW HTML5

Będziesz potrzebował edytora HTML, pliku dźwiękowego (najlepiej w formacie MP3) i konwertera plików dźwiękowych.

  1. Po pierwsze potrzebujesz pliku dźwiękowego. Najlepiej nagrać plik jako MP3 (

    .mp3), ponieważ ma wysoką jakość dźwięku i jest obsługiwany przez większość przeglądarek (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ i Safari 5+).

  2. Konwertuj swój plik do formatu Vorbis (

    .ogg), aby dodać obsługę Firefox 3.6+ i Opera 10.5+. Możesz użyć konwertera takiego jak na Vorbis.com. Możesz również konwertować pliki MP3 do formatu WAV (

    .wav), aby uzyskać wsparcie dla Firefoksa i Opery. Zalecam opublikowanie pliku we wszystkich trzech typach, tylko ze względów bezpieczeństwa, ale najbardziej potrzebne są pliki MP3 i jeden inny typ.

  3. Prześlij wszystkie pliki audio na swój serwer sieciowy i zanotuj katalog, w którym je zapisałeś. Dobrym pomysłem jest umieszczenie ich w podkatalogu tylko dla plików audio, tak jak większość projektantów zapisuje obrazy w

    obrazy informator.

  4. Dodaj

    AUDIO element do pliku HTML, w którym mają być wyświetlane elementy sterujące pliku dźwiękowego.

  5. Miejsce

    ŹRÓDŁO elementy dla każdego pliku dźwiękowego, który przesyłasz wewnątrz

    AUDIO element:

    1. Dowolny HTML wewnątrz

      AUDIO element zostanie użyty jako rezerwowy dla przeglądarek, które nie obsługują

      AUDIO element. Dodaj trochę HTML. Najprostszym sposobem jest dodanie kodu HTML, aby umożliwić mu pobranie pliku, ale można również użyć metod osadzania HTML 4.01, aby odtworzyć dźwięk. Oto prosty sposób postępowania awaryjnego:

      Twoja przeglądarka nie obsługuje odtwarzania dźwięku, pobierz plik: MP3,

    2. Vorbis, WAV

  6. Ostatnią rzeczą, którą musisz zrobić, to zamknąć swój element AUDIO:

    1. Kiedy skończysz, kod HTML powinien wyglądać tak:

    2. Twoja przeglądarka nie obsługuje odtwarzania dźwięku, pobierz plik:

    3. MP3,

    4. Vorbis,

    5. WAV

Dodatkowe wskazówki

  • Upewnij się, że używasz funkcji dociskowej HTML5 (), aby sprawdzić poprawność kodu HTML
  • Przejrzyj dostępne atrybuty elementu, aby zobaczyć, jakie inne opcje możesz dodać do swojego elementu.
  • Zauważ, że domyślnie skonfigurowaliśmy kod HTML tak, aby zawierał elementy sterujące, a autoodtwarzanie zostało wyłączone. Możesz to oczywiście zmienić, ale pamiętaj, że wiele osób znajduje dźwięk, który zaczyna się automatycznie / że nie może kontrolować, aby w najlepszym razie był denerwujący, i często po prostu opuszcza stronę, gdy to się dzieje.