Importowanie w JS?

Dla specjalistów Programowanie
#1

Witam, napisałem prostą grę i teraz chciałbym do niej dodać dźwięki. Chcę skorzystać z howler.js. Teraz pojawia się problem.

 

Chcę, aby dźwięk odtworzył się za każdym razem jak kliknę literę alfabetu, których jest 34. Są one generowanie w JSie, a nie na sztywno w HTML. Jak teraz do istniejącego skryptu game.js (moja gra) dodać funkcjonalnosci howlera, aby w game.js mógł stworzyć obiekt klasy znajdującej się w howler.js?

#2

Howler został napisany w JS wersji starszej niż 6, więc nie ma klas, które mógłbyś zaimportować. W dokumentacji znajdziesz przykłady użycia “po staremu”.

#3

Co oznacza ‘po staremu’? Ja mam taki problem, że nie bardzo wiem jak go użyć w innym skrypcie. Np. alfabet generuję za pomocą js-a, czyli nie ma go pierwotnie w markupie. W takim razie jak przypisać dźwięk do eventlistenera dla każdej literki alfabetu?

 

Znaczy znam sposób jak to rozwiązać, ale jest on bardzo nieprofesjonalny. 

 

<script src="js/howler.core.js"></script>

    <script>

        let themeSong = new Howl({ src: ['sounds/theme.wav'], loop: true, volume: 0.3});

        themeSong.once('load', function(){

            themeSong.play();

        });

    </script>

Wiesz  może dlaczego mając taki skrypt w HTMLu dźwięk nie zawsze rozpoczyna się od razu po załadowaniu strony? Niekiedy trzeba czekać z 2-3 sekundy.

 

#4

Trzeba poczekać aż pliki z dźwiękami się załadują, ale to przypuszczenie. Najlepiej sprawdź w konsoli (developer tools).

#5

Dobra, mam jeszcze jedno pytanie. Mam nastepującą instrukcję warunkową:

volumeContainer.addEventListener('click', function () {

        if (!volumeButton.classList.contains('volumeOff')) {

            volumeButton.classList.toggle('volumeOff');

            themeSong.fade(volume, 0, 500, themeSong.pause());

        } else {

            themeSong.fade(0, volume, 500, themeSong.play());

            volumeButton.classList.toggle('volumeOff');

        }

    }, false);

Problem jest taki, że kiedy dźwięk jest wyłączany fade nie działa. Dźwięk ucieka natychmiastowo bez tej płynności, natomiast włączany jest prawidłowo. 

#6

 

Po włączeniu bilioteki do kodu

<script src="js/howler.core.js"></script>

powinieneś mieć jej funkcje w zasięgu globalnym. Nie musisz pisać kodu w blokach <script> w HTML-u. Powinieneś móc używać biblioteki w dowolnym pliku JS-owym, chociaż bez konfiguracji IDE będzie twierdziło inaczej. A że jest to nieeleganckie… Tak to wygląda, kiedy miesza się wersje języka. Możesz przejść na TypeScripta, gdzie istnieją repozytoria zapewniające zgodność howlera.

#7

 

themeSong.fade(volume, 0, 500, themeSong.pause());

Powyższa linijka w twoim kodzie odpowiada za wyciszanie dźwięku. W miejscu, w którym metoda fade oczekuje identyfikatora dźwięku, podajesz wynik z metody pause, która wstrzymuje odtwarzanie. Możliwe, że to jest przyczyną problemów. W takim przypadku rozwiązaniem będzie wstawienie w tym miejscu jakiejś zmiennej zawierającej dany identyfikator dźwięku.

#8

 

 

Miałeś rację. Działa. Dzięki.