Audio API Dostałem wczoraj na Facebooku zapytanie jak można otworzyć dźwięk na stronie HTML. Sprawa wydaje się bardzo prosta jeśli się wiem jakich frazy trzeba szukać w Google. Osoba, która zadała mi to pytania widać, że się nie zna nawet podstaw co by tłumaczyło dlaczego z tym problemem zgłosiło się do mnie.

A tak na serio. Nie zawsze facebook pozwala mi czytać wiadomości od obcych osób dlatego jeśli macie pytania lub prośby zawsze możecie skorzystać ze strony kontaktowej.

Przejdź mi jednak teraz do omówienia problemu odtworzenia dźwięku w HTML a raczej w JavaScript-cie.

Problem ten obecnie łatwo rozwiązać ponieważ żyjemy w przyszłości HTML 5. Tak jest do otworzenia dźwięku nie potrzebny nam jest plugin Flash czy Silverlight. Mamy wszystko co nam jest potrzebne.

API HTML 5 do odtworzenia dźwięku istnieje od 2012 roku (a mamy rok 2016) i jest wpierana obecnie przed najnowsze przeglądarki. Nie trzeba wiec kombinować. Chyba, że chcemy odtworzyć dźwięk w Internet Explorer 8 w co jednak wątpię.

Do napisania kodu utworzyłem solucji w Visual Studio. Będę jednak szczery, że do aplikacji demo tego rozwiązania potrzebuje tylko strony HTML.

image

Oto kod strony HTML.

<body>
    <button id="bstop">Stop</button>
    <button id="bplay">Play</button>
    <script>
        var snd = new Audio("PHOENIXQUEST.mp3");
        snd.loop = true;
        snd.autoplay = false;

        document.getElementById("bstop").onclick = function () { snd.pause(); };

        document.getElementById("bplay").onclick = function () { snd.play(); };
    </script>
</body>

Zawiera ona dwa przyciski STOP i PLAY.

Skrypt JavaScript znajdujący się w bloku “script” tworzy obiekt Audio z utworem muzycznym PhoenixQuest. Później korzystając z pola LOOP ustawiam by utwór się zapętlał, korzystając z pola AUTOPLAY wyłączał automatyczne uruchomienie muzyki.

Później do przycisków dodaję funkcję, która ma zatrzymywać utwór i go odważać ponownie.

Same Audio API ma bardzo dużo pól i funkcji. Wydaje mi się jednak, że nie wszystko jest potrzebne.

Zawiera ona dwa przyciski STOP i PLAY.

Skrypt JavaScript znajdujący się w bloku “script” tworzy obiekt Audio z utworem muzycznym PhoenixQuest. Później korzystając z pola LOOP ustawiam to by utwór się zapętlał. Korzystając z pola AUTOPLAY wyłączał automatyczne uruchomienie muzyki.

Później do przycisków dodaje funkcję, które zatrzymywać utwór i go odważać ponownie.

Same Audio API ma bardzo dużo pól i funkcji. Wydaje mi się jednak, że nie wszystko to jest potrzebne.

222

Jeśli więc oczekujesz więcej opcji lub bardziej poukładanego API to warto przyjrzeć się skryptowi howler.js.

Jeśli więc oczekujesz więcej opcji lub bardziej poukładanego API to warto przyjrzeć się skryptowi howler.js.

image

http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library

To wszystko. Nie wrzucam kodu bo odtworzenie dźwięku sprowadza się do paru linijek.

To wszystko. Nie wrzucam kod bo odtworzenie dźwięku sprawdza się do paru linijek.