Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Pliki dźwiękowe - audio

Pliki multimedialne od dawna przysparzają webmasterom wielu siwych włosów. Dopiero HTML5 niezwykle upraszcza sprawy, żeby jeszcze producenci przeglądarek nadążali...

Osadzanie plików dźwiękowych

Do publikacji na swojej stronie plików audio stosuj formaty .mp3, .ogg lub .wav. Podstawowy znacznik ma prostą konstrukcję:

<audio src="ścieżka do pliku audio">
	Twoja przeglądarka nie obsługuje znacznika audio
</audio>

Jak do tej pory bardzo proste. Opiszemy teraz kilka atrybutów tego znacznika:

  • controls="controls" - powoduje wyświetlenie paska postępu, przycisku odtwarzania oraz zmiany głośności,
  • autoplay="autoplay" - automatyczne uruchomienie odtwarzania po wejściu na stronę,
  • preload="preload" - odtwarzanie rozpocznie się dopiero po pobraniu całego pliku na komputer odwiedzającego stronę, dzięki temu można uniknąć problemów związanych z płynnością odtwarzania
  • loop="loop" - odtwarzanie w pętli - po zakończeniu ponowy start i tak "w kółko"

Czy to wszystko? Niestety nie. Pamiętajmy że nie każdy ma zainstalowaną najnowszą wersję przeglądarki, więc pewniejszy sposób wymaga przekonwertowania pliku na różne formaty i zastosowania konstrukcji:

<audio controls="controls">
	<source src="plik_audio.wav" type="audio/wav" />
	<source src="plik_audio.ogg" type="audio/ogg" />
	<source src="plik_audio.mp3" type="audio/mpeg" />
	Twoja przeglądarka nie obsługuje znacznika audio
</audio>

Oto efekt wstawienia powyższego kodu:

Ćwiczenie 2_3_3_1

Wykonaj stronę, na której umieścisz plik audio stosując powyższy kod. Masz tutaj przygotowane testowe pliki audio.

Najprostszy i najpewniejszy sposób wstawiania plików dźwiękowych

Można po prostu wstawić odsyłacz (link) do pliku dźwiękowego i po kłopocie. Tyle, że tracimy wtedy kontrolę nad wyświetlaniem i odtwarzaniem, pozostawiając wszystko w "rękach" przeglądarki i systemu operacyjnego. Odpowiedni fragment kodu wygląda wtedy następująco: <a href="ścieżka do pliku audio" target="_blank">opis</a>

Oto efekt zastosowania linku do pliku dźwiękowego:

Kliknij tutaj aby posłuchać nagrania testowego

Ćwiczenie 2_3_3_2

Wykonaj stronę, na której umieścisz link do pliku audio stosując jeden z plików ściągniętych w poprzednim ćwiczeniu.

Praca domowa

Przy pomocy Audacity nagraj swoją krótką wypowiedź (możesz zaśpiewać), a następnie wykonaj stronę na której osadzisz to nagranie sposobami pokazanymi w ćwiczeniach wykonanych na zajęciach. Tutaj masz krótką instrukcję wykonania nagrania.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.