W niniejszym artykule omówimy wykorzystanie języka JavaScript, dzięki któremu rozszerzymy podstawową funkcjonalność odtwarzacza muzyki. Ponadto będziemy w stanie lepiej kontrolować i zarządzać obiektem audio. Otwiera to drogę do lepszego dostosowania odtwarzacza na stronie internetowej. Zrezygnujemy z domyślnych kontrolek, a następnie utworzymy je sami i przypiszemy im odpowiednie funkcje przygotowane wg własnych upodobań. Zamiast koncentrować się na wyglądzie, zwrócimy raczej uwagę na samodzielnym dostosowaniu szkieletu funkcjonalności.
Funkcje będziemy wywoływać po kliknięciu przycisku na stronie. Możemy to zrobić pomijając wszystkie atrybuty (controls, src i inne), o czym pisaliśmy w artykule o podstawach znacznika <audio> HTML5.
Dodajemy znacznik <audio> w jego podstawowej formie, pamiętając aby przypisać mu identyfikator:
<audio id="tagAudio">
Tag <audio> HTML5 nie jest obsługiwany
</audio>
Następnie dodajemy kilka przycisków, które posłużą do sterowania odtwarzaną muzyką. Każdy przycisk wywoła funkcję napisaną w języku JavaScript zgodnie z przypisaną nazwą. Odtwarzacz będzie miał 4 przyciski: Odtwarzaj, Przewiń do przodu, Przewiń do tyłu i Od początku.
<button id="odtwarzaj" onclick="odtwarzajMuzyke();">
Odtwarzaj
</button>
<button onclick="doTylu();">
Przewin Do Tyłu
</button>
<button onclick="doPrzodu();">
Przewin Do Przodu
</button>
<button onclick="zatrzymaj();">
Zatrzymaj
</button>
Potrzebne będzie również wskazanie źródła pliku audio. Wskazówki co do poprawnego odwoływania się do plików znajdują się w artykule o znaczniku <audio> HTML5.
<input type="text" id="plik" size="100" value="audio.mp3" />
Tyle, jeśli chodzi o treść do zawarcia w BODY. Przejdźmy teraz do sekcji HEAD na stronie - tam zdefiniujemy wszystkie funkcje. @STRONA@Zacznijmy od funkcji zwykłego odtworzenia piosenki. Najpierw sprawdzamy obsługę elementu audio instrukcją warunkową if. Następnie korzystając z metody getElementById, otrzymujemy obiekt audio, na którym używamy wbudowanych metod play i pause w zależności od jego stanu. Jeżeli stan obiektu audio wskazuje, że piosenka nie jest odtwarzana (oAudio.paused jest prawdą logiczną), to ją uruchamiamy, a oznaczenie przycisku zmieniamy tak, aby użytkownik wiedział, że kolejne jego kliknięcie zatrzyma odtwarzanie.
Jeden przycisk będzie służył zamiennie do odtwarzania i wstrzymywania piosenki. Tekst widniejący na przycisku będzie się zmieniał zgodnie z dostępną akcją. Jeżeli piosenka jest w trakcie odtwarzania, to przycisk będzie miał tekstowe oznaczenie Wstrzymaj, aby móc w dowolnym momencie wstrzymać słuchanie muzyki. Zmienna globalna nazwaPliku posłuży natomiast do sprawdzenia, czy nie zmieniło się źródło piosenki. W końcu użytkownik może sam wprowadzić nazwę w pole tekstowe (identyfikator plik) i zmienić źródło.
<script type="text/javascript">
var nazwaPliku = "";
function odtwarzajMuzyke() {
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('tagAudio');
var btn = document.getElementById('odtwarzaj');
var audioURL = document.getElementById('plik');
if (nazwaPliku !==audioURL.value) {
oAudio.src = audioURL.value;
nazwaPliku = audioURL.value;
}
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Wstrzymaj";
}
else {
oAudio.pause();
btn.textContent = "Odtwarzaj";
}
}
catch (e) {
if(window.console && console.error("Treść błędu:" + e));
}
}
}
</script>
@STRONA@Przygotowaliśmy już niezbędne funkcje odtwarzacza, a teraz zajmiemy się napisaniem funkcji, o której wspominaliśmy w artykule o podstawach tagu audio html5. Chodzi o przewijanie piosenki np. o 15 sekund po kliknięciu przycisku. Dla przypomnienia: kiedy korzystamy ze standardowej składni znacznika audio bez wykorzystania JavaScript, funkcja ta jest dostępna tylko w Internet Explorer 9. Chcemy, aby użytkownicy pozostałych przeglądarek, np. Firefoksa czy Chrome, mogli szybko przewijać piosenki na stronie internetowej.
function doPrzodu() {
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('tagAudio');
oAudio.currentTime += 15.0;
}
catch (e) {
if(window.console && console.error("Treść błędu:" + e));
}
}
}
Omówimy teraz działanie kodu. Standardowo sprawdzamy, czy element audio HTML5 jest obsługiwany, a jeżeli jest, to zwiększamy wartość właściwości currentTime obiektu audio. Wartość tę można po swojemu dopasować. Jeżeli zamiast zwiększyć, zmniejszymy ją, to naturalnie przewijanie będzie działać do tyłu.
function doTylu() {
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('tagAudio');
oAudio.currentTime -= 15.0;
}
catch (e) {
if(window.console && console.error("Treść błędu:" + e));
}
}
}
Zastosujemy drobną modyfikację, by uzyskać funkcję całkowitego zatrzymania utworu. Przesuwamy aktualny czas odtwarzanego utworu na początek, przypisując wartość 0.
function zatrzymaj() {
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('tagAudio');
oAudio.currentTime = 0;
}
catch (e) {
if(window.console && console.error("Treść błędu:" + e));
}
}
}
Najwyższa pora, aby krótko wyjaśnić jak będą obsługiwane błędy podczas manipulacji na obiekcie audio. Zabezpieczyliśmy się przed sytuacją, gdy przeglądarka w ogóle nie obsługuje HTML5 i znacznika <audio>, ale co wtedy gdy użytkownik kliknie Odtwarzaj, a wskazany plik w ogóle nie istnieje? A gdy będzie go chciał przewinąć? Błędy te będą ignorowane i nie wpłyną na wrażenia użytkowania w postaci żadnych komunikatów, alertów itp., ale nie przepadną też na zawsze. Będą wychwycone instrukcją catch z parametrem e. Treść błędu będzie wysyłana do konsoli, którą można wyświetlić w Narzędziach deweloperskich przeglądarki Internet Explorer 9 (uruchamiamy skrótem klawiaturowym - klawisz funkcyjny F12).
Ostatnią funkcją, którą własnoręcznie wprowadzimy, będzie suwak. Pozwoli on z jednej strony zwizualizować postęp w odtwarzaniu utworu, a z drugiej - przewijać piosenkę, gdy użytkownik kliknie go i wskażę wybraną pozycję. Wykorzystamy do tego celu zdarzenia. Dodamy obserwatora, który będzie przechwytywał zmiany aktualnego czasu odtwarzania i uaktualniał pasek postępu, a także słuchacza, który wykryje kliknięcie w suwak i przewinie automatycznie utwór. Użyjemy tu metody addEventListener, która pojawiła się w Internet Explorer. @STRONA@
Suwak, o którym mowa, zrealizujemy przez znacznik wirtualnego płótna, tzw. Canvas. Nie będziemy go szerzej omawiać, gdyż wykracza to poza ramy tego artykułu, a dodatkowo ten temat pojawi się w dalszej części kursu. W sekcji BODY dodajemy tag <canvas>.
<canvas id="canvas" width="400" height="20">
Canvas HTML5 nie jest obsługiwany
</canvas>
W sekcji HEAD dodajemy dla niego obramowanie.
<style id="wewCss" type="text/css">
#canvas
{
margin-top:10px;
border-style:solid;
border-width:1px;
padding:3px;
}
</style>
Potrzebne nam będą teraz dwie funkcje, które dodamy do już istniejącego kodu JavaScript. Pierwsza jest odpowiedzialna za wyświetlenie i uaktualnienie suwaka. Wirtualne płótno będzie rysowało prostokąt o rozmiarach proporcjonalnych do aktualnego czasu odtwarzania (currentTime) i długości utworu (duration).
function suwak() {
var oAudio = document.getElementById('tagAudio');
var czas = Math.round(oAudio.currentTime);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.fillStyle = "rgb(158,190,245)";
var szer= (czas/ oAudio.duration) * (canvas.clientWidth);
if (szer> 0) {
ctx.fillRect(0, 0, szer, canvas.clientHeight);
}
}
}
Druga funkcja będzie ustawiać słuchaczy, którzy będą przechwytywać interesujące nas zdarzenia.
function rejestrujZdarzenia() {
var canvas = document.getElementById('canvas');
var oAudio = document.getElementById('tagAudio');
oAudio.addEventListener("timeupdate", suwak, true);
canvas.addEventListener("click", function(e) {
var oAudio = document.getElementById('tagAudio');
var canvas = document.getElementById('canvas');
if (!e) {
e = window.event;
}
try {
oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
}
catch (e) {
if (window.console && console.error("Treść błędu:" + e));
}
}, true);
}
Zanim domkniemy znacznik <script>, wstawiamy linijkę kodu, która zabezpieczy nas przed używaniem elementów, które być może nie zostały jeszcze załadowane. Gdy załaduje się DOM i skrypty, wtedy uaktywnią się obiekty nasłuchujące.
window.addEventListener("DOMContentLoaded", rejestrujZdarzenia, false);
Stworzyliśmy od podstaw własny odtwarzacz multimediów, który możemy dostosowywać wg własnych potrzeb. Wystarczy skorzystać z CSS-a i własnej inwencji twórczej, aby odtwarzacz spełniał nasze upodobania. Omówione w tym artykule funkcje to zaledwie namiastka możliwości, które oferuje język HTML5.
341f31d.png)