Audio i video w html5

Przed html5 nie było jednolitego standardu umieszczania plików audio i video na stronach www. W html5 wprowadzono dwa nowe znaczniki <audio> i <video> służące do osadzania plików audio i video odpowiednio. Poniżej przykładowe użycie znacznika audio do odtworzenia muzyki.

<audio controls>
  <source src="plik.ogg" type="audio/ogg">
  <source src="plik.mp3" type="audio/mpeg">
Twoja przeglądarka nie wspiera znacznika audio.
</audio>

Atrybut controls dodaje standardowe kontrolki audio tzn. przycisk odtwarzania/pauzowania czy regulację głośności. Informacja tekstowa zawarta pomiędzy znacznikiem otwierającym i zamykającym audio będzie wyświetlana w przeglądarkach nie obsługujących audio. Umieszczone wewnątrz znacznika audio tagi source służą do podawania plików audio w różnych formatach. Przeglądarka użyje pierwszego rozpoznanego przez nią formatu. Obecnie obsługiwane są trzy formaty mp3, ogg i wav. Z tym, że każda przeglądarka obsługuje różne formaty. Jakie przeglądarki obsługują jakie formaty plików audio i video można zobaczyć pod adresem. Wstawienie filmu do htmla odbywa się za pomocą znacznika video. Zawiera on podobnie jak audio atrybut controls oraz znaczniki source z linkami do plików z filmami w odpowiednich formatach.

<video width="800" height="600" controls>
  <source src="film.mp4" type="video/mp4">
  <source src="film.ogg" type="video/ogg">
Twoja przeglądarka nie wspiera znacznika video.
</video>

Specyfikacja nie określa w jaki sposób kontrolki odtwarzacza audio i wideo powinny wyglądać, każda przeglądarka ma własny interfejs. Skorzystamy teraz z javascriptowego Media Api dostarczanego wraz z nowymi tagami i napiszemy własny odtwarzacz audio tzn. oprogramujemy własne kontrolki. Player będzie się wtedy obsługiwało tak samo na każdej przeglądarce. Utwórzmy najpierw nowy plik html.

<html>
	<head>
		<meta charset="utf-8">
		<title>Odtwarzacz audio</title>
		<script src="jquery-1.11.1.min.js"></script>
		<script src="audio-player.js"></script>
	</head>
<body>
		<audio id="media-audio" controls>
			<source src="Raccoon_Fink_-_Millennialist.mp3" type="audio/mp3">
			<source src="Raccoon_Fink_Millennialist.ogg" type="audio/ogg">
		</audio>
		<div id="audio-controls">
			<progress id="progress-bar" min="0" max="100" value="0">0% played</progress>
			<button id="play-pause-button" class="play" title="play">Play</button>
			<button id="volume-up" title="increase volume" onclick="changeVolume(1);">Volume up</button>
			<button id="volume-down" title="decrease volume" onclick="changeVolume(0);">Volume down</button>
		</div>
</body>
</html>

Jak widać załączamy w nim skrypty (jquery oraz audio-player.js). Plik audio-player.js będzie zawierał kod playera. Element audio zawiera dwa źródła (source) - pliki różnego typu. Ponadto dodaliśmy buttony do sterowania odtwarzaniem i pasek postępu odtwarzania (element html5 progress). Przejdźmy do naszego pliku JavaScript. Mamy tam zdefiniowaną funkcję o nazwie initialiseMediaPlayer(), którą musimy wywołać, gdy dokument jest załadowany.

$(document).ready(function() {
	initialiseMediaPlayer();
});

Określamy również zmienne globalne, w których przechowywać będziemy nasz player, przycisk, oraz pasek postępu. W funkcji initialiseMediaPlayer łapiemy tag audio po identyfikatorze oraz przycisk i element progress, wyłączamy również standardowe kontrolki oraz ustawiamy początkową głośność.

mediaPlayer = document.getElementById('media-audio');
playPauseBtn = $('#play-pause-button');
progressBar = $('#progress-bar');
mediaPlayer.controls = false;
mediaPlayer.volume = 0.6;

Po kliknięciu na przycisk play/pause zostanie wywołana funkcja togglePlayPause(). Funkcja ta służy do pauzowania i ponownego odtwarzania muzyki. Jest ona bardzo prosta. Jeśli aktualne odtwarzanie się zakończyło lub zostało zatrzymane włączamy muzykę (metoda play) oraz aktualizujemy tekst buttona. Jeśli odtwarzamy muzykę przycisk służy do pauzowania zatem wywołujemy metodę pause na obiekcie playera oraz tak jak poprzednio zmieniamy tekst buttona. Kolejne dwa buttony, które musimy oprogramować to buttony do sterowania głośnością. Za wszystko odpowiedzialna jest funkcja changeVolume pokazana poniżej.

function changeVolume(direction) {
	if (direction === 1) mediaPlayer.volume += mediaPlayer.volume == 1 ? 0 : 0.1;
	else mediaPlayer.volume -= (mediaPlayer.volume == 0 ? 0 : 0.1);
	mediaPlayer.volume = parseFloat(mediaPlayer.volume).toFixed(1);
}

Przyjmuje ona parametr direction, na podstawie którego zwiększamy lub zmniejszamy głośność w zależności czy parametr ten wynosi 1 czy 0. Ustawienie głośności polega na zmianie atrybutu volume. Atrybut ma zakres od 0 do 1, więc zmiany wykonane są co 0.1. Odtwarzacze multimedialne zwykle posiadają pasek postępu, który wskazuje, jak wiele z audio zostało już odtworzone. Idealnie do wyświetlenia tej informacji pasuje znacznik html5 progress. Aby śledzić odtwarzanie pliku i aktualizować na bieżąco pasek postępu musimy nasłuchiwać zdarzenie timeupdate. Za każdym razem gdy to zdarzenie jest wywoływane, możemy zaktualizować nasz pasek postępu. Tak więc w naszej funkcji initialiseMediaPlayer() musimy dodać:

mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

Teraz, gdy zachodzi zdarzenie timeupdate jest wywoływana funkcja updateProgressBar(), którą definiujemy w następujący sposób.

function updateProgressBar() {
	var percentage = Math.ceil((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
	progressBar.attr('value', percentage);
	progressBar.html(percentage + '% played');
}

Pracujemy tutaj na uchwycie paska postępu (progressBar) i aktualizujemy pasek na podstawie atrybutów duration i currentTime. Na poniższym rysunku screen jak wygląda nasza kontrolka. Audio player

Demo odtwarzacza audio.